jQuery in Action Ch.7 筆記

2009-06-23

ch.7 Extending jQuery with custom plugins

7.1 Why extend?

使用自訂擴充的plugin可以讓程式及設計有一致性
而且建立重複使用的設計有很多優點
繼承進而擴充了jQuery裡原本就存在的功能更是可以讓事情變得更簡單

7.2 The jQuery plugin authoring guidelines

要建立自訂擴充的plugin需要一定的規範及規則
以確保可以與其他plugin甚至是其他js lib正常地運作
Extending jQuery包含了像是Utility functions或是Methods兩種形式

7.2.1 Naming files and functions

為了避免plugin的檔名與原本已經在使用或是其他人建立的檔名重複
這邊提了三點建議
1.以jquery為開頭(可以避免與不是以jQuery為基礎的其他js檔重複)
2.接著可以寫這個plugin的名字
3.最後以.js結尾
以書中的例子來說
如果要寫一個名為Fred的plugin
其檔名可以命名為jquery.fred.js

另一個有用的方法 可以上jQuery收集plugin的地方找找看
如果看到相同的名字就可以避免重複囉

同樣的避免function名字與別人重複到
也是一樣的方法

7.2.2 Beware the $
jQuery('#myitem').show();

如果是自己在寫jQuery的script時
常常會使用$來代替jQuery的寫法
但是在寫plugin時
則是可以使用jQuery來寫
以避免不確定性(例如同頁面有使用prototype.js)囉
或是如前一章6.2所提的

(function($){
//
// 在這裡使用$
//
})(jQuery);

寫在這裡面時就可以用$囉

7.2.3 Taming complex parameter lists

在使用plugin時可能會需要傳入不同的參數來運用
但是有時只需要用預設值就好了

//例如有一個function有7個參數
function complex(p1,p2,p3,p4,p5,p6,p7) {/* ... */}
//
//但有時只需要填入p1或是p7的值來使用
complex(valueA,null,null,null,null,null,valueB);
//
//甚或是這樣
complex(valueA,null,valueC,valueD,null,null,valueB);

這樣會造成傳入及讀取參數的複雜度
所以可以使用下面的方法來取代

complex(valueA, {
  p3: valueC,
  p4: valueD,
  p7: valueB
});

將一定要傳入的參數如同之前一樣的設定置放
而把其他有時候可以省略的參數合併放在一個object中
這樣便不用在意是第幾個參數省略
或是傳入了多少個參數了

在plugin裡要使用參數的時候
可以利用6.3.6講到的$.extend()

function complex(p1,options){
  var settings = $.extend({
    option1: defaultValue1,
    option2: defaultValue2,
    option3: defaultValue3,
    option4: defaultValue4,
    option5: defaultValue5,
    option6: defaultValue6
  },options||{});
  //其他script
}

因為$.extend()裡排在後面的object會把前面的object中有相同的property值蓋過去
所以如果有填入參數 就會使用填入的參數
不然就是使用預設的參數
而有一點要注意的是||{}這個地方
當完全沒有填入參數時
就都使用plugin中的預設值

7.3 Writing custom utility functions
(function($){
//
// 在這裡使用$
//
})(jQuery);

就如同7.2.2講的
如果在plugin中有大量使用到jQuery自己本身的method
可以使用上面這樣的方法
就可以在裡面使用$ 而不受到干擾

7.3.1 Creating a data manipulation utility function
7.3.2 Writing a date formatter

這兩小節各別有一個Utility functions類型的自訂擴充練習

7.4 Adding new wrapper methods

要建立wrapper methods是使用$.fn
下面是一個簡單的例子

(function($){
  $.fn.makeItBlue = function() {
    return this.css('color','blue');
  }
})(jQuery);

通常來說 除非是特殊需要
否則return的值仍是該wrapped set
這樣才能繼續在chain中使用這組elements

7.4.1 Applying multiple operations in a wrapper method
7.4.2 Retaining state within a wrapper method

這兩小節各別有一個wrapper method類型的自訂擴充練習

(function($){
  //將settings定義在這裡 才能讓其他的methods(如下面的showPhoto)使用到
  var settings;
  //主要的plugin
  $.fn.photomatic = function(callerSettings) {
    //如同7.2.3所講的參數用法一樣
    settings = $.extend({
      photoElement: '#photomaticPhoto',
      lastControl: null
    }, callerSettings || {});
    //plugin所執行的功能
    settings.thumbnails = this.filter('img');
    settings.thumbnails.click(function(){ showPhoto(this.index); });
    //如果有需要 可以給一個初始值
    showPhoto(0);
    //返回同樣的wrapped set
    return this;
  };
  //將重複性的功能另外寫一個method
  var showPhoto = function(index) {
    settings.photoElement
      .attr('src',settings.transformer(settings.thumbnails[index].src));
    settings.current = index;
  };
})(jQuery);

在7.4.2中 講解的例子架構大概是上面這樣(有刪掉部份的東西)

Comments

  • zengrong 說:

    太重要了

  • hola 說:

    真是好筆記,真是好東西。

  • 發表迴響

    彙整

    分類