jquery插件開發_ZenDei技術網路在線

今天周六，玩了一上午lol了，趁等飯點的時間淺談一下jquery插件開發，望大神指教鞭策！在軟體開發過程中需要一定的設計模式來指導開發，有了模式，我們便能更好的組織我們的代碼，並從前人的經驗中學到更好的實踐。根據《jQuery高級編程》中的描述，jQuery插件開發方式重要有三種：通常我們使用第 ...

今天周六，玩了一上午lol了，趁等飯點的時間淺談一下jquery插件開發，望大神指教鞭策！

在軟體開發過程中需要一定的設計模式來指導開發，有了模式，我們便能更好的組織我們的代碼，並從前人的經驗中學到更好的實踐。
根據《jQuery高級編程》中的描述，jQuery插件開發方式重要有三種：

通過$.extend()來擴展jQuery
通過$.fn向jQuery添加新的方法
通過$.widget()應用jQuery UI的部件工廠方式創建（這種方式暫時很少用，估計你們也很少見吧！呵呵……）

　　通常我們使用第二種方法來進行簡單的插件開發，說簡單是相對於第三種方式。第三種方式是用來開發更高級的jQuery部件的，該模式開發出來的部件帶有很多jQuery內建的特性，比如插件的狀態信息自動保存，各種關於插件的方法等，都非常的細緻。
而第一種方法又太簡單，僅僅是在jQuery命名空間或者可以理解在jQuery自身添加一個靜態的方法而已。所以我們在調用通過$.extend()添加的方法時，直接通過$符號調用$.myFunction()而不需要選中DOM元素$().myFunction()。

方式一、$.extend()

//定義插件
    $.extend({
      goTop:function(){
        $('html,body').animate({scrollTop:0}, 500);
      }
    });
//調用
  $('.gotop').click(function(){
    $.goTop();
  });

　　上面的代碼中通過$.extend()方法向jQuery添加了一個goTop方法，然後通過$直接調用。到此已完成了一個簡單的jQuery插件。
　　如你所見，通過此種方法來定義一些輔助類的方法是比較方便的，定義一次後，可以通過jQuery在程式中任何需要的地方調用它。

方式二、$.fn

　　第一種種方法，並不能使用jQuery強大的選擇器，要處理DOM元素以及將開發的插件運用到所選的元素上，還是要使用第二種方法。我所見到和使用的插件大多也是通過$.fn的方式創建的，至少目前是。

　　第二種方式的語法示例：

$.fn.mypluginName = function(){
  //代碼內容 
}

　　往$.fn上面添加一個方法，名字是我們插件的名稱，然後我們的插件代碼在這個方法中展開。
　　比如我們將頁面中某元素背景顏色改為紅色，則寫成：

//定義插件
$.fn.pluginBg = function(){
        this.css('backgroundColor','red'); //在這裡，this指用jQuery選中的元素,即：this = $(element),this用法再此不過多介紹
    }
//調用
$(elment).pluginBg();

　　傳參插件

　　一個強勁的插件是可以讓使用者隨意定製的，這便要求我們在開發插件是考慮的更加全面些，儘量提供合適的參數。在處理插件參數的接收上，通常使用jQuery的extend方法，上面也有提到過，但那是給extend方法傳遞單個對象的情況下，這個對象會合併到jQuery身上，所以我們就可以在jQuery身上調用新合併對象里包含的方法了。當給extend方法傳遞多個對象時，它會將所有參數對象合併到第一個裡。同時，如果對象中存在同名的屬性，合併時後面的會覆蓋前面的。利用這一點，我們可以在插件中定義一個保存插件參數預設值的對象，同時將接收來的參數對象合併到預設對象上，最後就實現了用戶指定了值得參數使用指定值，未指定參數時使用插件的預設值。　　

　　我們舉個例子，允許用戶調用插件的時候設置color，代碼如下：

//定義插件
$.fn.pluginStyle = function(opt){
　　var defaults = {
　　　　'color' : 'red',
　　};
　　var settings = $.extend(defaults,opt);
　　　　return this.css({
　　　　　　'color': settings.color,
　　　　})
}

//不傳參調用，則color設置為預設值red                
$(elm).pluginStyle();
//傳參調用，則color設置為blue
$(elm).pluginStyle({'color':'blue'});

　　到此，插件可以接收和處理參數後，就可以編寫出更靈活的插件了。

面向對象插件

　　問：

　　若要編寫一個複雜的插件，代碼量會很大，如何組織代碼就成了一個需要面臨的問題，沒有一個好的方式來組織代碼，整體感覺會雜亂無章，同時也難以維護，怎麼辦呢？

　　答：

　　我們將插件的所有屬性包裝到一個對象上，用面向對象的思維來進行開發，那麼，一切將迎刃而解！

　　我們將上面的例子美化一下，代碼如下：

//定義Nick對象的構造方法
  var Nick = function(ele, opt){
    this.$element = ele,
      this.defaults = {
        'color': 'red'
      },
      this.options = $.extend(this.defaults,opt);
  }
  //定義對象的方法
  Nick.prototype = {
    handsome:function(){
      return this.$element.css({
        'color': this.options.color
      });
    }
  }
  //在插件中使用對象
  $.fn.myPlugin = function(options){
    //創建實體
    var me = new Nick(this, options);
    //調用其方法
    return me.handsome();
  }

  //不傳參調用，則color設置為預設值red
  $(elm).pluginStyle();
  //傳參調用，則color設置為blue
  $(elm).pluginStyle({'color':'blue'});

　　寫到這裡我感覺已經完美了，但是在吃飯完後準備發佈的時候，看了看--哎呀！好像還有進步空間吖！

匿名函數的用處到了

　　不僅是jQuery插件的開發，我們在寫任何JS代碼的時都應該註意不要污染全局命名空間，因為隨著代碼量的增加，如果有意無意在全局範圍內定義一些變數的話，最後很難維護，也會和別人寫的代碼發生衝突。
　　一個好的做法是始終使用自調用匿名函數包裹你的代碼，這樣就可以完全安全、放心的用到任何地方，絕對不會發生衝突問題。
在Javascript中無法使用花括弧方便的創建作用域，但函數卻可以形成一個作用域，域內的代碼是無法被外界訪問的，如果我們將自己的代碼放入到函數中，那麼就不會污染全局命名空間，同時也不會和別的代碼發生衝突。所以我們將所有代碼用自調用匿名函數包裹。
　　最後的將上面的插件代碼用一個匿名函數包裹起來，大功告成！

　　結束時，還是那句話--望大神指教鞭策我！