jQuery擴展

hss01248 發(fā)布于2019-08-26 13:35 / 1597人閱讀

摘要：傳遞一個可拓展的默認(rèn)對象參數(shù)而不是大量的參數(shù)給插件。始終命名空間的方法，事件和數(shù)據(jù)。

jq--CDN

jQ -- jQuery源碼解析

1、jQuery.extend() 與 jQuery.fn.extend()
把jQuery看成一個封裝js類這樣好理解
$.extend是擴展的jQuery這個類為jQuery類添加類方法可以理解為靜態(tài)方法只跟這個類本身有關(guān) 跟具體的實例化對象是沒關(guān)系的。
jQuery.fn.extend() 拓展的是jQuery對象(原型)的方法得用在jQuery對象上面

區(qū)別

兩者調(diào)用方式不同
      jQuery.extend() 由傳入的全局函數(shù)來調(diào)用 主要是用來拓展全局函數(shù) 如$.init() $.ajax();
      jQuery.fn.extend() 由具體的實例對象來調(diào)用 可以用來拓展個選擇器 例如$.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已經(jīng)是一個jQuery對象。
            // $(this)等同于 $($("#element")); 直接使用 this.
            alert("$.fn.extend"+" === "+e);
        }
    })
})(jQuery);
$.speakExtend("靜態(tài)方法");
$(".main").speakExtend("對象專屬");

jQ -- 插件封裝

編寫一個jQuery插件就是給jQuery.fn加入??新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱。
在插件的范圍里， this關(guān)鍵字代表了這個插件將要執(zhí)行的jQuery對象，這里容易產(chǎn)生一個普遍的誤區(qū)，因為在其他包含callback的jQuery函數(shù)中，this關(guān)鍵字代表了原生的DOM元素。誤將this關(guān)鍵字無謂的包在jQuery中，

(function ($) {
    $.fn.m??yPlugin = function () {
        //此處沒有必要將this包在$號中如$(this)，因為this已經(jīng)是一個jQuery對象。
        //$(this)等同于 $($("#element"));
        this.fadeIn("normal", function () {
            //此處callback函數(shù)中this關(guān)鍵字代表一個DOM元素
        });
    };
})(jQuery);
$("#element").myPlugin();

實現(xiàn)簡單插件

(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元素的高度

維護(hù)Chainability
很多時候，一個插件的意圖僅僅是以某種方式修改收集的元素，并把它們傳遞給鏈中的下一個方法。這是jQuery的設(shè)計之美，是jQuery如此受歡迎的原因之一。因此，要保持一個插件的chainability，你必須確保你的插件返回this關(guān)鍵字。

(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 后續(xù)調(diào)用 css()
$("div").lockDimensions("width").css("color", "red");

默認(rèn)值和選項
對于比較復(fù)雜的和提供了許多選項可定制的的插件，最好有一個當(dāng)插件被調(diào)用的時候可以被拓展的默認(rèn)設(shè)置(通過使用$.extend)。
在這個例子中，調(diào)用tooltip插件時覆寫了默認(rèn)設(shè)置中的location選項，background-color選項保持默認(rèn)值；

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

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

插件方法
在任何情況下，一個多帶帶的插件不應(yīng)該在jQuery.fn，這是不被鼓勵的，因為$.fn命名空間混亂。
應(yīng)該收集對象文本中的所有插件的方法，通過傳遞該方法的字符串名稱給插件以調(diào)用它們。

(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(); // 調(diào)用init方法

$("div").tooltip({
    foo: "bar"
}); // 調(diào)用init方法 

$("div").tooltip("hide"); // 調(diào)用hide方法

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

事件
允許綁定事件命名空間。如果你的插件綁定一個事件，一個很好的做法是賦予此事件命名空間。

具體詳情在下面鏈接中

數(shù)據(jù)
通常在插件開發(fā)的時候，可能需要記錄或者檢查你的插件是否已經(jīng)被初始化給了一個元素。使用jQuery的data方法是一個很好的基于元素的記錄變量的途徑。

具體詳情在下面鏈接中

總結(jié)和最佳做法

始終包裹在一個封閉的插件：
    (function($) {
    /* plugin goes here */
    })(jQuery);
在插件的功能范圍內(nèi)不要冗余包裹this關(guān)鍵字
除非插件返回特定值，否則總是返回this關(guān)鍵字來維持chainability 。
傳遞一個可拓展的默認(rèn)對象參數(shù)而不是大量的參數(shù)給插件。
不要在一個插件中多次命名不同方法。
始終命名空間的方法，事件和數(shù)據(jù)。

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