jQuery Plugin 3 template

template

;(function(){
    var methods = {
        init: function(settiongs){
            //option初始化設定
            var _defaultSettings = {
                obj1: obj1_default_value,
                obj2: function(){...},
            };

            //覆寫option
            var _settings = $.extend(_defaultSettings, settings);

            //針對每一個選定的DOM物件做事
            return this.each(function() {

            });
        }
        //其他 public function 放這裡
    }
    // 其他 private function 放這裡

    //註冊plugin_name
    $.fn.plugin_name = function(method){
        if ( methods[method] ) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply(this, arguments);
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.plugin_name' );
        }
    };

})(jQuery);

進入點

進入點從以下程式碼開始 trace

$.fn.plugin_name = function(method) {
  if (methods[method]) {
    return methods[method].apply(
      this,
      Array.prototype.slice.call(arguments, 1)
    );
  } else if (typeof method === "object" || !method) {
    return methods.init.apply(this, arguments);
  } else {
    $.error("Method " + method + " does not exist on jQuery.plugin_name");
  }
};

你要先懂

methods[method]
- 其實等同於 methods.method，只是當我們想要以變數型態傳入的時候，無法使用後者
arguments
- 所有參數都會存到這個 array 裡面，arguments[0]…
apply() 和 call()
- 用法可以參考 bind()、call()、apply() 差別
Array.prototype.slice.call( arguments , 1 )
- 這句話的意思就是把調用方法的參數截取出來

function test(a, b, c, d) {
  var arg = Array.prototype.slice.call(arguments, 1);
  alert(arg);
}
test("a", "b", "c", "d");

就可以理解邏輯了

先判斷 methods 是否有 method 這個方法
- true: 執行符合 method 的所有 function
  - apply 的意思是：把 method 的 this 綁定為現在這個 this，並且把參數傳入，並且執行
- false: 跳到 2
再判斷 method 的型態是不是物件或者不存在
- true: 執行 init()
  - apply 的意思是：把 init 的 this 綁定為現在這個 this，並且把參數傳入，並且執行 init
- false: 跳到 3
其他
- 顯示 ‘Method ‘ + method + ‘ does not exist on jQuery.plugin_name’

參考資料

Array.prototype.slice.call()方法详解