jQuery插件開發總結

jQuery插件開發兩個底層方法

jQuery.extend([deep ], target [, object1 ] [, objectN ] )

將兩個或更多對象的內容合併到第一個對象。

• deep 若是是true，合併成爲遞歸（又叫作深拷貝）
• target 一個對象，若是附加的對象被傳遞給這個方法將那麼它將接收新的屬性，若是它是惟一的參數則將擴展jQuery的命名空間，這對於插件開發者但願向 jQuery 中添加新函數時是頗有用的。
• object1 一個對象，它包含額外的屬性合併到第一個參數
• 包含額外的屬性合併到第一個參數

當咱們提供兩個或多個對象給$.extend()，對象的全部屬性都添加到目標對象（target參數）
目標對象（第一個參數）將被修改，而且將經過$.extend()返回。然而，若是咱們想保留原對象，咱們能夠經過傳遞一個空對象做爲目標對象：
var settings = $.extend({}, defaults, options);
在默認狀況下，經過$.extend()合併操做是不遞歸的;

var object1 = {apple: 0,banana: {weight: 52, price: 100},cherry: 97};
var object2 = {banana: {price: 200},durian: 100};
$.extend(object1, object2);
//{apple: 0, banana: {price:200}, cherry: 97, durian: 100}
$.extend(true, object1, object2);
//{apple: 0, banana: {weight: 52, price:200}, cherry: 97, durian: 100}

jQuery.fn.extend()

在jQuery源碼中有jQuery.fn = jQuery.prototype = function(){……}即指向jQuery對象的原型鏈，對其它進行的擴展，做用在jQuery對象上面；

總結

1. jQuery.extend()可以建立全局函數或選擇器，在實際開發中常使用jQuery.extend()方法做爲插件方法傳遞系列選項結構的參數
2. jQuery.fn.extend()可以建立jQuery對象方法，通常用此方法來擴展jQuery的對象插件

jQuery插件開發通用框架

;(function($, window, document, undefined){
    //Plugin code here
})(jQuery, window, document);

使用分號是爲了防止因前面的代碼沒有使用分號而致使插件函數不能正確解析
傳入jQuery是爲了確保在匿名函數中正確的使用jQuery對象，防止多庫共存時$衝突
傳入window、document並不是必須，只不過爲了更快的訪問window和document
傳入undefined是爲了防止undefined變量被更改，確保undefined的準確性

jQuery插件開發的3種形式

一、類級別開發(封裝全局函數的插件)
類級別寫法：

//方式1
;(function($, window, document, undefined){
    $.pluginName = function(){
        //Plugin implementation code here
    };  
})(jQuery, window, document);
//方式2 當全局函數較多時
;(function($, window, document, undefined){
    $.extend({
        pluginName = function(){
            //Plugin code here
        };  
    })
})(jQuery, window, document);

調用方法：$.pluginName();

二、對象級別的插件開發
對象級別插件寫法：

//方式1
;(function($, window, document, undefined){
    $.fn.pluginName = function(options) {
        return this.each(function() {  
        //this關鍵字表明瞭這個插件將要執行的jQuery對象
        //return this.each()使得插件可以造成鏈式調用
            var defaults = {
                //pro : value
            };
            var settings = $.extend({}, defaults, options);
            // plugin implementationcode here
        });
    }
})(jQuery, window, document);
//方式2
;(function($, window, document, undefined){
    $.fn.extend({
        pluginName : function(){
            return this.each(function(){
                // plugin code here
            });
        };
    })
})(jQuery, window, document);
//方式3 這種類型的插件架構容許您封裝全部的方法在父包中，經過傳遞該方法的字符串名稱和額外的此方法須要的參數來調用它們。
;(function($, window, document, undefined){
        // 在咱們插件容器內，創造一個公共變量來構建一個私有方法  
        var privateFunction = function() {  
            // code here  
        }  
        // 經過字面量創造一個對象，存儲咱們須要的公有方法  
        var methods = {  
            // 在字面量對象中定義每一個單獨的方法  
            init: function() {  
                // 爲了更好的靈活性，對來自主函數，並進入每一個方法中的選擇器其中的每一個單獨的元素都執行代碼  
                return this.each(function() {  
                    // 爲每一個獨立的元素建立一個jQuery對象  
                    var $this = $(this);  
                    // 建立一個默認設置對象  
                    var defaults = {  
                        propertyName: 'value',  
                        onSomeEvent: function() {}  
                    }  
           
                    // 使用extend方法從options和defaults對象中構造出一個settings對象  
                    var settings = $.extend({}, defaults, options);  
                    // 執行代碼  
                    // 例如： privateFunction();  
                });  
            },  
            destroy: function() {  
                // 對選擇器每一個元素都執行方法  
                return this.each(function() {  
                    // 執行代碼  
                });  
            }  
        };  
        $.fn.pluginName = function() {  
            // 獲取咱們的方法，遺憾的是，若是咱們用function(method){}來實現，這樣會毀掉一切的  
            var method = arguments[0];  
            // 檢驗方法是否存在  
            if(methods[method]) {  
                // 若是方法存在，存儲起來以便使用  
                // 注意：我這樣作是爲了等下更方便地使用each（）  
                method = methods[method];  
       
            // 若是方法不存在，檢驗對象是否爲一個對象（JSON對象）或者method方法沒有被傳入  
            } else if( typeof(method) == 'object' || !method ) {  
       
                // 若是咱們傳入的是一個對象參數，或者根本沒有參數，init方法會被調用  
                method = methods.init;  
            } else {  
                // 若是方法不存在或者參數沒傳入，則報出錯誤。須要調用的方法沒有被正確調用  
                $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );  
                return this;  
            }  
       
            // 調用咱們選中的方法  
            // 再一次注意咱們是如何將each（）從這裏轉移到每一個單獨的方法上的  
            return method.call(this);  
        }  
})(jQuery, window, document);
//方式4 面向對象的插件開發 將原型和構造函數組合使用，使得經過構造函數建立的每一個實例都能繼承相關屬性與方法
;(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);

調用方法：$.fn.pluginName();

三、經過$.widget()應用jQuery UI的部件工廠方式建立
用來開發更高級jQuery部件的，該模式開發出來的部件帶有不少jQuery內建的特性，好比插件的狀態信息自動保存，各類關於插件的經常使用方法等

編寫JQuery插件須要注意的地方：

1. 插件的推薦命名方法爲：jquery.[插件名].js
2. 全部的對象方法都應當附加到JQuery.fn對象上面，而全部的全局函數都應當附加到JQuery對象自己上。
3. 能夠經過this.each() 來遍歷全部的元素
4. 在jQuery開發中，this關鍵詞一般引用的是當前正在操做的DOM元素，但在當前的jQuery插件上下文中，this關鍵詞引用的是當前jQuery實例自身，惟一的例外是在當前jQuery集合中遍歷全部元素時，$.each循環體內的this引用的是這一輪遍歷所暴露的DOM元素
5. 全部方法或函數插件，都應當以分號結尾，不然壓縮的時候可能會出現問題。爲了更加保險寫，能夠在插件頭部添加一個分號（；），以避免他們的不規範代碼給插件帶來 影響。
6. 插件應該返回一個JQuery對象，以便保證插件的可鏈式操做。