來源於:https://github.com/woodens/
jQuery插件開發方式主要有三種：
-
通過$.extend()來擴展jQuery
-
通過$.fn 向jQuery添加新的方法
-
通過$.widget()應用jQuery UI的部件工廠方式創建
第一種方式太簡單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而已，所以我們調用通過$.extend()添加的函數時直接通過$符號調用（$.myfunction()）而不需要選中DOM元素($('#example').myfunction())，這種方式無法利用jQuery強大的選擇器帶來的便利，要處理DOM元素以及將插件更好地運用於所選擇的元素身上，還是需要使用第二種開發方式
通常我們使用第二種方法來進行簡單插件開發，說簡單是相對於第三種方式。第三種方式是用來開發更高級jQuery部件的，該模式開發出來的部件帶有很多jQuery內建的特性，比如插件的狀態信息自動保存，各種關於插件的常用方法等
請按照以下的方式（安全結構良好的代碼）編寫插件
;(function($,window,document,undefined){ //我們的代碼。。 //blah blah blah... })(jQuery,window,document);
例：
;(function($, window, document,undefined) { //定義Beautifier的構造函數 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration': 'none' }, this.options = $.extend({}, this.defaults, opt) } //定義Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } } //在插件中使用Beautifier對象 $.fn.myPlugin = function(options) { //創建Beautifier的實體 var beautifier = new Beautifier(this, options); //調用其方法 return beautifier.beautify(); } })(jQuery, window, document);
編寫中的注意事項：
- 在代碼開頭加一個分號
用來充當自調用匿名函數的第一對括號容易與別人定義的函數相連，中間沒有分號造成我們的代碼無法正常解析進而報錯,所以好的做法是我們在代碼開頭加一個分號，這在任何時候都是一個好的習慣 - 將系統變量以參數形式傳遞到插件內部可以提高訪問速度
至於這個undefined，稍微有意思一點，為了得到沒有被修改的undefined，我們並沒有傳遞這個參數，但卻在接收時接收了它，因為實際並沒有傳，所以‘undefined’那個位置接收到的就是真實的'undefined'了 - 命名規范
- a:變量及函數命名 一般使用駝峰命名法（CamelCase）
- b:在JavaScript中多用單引號
- 插件開發請使用面向對象思維
因為如果不這樣，你可能需要一個方法的時候就去定義一個function，當需要另外一個方法的時候，再去隨便定義一個function，同樣，需要一個變量的時候，毫無規則地定義一些散落在代碼各處的變量 - 保護好默認參數
- 示例代碼a
var defaults = { 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options);- 示例代碼b
示例代碼a中調用extend時會將defaults的值改變，這樣不好，因為它作為插件因有的一些東西應該維持原樣，另外就是如果你在后續代碼中還要使用這些默認值的話，當你再次訪問它時它已經被用戶傳進來的參數更改了var defaults = { 'color': 'red', 'fontSize': '12px' }; var settings = $.extend({},defaults, options);//將一個空對象做為第一個參數
示例代碼b中將一個新的空對象做為$.extend的第一個參數，defaults和用戶傳遞的參數對象緊隨其后，這樣做的好處是所有值被合並到這個空對象上，保護了插件里面的默認值 - 讓插件接收參數
一個強勁的插件是可以讓使用者隨意定制的，這要求我們提供在編寫插件時就要考慮得全面些，盡量提供合適的參數 - 支持鏈式調用
要讓插件不打破jQuery支持鏈式調用的特性（選擇好DOM元素后可以不斷地調用其他方法），只需return一下即可