jquery插件開發

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

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

1. 經過$.extend()來擴展jQuery
2. 經過$.fn向jQuery添加新的方法
3. 經過$.widget()應用jQuery UI的部件工廠方式建立（這種方式暫時不多用，估計大家也不多見吧！呵呵……）

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

方式1、$.extend()

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

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

 

 

方式2、$.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中沒法使用花括號方便的建立做用域，但函數卻能夠造成一個做用域，域內的代碼是沒法被外界訪問的，若是咱們將本身的代碼放入到函數中，那麼就不會污染全局命名空間，同時也不會和別的代碼發生衝突。因此咱們將全部代碼用自調用匿名函數包裹。
　　最後的將上面的插件代碼用一個匿名函數包裹起來，大功告成！

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

 補充 $.extend()

　　這裏多謝某童鞋的提醒！說方式一還還可用於合併參數和深clone，雖然方式二中用了方式一作參數合併，但並未詳細介紹，因此今天在此處作點補充！

附補充連接：

http://www.cnblogs.com/puyongsong/p/5992362.html