ch.7 Extending jQuery with custom plugins
使用自訂擴充的plugin可以讓程式及設計有一致性
而且建立重複使用的設計有很多優點
繼承進而擴充了jQuery裡原本就存在的功能更是可以讓事情變得更簡單
要建立自訂擴充的plugin需要一定的規範及規則
以確保可以與其他plugin甚至是其他js lib正常地運作
Extending jQuery包含了像是Utility functions或是Methods兩種形式
為了避免plugin的檔名與原本已經在使用或是其他人建立的檔名重複
這邊提了三點建議
1.以jquery為開頭(可以避免與不是以jQuery為基礎的其他js檔重複)
2.接著可以寫這個plugin的名字
3.最後以.js結尾
以書中的例子來說
如果要寫一個名為Fred的plugin
其檔名可以命名為jquery.fred.js
另一個有用的方法 可以上jQuery收集plugin的地方找找看
如果看到相同的名字就可以避免重複囉
同樣的避免function名字與別人重複到
也是一樣的方法
jQuery('#myitem').show();
如果是自己在寫jQuery的script時
常常會使用$來代替jQuery的寫法
但是在寫plugin時
則是可以使用jQuery來寫
以避免不確定性(例如同頁面有使用prototype.js)囉
或是如前一章6.2所提的
(function($){
//
// 在這裡使用$
//
})(jQuery);
寫在這裡面時就可以用$囉
在使用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中的預設值
(function($){
//
// 在這裡使用$
//
})(jQuery);
就如同7.2.2講的
如果在plugin中有大量使用到jQuery自己本身的method
可以使用上面這樣的方法
就可以在裡面使用$ 而不受到干擾
這兩小節各別有一個Utility functions類型的自訂擴充練習
要建立wrapper methods是使用$.fn
下面是一個簡單的例子
(function($){
$.fn.makeItBlue = function() {
return this.css('color','blue');
}
})(jQuery);
通常來說 除非是特殊需要
否則return的值仍是該wrapped set
這樣才能繼續在chain中使用這組elements
這兩小節各別有一個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中 講解的例子架構大概是上面這樣(有刪掉部份的東西)
太重要了