jQuery擴展

jq--CDN

jQ -- jQuery源碼解析

一、jQuery.extend() 與 jQuery.fn.extend()
把jQuery當作一個封裝js類 這樣好理解
$.extend是擴展的jQuery這個類 爲jQuery類添加類方法 能夠理解爲靜態方法 只跟這個類自己有關 跟具體的實例化對象是不要緊的。
jQuery.fn.extend() 拓展的是jQuery對象(原型)的方法 得用在jQuery對象上面

區別

二者調用方式不一樣
      jQuery.extend() 由傳入的全局函數來調用 主要是用來拓展全局函數 如$.init() $.ajax();
      jQuery.fn.extend() 由具體的實例對象來調用 能夠用來拓展個選擇器 例如$.fn.each();
二者主要功能做用不一樣
      jQuery.extend(object) 爲擴展jQuery類自己 爲自身添加新的方法
      jQuery.fn.extend(object) 給jQuery對+B187象添加方法
(function($) {
    $.extend({
        speakExtend:function(e) {
            alert("$.extend"+" === "+ e);
        }
    });
    $.fn.extend({
        speakExtend:function(e) {
            // 此處沒有必要將this包在$號中如$(this)，由於this已是一個jQuery對象。
            // $(this)等同於 $($('#element')); 直接使用 this.
            alert("$.fn.extend"+" === "+e);
        }
    })
})(jQuery);
$.speakExtend("靜態方法");
$(".main").speakExtend("對象專屬");

jQ -- 插件封裝

編寫一個jQuery插件就是給jQuery.fn加入​​新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱。
在插件的範圍裏， this關鍵字表明瞭這個插件將要執行的jQuery對象， 這裏容易產生一個廣泛的誤區，由於在其餘包含callback的jQuery函數中，this關鍵字表明瞭原生的DOM元素。誤將this關鍵字無謂的包在jQuery中，

(function ($) {
    $.fn.m​​yPlugin = function () {
        //此處沒有必要將this包在$號中如$(this)，由於this已是一個jQuery對象。
        //$(this)等同於 $($('#element'));
        this.fadeIn('normal', function () {
            //此處callback函數中this關鍵字表明一個DOM元素
        });
    };
})(jQuery);
$('#element').myPlugin();

實現簡單插件

(function ($) {
    $.fn.m​​axHeight = function () {
        var max = 0;
        this.each(function () {
            max = Math.max(max, $(this).height());
        });
        return max;
    };
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

維護Chainability
不少時候，一個插件的意圖僅僅是以某種方式修改收集的元素，並把它們傳遞給鏈中的下一個方法。 這是jQuery的設計之美，是jQuery如此受歡迎的緣由之一。 所以，要保持一個插件的chainability，你必須確保你的插件返回this關鍵字。

(function ($) {
    $.fn.lockDimensions = function (type) {
        return this.each(function () {
            var $this = $(this);
            if (!type || type == 'width') {
                $this.width($this.width());
            }
            if (!type || type == 'height') {
                $this.height($this.height());
            }
        });
    };
})(jQuery);
// 返回 this 後續調用 css()
$('div').lockDimensions('width').css('color', 'red');

默認值和選項
對於比較複雜的和提供了許多選項可定製的的插件，最好有一個當插件被調用的時候能夠被拓展的默認設置(經過使用$.extend)。
在這個例子中，調用tooltip插件時覆寫了默認設置中的location選項，background-color選項保持默認值；

(function ($) {
    $.fn.tooltip = function (options) {
        //建立一些默認值，拓展任何被提供的選項
        var settings = $.extend({
            'location': 'top',
            'background-color': 'blue'
        }, options);
        return this.each(function () {
            // Tooltip插件代碼
        });
    };
})(jQuery);

$('div').tooltip({
    'location': 'left'
});

插件方法
在任何狀況下，一個單獨的插件不該該在jQuery.fn，這是不被鼓勵的，由於$.fn命名空間混亂。
應該收集對象文本中的全部插件的方法，經過傳遞該方法的字符串名稱給插件以調用它們。

(function ($) {
    var methods = {
        init: function (options) {
            // this
        },
        show: function () {
            // is
        },
        hide: function () {
            // good
        },
        update: function (content) {
            // !!!
        }
    };

    $.fn.tooltip = function (method) {
        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 {
            $.error('Method ' + method + ' does not exist on jQuery.tooltip');
        }
    };

})(jQuery);

$('div').tooltip(); // 調用init方法

$('div').tooltip({
    foo: 'bar'
}); // 調用init方法 

$('div').tooltip('hide'); // 調用hide方法

$('div').tooltip('update', 'This is the new tooltip content!'); // 調用Update方法

事件
容許綁定事件命名空間。若是你的插件綁定一個事件，一個很好的作法是賦予此事件命名空間。

具體詳情在下面連接中

數據
一般在插件開發的時候，可能須要記錄或者檢查你的插件是否已經被初始化給了一個元素。 使用jQuery的data方法是一 個很好的基於元素的記錄變量的途徑。

具體詳情在下面連接中

總結和最佳作法

始終包裹在一個封閉的插件：
    (function($) {
    /* plugin goes here */
    })(jQuery);
在插件的功能範圍內不要冗餘包裹this關鍵字
除非插件返回特定值，不然老是返回this關鍵字來維持chainability 。
傳遞一個可拓展的默認對象參數而不是大量的參數給插件。
不要在一個插件中屢次命名不一樣方法。
始終命名空間的方法，事件和數據。

封裝插件--1
封裝插件--2