jQueryプラグインには主に2つの拡張方式があります

2179 ワード

jQueryプラグインには主に2つの拡張方法があります.
  • 拡張グローバル関数方式.
  • 拡張オブジェクトメソッド.

  • 拡張グローバル関数方式
    拡張グローバル関数方式で定義されたプラグイン、すなわちクラスレベルプラグインは、jQuery.extend()で定義します.次の形式で定義します.
    jQuery.extend(function(){
        pluginName:function(){
            //        
        };
    });
    

     
    このように定義コードはjQuery自体を直接拡張し、$を通過する.pluginName()を呼び出します.
    プラグインを定義するときは、入力されたパラメータに注意する必要があります.この場合、プラグインはjQueryクラスの範囲で実行されるため、入力されるパラメータはページレベルのグローバルになります.
    拡張オブジェクトメソッド
    拡張オブジェクトメソッドで定義されるプラグイン、すなわちオブジェクトレベルプラグインは、プラグインで最も広く使用されている定義方法です.オブジェクトレベルのプラグインは$を通過する.fn.extendまたは$.fn.pluginNameで定義します.推奨される定義形式は次のとおりです.
    (function($){
        var defaultOptions={};
        $.fn.pluginName=function(option){
            var pluginMethods={
                init:function(option){
                    var option=$.extend(defaultOptions,option);
                },
                methods1:function(){},
                methods2:function(){}
            };
     
            if(pluginMethods[option]){
                pluginMethods[option].apply(this,Array.prototype.slice.call(arguments,1));
            }else if(typeof option=='object'){
                pluginMethods.init.apply(this,arguments);
            }else{
                $.error("Some error.");
            }
        }
    })(jQuery);
    

     
    この推奨プラグイン定義フォーマットは$('selector')をサポートすることができる.PluginName('methods 1',args)形式のメソッド呼び出しであり、$('selector')もサポートできる.pluginName({})形式の初期化方法.pluginMethodsは$まで定義することもできる.fn.PluginNameの外側ですが、このように入力されたパラメータはプラグインレベルのグローバルになり、ページの2番目以降のプラグインの使用に影響します.したがって、一般的には$に定義することができる.fn.PluginNameの内部では、複数の場所でプラグインを使用することができます.
    $を定義します.fn.pluginName.method形式の方法は、プラグイン内の方法を直接露出して外部アクセスを提供することができます.また、$.fn.pluginNameの定義のthisは、セレクタが選択したオブジェクトを指し、$(this)を使わずに直接使用できます.
    いくつかのよく使われる方法の解釈
    前述のArray.prototype.sliceは、配列に似たパラメータを配列に従って切断するために使用され、その数値は戻り値がどこから取られるかを示します.
    prototypeのcallとapplyは意味的に同じであり、第1のパラメータの意味も同じであるが、callの第2のパラメータはパラメータとして伝達され、applyは複数のパラメータを1つの配列に組み合わせて伝達される.A.prototype.method.call(B)かA.prototypeか.method.apply(B)は、いずれもBオブジェクトをAオブジェクトと見なしてmethodを実行することを表す.