close

我們在使用jQuery ui plugin 時，總是能夠享受到其中許多便利性：plugin 快速並且簡單明瞭的對選擇出來的區塊進行改造與操作

一個強大、功能完善的plugin 應該具備下列幾項要點

1. 可以靠傳入的參數來改變plugin 的形式，做客製化的調整

2. 提供plugin 相關的method，來對plugin 做操作

3. 清楚的API

要達成以上條件，就可以模仿jQuery ui 做出專業等級的plugin 了

要如何實現這樣的plugin 呢？ 以下是樣板，所有的plugin 都可以複製下面這個樣板來開始

(function( $ ){
    $.fn.myPlugin = function(methodOrOptions) {

        var _arguments = arguments;
        return this.each(function() {
            var defaultOptionsSetting = {
                 'prop1':1,
                 'prop2':2,
                 'prop3':3,
            };

            var methods = {
                'init' : function(options) {
                     
                     // plugin的初始化
                },
                'func1' : function( ) {  },
                'func2' : function( ) {  },
                'func3' : function( content1, content2 ) {  }
            };
           

            if ( methods[methodOrOptions] ) {
                return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( _arguments, 1 ));
            } elseif ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
                return methods.init.apply( $(this), _arguments);
            } else {
                 $.error( ' myPlugin 不存在此方法：' +  methodOrOptions );
            }
        });
    }

})( jQuery );

以上只是一個通用的樣板，應該足以適用於大部分的plugin需求

但是為了要應變各種狀況，還是要學習程式運作的邏輯，接下來就來解析一下這個樣板

最外層的匿名 function

  (function( $ ){ ... })( jQuery );

這一段的語法，是從javascript的匿名函式來的，原型是這樣的

  (function( arg ){
      ... 
  })( param );

邏輯是：匿名函式 function( arg ){} 建立之後，直接傳入參數 param 來執行這個函式

例如

  (function( b ){
     alert(b);
  })("a");

執行會顯示字串 a

為什麼要做這層包裝，主要原因是為了要隔離其他plugin 之間的影響，因為包在函式內，裡面的變數就會是區域變數

第二層 $.fn.myPlugin

這是jQuery 設計的建立plugin 方式，應該不需要特別做說明

"myPlugin" 名稱是自訂的，在這裡取一個好記的plugin 名稱吧

第二層內與第三層的arguments

arguments 是javascript的一個保留字，在函式內，所有被傳入的參數，都會放在arguments這個陣列當中

即使function 宣告時並沒有宣告參數，或是只宣告了部分參數，所有被傳入的參數一樣都可以從arguments 中取得

但是因為接下來還要再包一層each function，這層的arguments 跟下一層的arguments 會不同，因此要先把這層的arguments另存起來

這樣下一層的區域也可以使用到正確的arguments 了

  var _arguments = arguments;

第三層 this.each()

因為plugin 在套用時，可能會因為選擇器選擇到了多個jQuery 物件，所以要套用到每一個物件上，使用each 來達成這個目的

each() 裡面的function 做的事情，會在每一個選擇到的jQuery 物件上，都做一次

也就是說，plugin 效果會套用在每一個選擇到的物件上

如果沒有用each，則只會套用在第一個選擇到的物件上而已

第三層內 defaultOptionsSetting 和 methods

這兩個物件是使用JSON格式來把各個預設參數、method 寫在plugin 裡面，提供之後調用

預設參數在plugin 被建立時，要跟使用者自訂的參數做$.extend

第三層內 defaultOptionsSetting 和 methods

這裡的判斷式，是為了要分辨傳入的參數是物件還是字串

如果傳入參數是物件或空值，則執行init (初始化)method

如果傳入參數是字串，則執行對應的method 並且傳入參數

為了要讓執行對應method 時，還可以傳入參數，這裡用到了一點小技巧

在plugin 要執行method 時，是這樣寫的：element.myPlugin("methodName", param1, param2, ...);

第一個參數是指定的method名稱，後面接的是傳入的參數

因此，plugin本身接收到的arguments 取第一個來辨別要執行哪一個method之後，就把arguments 的第一個參數給去除，再丟給該method來執行

  methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( _arguments, 1 )); 

methods[ methodOrOptions ]：從methods 物件中，選出指定的method

apply(arg1, arg2)：這個method 可以把前面method 的this 改成指定的物件，然後執行該method

其實這樣寫結果也是一樣的 methods[ methodOrOptions ] ( Array.prototype.slice.call( _arguments, 1 ));

因為 apply(this, ... ) 裡面的this 就跟外面的this 沒有兩樣，寫上apply，應該只是讓閱讀上更加方便，並且確保methods[ methodOrOptions ] 是一個method物件

Array.prototype.slice.call( _arguments, 1 )：這裡就是把_arguments陣列的第一個給去掉，留下剩下的參數

 

到這裡，plugin 樣板的解釋大概就結束了

剩下的就是撰寫各種不同的功能

 

注：此文章尚未編修完成

 

arrow
arrow
    全站熱搜

    yaya741228 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄