jQuery插件開發全解析

原創 zhanglin1314 2018-09-04 19:17
  1. jQuery插件的開發包括兩種：
  2. 一種是類級別的插件開發，即給jQuery添加新的全局函數，相當於給jQuery類本身添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數，另一種是對象級別的插件開發，即給jQuery對象添加方法。下面就兩種函數的開發做詳細的說明。
    1、類級別的插件開發
    類級別的插件開發最直接的理解就是給jQuery類添加類方法，可以理解爲添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類級別的插件開發可以採用如下幾種形式進行擴展：
    1.1 添加一個新的全局函數
    添加一個全局函數，我們只需如下定義：
  3. jQuery.foo = function()
  4. {
  5. alert('This is a test. This is only a test.');
  6. };  


  7.
    1.2 增加多個全局函數
    添加多個全局函數，可採用如下定義：
  8. jQuery.foo = function() {
  9. alert('This is a test. This is only a test.');};jQuery.bar = function(param)
  10. { alert('This function takes a parameter, which is "' + param + '".');
  11. }; 調用時和一個函數的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

    1.3 使用jQuery.extend(object);　
    1. jQuery.extend({   
    2. foo: function() {   
    3. alert('This is a test. This is only a test.');   
    4. },   
    5. bar: function(param) {   
    6. alert('This function takes a parameter, which is "' + param +'".');   
    7. }   
    8. });

    複製代碼
    1.4 使用命名空間
    雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數名和變量名。但是仍然不可避免某些函數或變量名將於其他jQuery插件衝突，因此我們習慣將一些方法封裝到另一個自定義的命名空間。
    1. jQuery.myPlugin = {        
    2. foo:function() {        
    3. alert('This is a test. This is only a test.');        
    4. },        
    5. bar:function(param) {        
    6. alert('This function takes a parameter, which is "' + param + '".');  
    7. }      
    8. };
    9. 採用命名空間的函數仍然是全局函數，調用時採用的方法：
    10. $.myPlugin.foo();      
    11. $.myPlugin.bar('baz');

    複製代碼

    通過這個技巧（使用獨立的插件名），我們可以避免命名空間內函數的衝突。
    2、對象級別的插件開發
    對象級別的插件開發需要如下的兩種形式：、
    形式1：
    1. (function($){   
    2. $.fn.extend({   
    3. pluginName:function(opt,callback){   
    4.           // Our plugin implementation code goes here.     
    5. }   
    6. })   
    7. })(jQuery);   

    形式2：
    1. (function($) {     
    2. $.fn.pluginName = function() {   
    3.      // Our plugin implementation code goes here.   
    4. };   
    5. })(jQuery);   


    上面定義了一個jQuery函數,形參是$，函數定義完成之後,把jQuery這個實參傳遞進去.立即調用執行。這樣的好處是,我們在寫jQuery插件時,也可以使用$這個別名,而不會與prototype引起衝突.
    2.1 在JQuery名稱空間下申明一個名字
    這是一個單一插件的腳本。如果你的腳本中包含多個插件，或者互逆的插件（例如： $.fn.doSomething() 和 $.fn.undoSomething()），那麼你需要聲明多個函數名字。但是，通常當我們編寫一個插件時，力求僅使用一個名字來包含它的所有內容。我們的示例插件命名爲“highlight“   
    1. $.fn.hilight = function() {   
    2.   // Our plugin implementation code goes here.   
    3. };   
    4. 我們的插件通過這樣被調用：  
    5. $('#myDiv').hilight();   


    但是如果我們需要分解我們的實現代碼爲多個函數該怎麼辦？有很多原因：設計上的需要；這樣做更容易或更易讀的實現；而且這樣更符合面向對象。 這真是一個麻煩事，把功能實現分解成多個函數而不增加多餘的命名空間。出於認識到和利用函數是javascript中最基本的類對象，我們可以這樣做。就像其他對象一樣，函數可以被指定爲屬性。因此我們已經聲明“hilight”爲jQuery的屬性對象，任何其他的屬性或者函數我們需要暴露出來的，都可以在"hilight" 函數中被聲明屬性。稍後繼續。
    2.2 接受options參數以控制插件的行爲
    讓我們爲我們的插件添加功能指定前景色和背景色的功能。我們也許會讓選項像一個options對象傳遞給插件函數。例如：  
    1. // plugin definition  
    2. $.fn.hilight = function(options) {  
    3.   var defaults = {  
    4.     foreground: 'red',  
    5.     background: 'yellow'  
    6.   };  
    7.   // Extend our default options with those provided.  
    8.   var opts = $.extend(defaults, options);  
    9.   // Our plugin implementation code goes here.  
    10. };  
    11. 我們的插件可以這樣被調用：
    12. $('#myDiv').hilight({  
    13.   foreground: 'blue'  
    14. });   



    2.3 暴露插件的默認設置
    我們應該對上面代碼的一種改進是暴露插件的默認設置。這對於讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來我們開始利用函數對象。   
    1. // plugin definition  
    2. $.fn.hilight = function(options) {  
    3.   // Extend our default options with those provided.  
    4.   // Note that the first arg to extend is an empty object -  
    5.   // this is to keep from overriding our "defaults" object.  
    6.   var opts = $.extend({}, $.fn.hilight.defaults, options);  
    7.   // Our plugin implementation code goes here.  
    8. };  
    9. // plugin defaults - added as a property on our plugin function  
    10. $.fn.hilight.defaults = {  
    11.   foreground: 'red',  
    12.   background: 'yellow'  
    13. };   
    14. 現在使用者可以包含像這樣的一行在他們的腳本里：
    15. //這個只需要調用一次，且不一定要在ready塊中調用
    16. $.fn.hilight.defaults.foreground = 'blue';  
    17. 接下來我們可以像這樣使用插件的方法，結果它設置藍色的前景色：
    18. $('#myDiv').hilight();



    如你所見，我們允許使用者寫一行代碼在插件的默認前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的默認值：
    // 覆蓋插件缺省的背景顏色  
    $.fn.hilight.defaults.foreground = 'blue';  
    // ...  
    // 使用一個新的缺省設置調用插件  
    $('.hilightDiv').hilight();  
    // ...  
    // 通過傳遞配置參數給插件方法來覆蓋缺省設置  
    $('#green').hilight({  
      foreground: 'green'  
    });   
    2.4 適當的暴露一些函數
    這段將會一步一步對前面那段代碼通過有意思的方法擴展你的插件（同時讓其他人擴展你的插件）。例如，我們插件的實現裏面可以定義一個名叫"format"的函數來格式化高亮文本。我們的插件現在看起來像這樣，默認的format方法的實現部分在hiligth函數下面。
    1. // plugin definition  
    2. $.fn.hilight = function(options) {  
    3.   // iterate and reformat each matched element  
    4.   return this.each(function() {  
    5.     var $this = $(this);  
    6.     // ...  
    7.     var markup = $this.html();  
    8.     // call our format function  
    9.     markup = $.fn.hilight.format(markup);  
    10.     $this.html(markup);  
    11.   });  
    12. };  
    13. // define our format function  
    14. $.fn.hilight.format = function(txt) {  
    15. return '<strong>' + txt + '</strong>';  
    16. };   


    們很容易的支持options對象中的其他的屬性通過允許一個回調函數來覆蓋默認的設置。這是另外一個出色的方法來修改你的插件。這裏展示的技巧是進一步有效的暴露format函數進而讓他能被重新定義。通過這技巧，是其他人能夠傳遞他們自己設置來覆蓋你的插件，換句話說，這樣其他人也能夠爲你的插件寫插件。
          考慮到這個篇文章中我們建立的無用的插件，你也許想知道究竟什麼時候這些會有用。一個真實的例子是Cycle插件.這個Cycle插件是一個滑動顯示插件，他能支持許多內部變換作用到滾動，滑動，漸變消失等。但是實際上，沒有辦法定義也許會應用到滑動變化上每種類型的效果。那是這種擴展性有用的地方。 Cycle插件對使用者暴露"transitions"對象，使他們添加自己變換定義。插件中定義就像這樣：
    $.fn.cycle.transitions = {  
    // ...  
    };  
    這個技巧使其他人能定義和傳遞變換設置到Cycle插件。
    2.5 保持私有函數的私有性
    這種技巧暴露你插件一部分來被覆蓋是非常強大的。但是你需要仔細思考你實現中暴露的部分。一但被暴露，你需要在頭腦中保持任何對於參數或者語義的改動也許會破壞向後的兼容性。一個通理是，如果你不能肯定是否暴露特定的函數，那麼你也許不需要那樣做。
    那麼我們怎麼定義更多的函數而不攪亂命名空間也不暴露實現呢？這就是閉包的功能。爲了演示，我們將會添加另外一個“debug”函數到我們的插件中。這個 debug函數將爲輸出被選中的元素格式到firebug控制檯。爲了創建一個閉包，我們將包裝整個插件定義在一個函數中。
    1. (function($) {  
    2.   // plugin definition  
    3.   $.fn.hilight = function(options) {  
    4.     debug(this);  
    5.     // ...  
    6.   };  
    7.   // private function for debugging  
    8.   function debug($obj) {  
    9.     if (window.console && window.console.log)  
    10.       window.console.log('hilight selection count: ' + $obj.size());  
    11.   };  
    12. //  ...  
    13. })(jQuery);  




    我們的“debug”方法不能從外部閉包進入,因此對於我們的實現是私有的。
    2.6 支持Metadata插件
    在你正在寫的插件的基礎上，添加對Metadata插件的支持能使他更強大。個人來說，我喜歡這個Metadata插件，因爲它讓你使用不多的"markup”覆蓋插件的選項（這非常有用當創建例子時）。而且支持它非常簡單。更新：註釋中有一點優化建議。
    1. $.fn.hilight = function(options) {  
    2.   // ...  
    3.   // build main options before element iteration  
    4.   var opts = $.extend({}, $.fn.hilight.defaults, options);  
    5.   return this.each(function() {  
    6.     var $this = $(this);  
    7.     // build element specific options  
    8.     var o = $.meta ? $.extend({}, opts, $this.data()) : opts;  
    9.     //...   


    這些變動行做了一些事情：它是測試Metadata插件是否被安裝如果它被安裝了，它能擴展我們的options對象通過抽取元數據這行作爲最後一個參數添加到JQuery.extend，那麼它將會覆蓋任何其它選項設置。現在我們能從"markup”處驅動行爲,如果我們選擇了“markup”：
    調用的時候可以這樣寫： jQuery.foo(); 或 $.foo();
    1.   
    2. <div .="hilight { background: 'red', foreground: 'white' }">  
    3.   Have a nice day!  
    4. </div>  
    5. <div .="hilight { foreground: 'orange' }">  
    6.   Have a nice day!  
    7. </div>  
    8. <div .="hilight { background: 'green' }">  
    9.   Have a nice day!  
    10. </div>  
    11. 現在我們能高亮哪些div僅使用一行腳本：
    12. $('.hilight').hilight();   



    2.7 整合
    下面使我們的例子完成後的代碼：
    1. // 創建一個閉包  
    2. (function($) {  
    3.   // 插件的定義  
    4.   $.fn.hilight = function(options) {  
    5.     debug(this);  
    6.     // build main options before element iteration  
    7.     var opts = $.extend({}, $.fn.hilight.defaults, options);  
    8.     // iterate and reformat each matched element  
    9.     return this.each(function() {  
    10.       $this = $(this);  
    11.       // build element specific options  
    12.       var o = $.meta ? $.extend({}, opts, $this.data()) : opts;  
    13.       // update element styles  
    14.       $this.css({  
    15.         backgroundColor: o.background,  
    16.         color: o.foreground  
    17.       });  
    18.       var markup = $this.html();  
    19.       // call our format function  
    20.       markup = $.fn.hilight.format(markup);  
    21.       $this.html(markup);  
    22.     });  
    23.   };  
    24.   // 私有函數：debugging  
    25.   function debug($obj) {  
    26.     if (window.console && window.console.log)  
    27.       window.console.log('hilight selection count: ' + $obj.size());  
    28.   };  
    29.   // 定義暴露format函數  
    30.   $.fn.hilight.format = function(txt) {  
    31.     return '<strong>' + txt + '</strong>';  
    32.   };  
    33.   // 插件的defaults  
    34.   $.fn.hilight.defaults = {  
    35.     foreground: 'red',  
    36.     background: 'yellow'  
    37.   };  
    38. // 閉包結束  
    39. })(jQuery);   



    這段設計已經讓我創建了強大符合規範的插件。我希望它能讓你也能做到。
    3、總結
    jQuery爲開發插件提拱了兩個方法，分別是：
    jQuery.fn.extend(object);  給jQuery對象添加方法。
    jQuery.extend(object);  爲擴展jQuery類本身.爲類添加新的方法。
    3.1 jQuery.fn.extend(object);
    fn 是什麼東西呢。查看jQuery代碼，就不難發現。
    jQuery.fn = jQuery.prototype = {   
    init: function( selector, context ) {//....　   
    //......   
    };   
    原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。雖然 javascript　沒有明確的類的概念，但是用類來理解它，會更方便。jQuery便是一個封裝得非常好的類，比如我們用 語句　$("#btn1") 會生成一個 jQuery類的實例。
    jQuery.fn.extend(object); 對jQuery.prototype進得擴展，就是爲jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”。
    比如我們要開發一個插件，做一個特殊的編輯框，當它被點擊時，便alert 當前編輯框裏的內容。可以這麼做：
    $.fn.extend({         
         alertWhileClick:function(){        
             $(this).click(function(){      
                  alert($(this).val());        
              });        
          }        
    });   
    $("#input1").alertWhileClick(); //頁面上爲：
    $("#input1")　爲一個jQuery實例，當它調用成員方法 alertWhileClick後，便實現了擴展，每次被點擊時它會先彈出目前編輯裏的內容。
    3.2 jQuery.extend(object);　
    爲jQuery類添加添加類方法，可以理解爲添加靜態方法。如：
    $.extend({   
        add:function(a,b){return a+b;}   
    });   
    便爲　jQuery　添加一個爲 add　的　“靜態方法”，之後便可以在引入 jQuery　的地方，使用這個方法了，$.add(3,4); //return 7


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章