javascript：jQueryプラグインの作り方

参考：

[1] http://d.hatena.ne.jp/cyokodog/20091126/define_plugin01
     -> 2.7 実装を prototype オブジェクトで定義
[2] http://logicbox.net/jquery/simplyscroll/

[3] https://gist.github.com/maepon/4754210[4] http://blog2.jamadam.com/?p=115

１．関数のプラグイン[1] -> 1.2 複数の関数を定義

(function($){
    $.plugin = {
        hoge : function(){
            //...   
        },
        fuga : function(){
            //...   
        }
    }
})(jQuery);

２．メソッドのプラグイン

[1] と[2]のsimlyscroll のコードを手本にした。


コンストラクタを作成し（下の例ではPlugin）、以下のテンプレートにはめ込んでプラグインを作成する。
[4]に公式な方法も載っているが、[2]でも使われているので、下記でも問題ないと思う。
尚、以下ではコンストラクタ雰囲気を残すために、myPluginでなく、Pluginとしてあるが、[1][2]では同じ名前を使っている。

プラグインコードのテンプレート

(function($) { // 無名関数でラップしてプラグインを独立させておく。jQueryキーワードの代わりにドル記号($)を使用する。
 $.fn.myPlugin = function(opts) { // プラグインを定義する。
  return this.each(function() { // each();で回して全ての要素に対して同様に処理していく
   new $.Plugin(this,opts);
  });
 };
 var defaults = { //  オプション(opts)のデフォルト値を定義
  opts1: 0, 
  opts2: 0, 
  //
  //
 };
 $.Plugin = function(elements, opts){ // コンストラクタの定義
  this.opts = $.extend({}, defaults, opts); // デフォルトオプションと渡されたオプションのマージ
  this.$id = $(elements); // などなど、中身を記載
  //
  //
 };
 $.extend($.Plugin.prototype,{ // プロトタイプを定義
  proto1: function() { 
   //
   //
  },
  proto2: function() { 
   //
   //
  },
  //
  //
 });
})(jQuery);

プラグインの使用例

$(function() {
 $("#id名").myPlugin({
  opts1: 800,
  //
  //
 });
});