jQuery: Head First Into Plugin Development

30 Days to Learn jQuery真的是很不錯的基礎課程。 最近常被問到有沒有寫過jQuery的plugin，有興趣的人特別要看看Head First Into Plugin Development這集，在這裡簡單地整理出影片中的一些要點： 1. 利用self invoking function包覆plugin的code去確保$符號表示jQuery：

1
2
3

(function ($, window, document, undefined) {
    // code here...
})(jQuery, window, document);

2. 利用$.fn._pluginName去新增jQuery的plugin方法供使用者呼叫。 3. 讓options可以更有彈性地被使用者呼叫，範例這裡是把options作為plugin的property去實現：$.fn._pluginName.options 4. plugin最後要記得返回jQuery的object作為之後chaining使用。 5. catch this，避免在之後使用時this被指為呼叫方法的物件誤用（範例是把this指給名為self的變數） 6. 利用Object.create去生成物件的instance（function的話直接使用new就可以了，範例把plugin主要的code包在Object裡），注意並不是所有瀏覽器都支援Object.create的寫法，可以加上這段code確保執行沒有問題：

1
2
3
4
5
6
7

if ( typeof Object.create !== 'function' ) {
    Object.create = function( obj ) {
        function F() {};
        F.prototype = obj;
        return new F();
    };
}
7. 利用$.extend去覆寫options的預設值（盡量把可設定的變數都寫在$.fn._pluginName.options裡，沒有預設值的就設成null無妨，主要是之後維護時可以一目瞭然有哪些變數可供設定） 8. 一個方法只做一件事可以確保程式容易被測試和維護。