Post

jQuery Plugin 3 template

template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
;(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
1
2
3
4
5
6
7
8
9
10
11
12
$.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()
  • Array.prototype.slice.call( arguments , 1 )
    • 這句話的意思就是把調用方法的參數截取出來
1
2
3
4
5
function test(a, b, c, d) {
  var arg = Array.prototype.slice.call(arguments, 1);
  alert(arg);
}
test("a", "b", "c", "d");

就可以理解邏輯了

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

參考資料

This post is licensed under CC BY 4.0 by the author.