jQuery 外掛程式開發解析

標籤：style   blog   class   code   java   tar   

那麼首先我們來簡單的看一下最正統的 jQuery 外掛程式定義方式：

?

1 2 3 4 5 6 7 8 9 10 11 12

(function ($) {     $.fn.外掛程式名 = function (settings) {         //預設參數         var defaultSettings = {           }         /* 合并預設參數和使用者自訂參數 */           settings = $.extend(defaultSettings, settings);   return this.each(function () {             //代碼         });   //外掛程式在元素內多次出現   } })(jQuery);

 

 

先來看模板中的第一行代碼（當然我們要把這一行代碼的後半部分給揪出來一起看，不然第一行就完全無意義了）：

?

1 2 3

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

 這行代碼其實是用於建立一個匿名函數。如果你對匿名函數和閉包不瞭解，將會對這種代碼非常疑惑，那麼強烈建議您閱讀JavaScript中的匿名函數及函數的閉包這篇文章。

jQuery 的繼承方法 $.extend —— $.extend 在jQuery 外掛程式開發中有個很重要的作用，就是用於合并參數。

?

1 2 3 4 5 6 7 8 9

$.fn.tip = function (settings) {     var defaultSettings = {            //顏色     color: ‘yellow‘,        //延遲        timeout: 200     }  /* 合并預設參數和使用者自訂參數 */    settings = $.extend(defaultSettings, settings);    alert(settings.input); <br>}

 

 jQuery 外掛程式定義第二種方式：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

(function ($) {     //外掛程式定義--更換名字     $.fn.tabpanel = function (method) {         var methods = $.fn.tabpanel.methods;         if (methods[method]) {             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));         } else if (typeof method === ‘object‘ || !method) {             return methods.init.apply(this, arguments);         } else {           }     }     //支援的方法     $.fn.tabpanel.methods =     {         //初始化         init: function (p_options) {             tabpanelBind(p_options, this);         },         add: function (p_options) {             addTab(p_options, this);             tabpanelBind(p_options, this);             // debugger         }    }     function add(p_options) {         var _defaults = {             id: ""         }     <br>　　　　//內部實現略.........<br>        return _index;     } <br>})(jQuery);<br><br>調用  $("#team").tabpanel(‘add‘,"");