jQuery擴(kuò)展

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

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

jq--CDN

jQ -- jQuery源碼解析

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

區(qū)別

兩者調(diào)用方式不同
      jQuery.extend() 由傳入的全局函數(shù)來(lái)調(diào)用 主要是用來(lái)拓展全局函數(shù) 如$.init() $.ajax();
      jQuery.fn.extend() 由具體的實(shí)例對(duì)象來(lái)調(diào)用 可以用來(lái)拓展個(gè)選擇器 例如$.fn.each();
兩者主要功能作用不同
      jQuery.extend(object) 為擴(kuò)展jQuery類本身 為自身添加新的方法
      jQuery.fn.extend(object) 給jQuery對(duì)+B187象添加方法
(function($) {
    $.extend({
        speakExtend:function(e) {
            alert("$.extend"+" === "+ e);
        }
    });
    $.fn.extend({
        speakExtend:function(e) {
            // 此處沒有必要將this包在$號(hào)中如$(this)，因?yàn)閠his已經(jīng)是一個(gè)jQuery對(duì)象。
            // $(this)等同于 $($("#element")); 直接使用 this.
            alert("$.fn.extend"+" === "+e);
        }
    })
})(jQuery);
$.speakExtend("靜態(tài)方法");
$(".main").speakExtend("對(duì)象專屬");

jQ -- 插件封裝

編寫一個(gè)jQuery插件就是給jQuery.fn加入??新的功能屬性，此處添加的對(duì)象屬性的名稱就是你插件的名稱。
在插件的范圍里， this關(guān)鍵字代表了這個(gè)插件將要執(zhí)行的jQuery對(duì)象，這里容易產(chǎn)生一個(gè)普遍的誤區(qū)，因?yàn)樵谄渌琧allback的jQuery函數(shù)中，this關(guān)鍵字代表了原生的DOM元素。誤將this關(guān)鍵字無(wú)謂的包在jQuery中，

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

實(shí)現(xiàn)簡(jiǎ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
很多時(shí)候，一個(gè)插件的意圖僅僅是以某種方式修改收集的元素，并把它們傳遞給鏈中的下一個(gè)方法。這是jQuery的設(shè)計(jì)之美，是jQuery如此受歡迎的原因之一。因此，要保持一個(gè)插件的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)值和選項(xiàng)
對(duì)于比較復(fù)雜的和提供了許多選項(xiàng)可定制的的插件，最好有一個(gè)當(dāng)插件被調(diào)用的時(shí)候可以被拓展的默認(rèn)設(shè)置(通過使用$.extend)。
在這個(gè)例子中，調(diào)用tooltip插件時(shí)覆寫了默認(rèn)設(shè)置中的location選項(xiàng)，background-color選項(xiàng)保持默認(rèn)值；

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

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

插件方法
在任何情況下，一個(gè)多帶帶的插件不應(yīng)該在jQuery.fn，這是不被鼓勵(lì)的，因?yàn)?.fn命名空間混亂。
應(yīng)該收集對(duì)象文本中的所有插件的方法，通過傳遞該方法的字符串名稱給插件以調(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方法

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

具體詳情在下面鏈接中

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

具體詳情在下面鏈接中

總結(jié)和最佳做法

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

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

GPU云服務(wù)器云服務(wù)器行為擴(kuò)展服務(wù)擴(kuò)展工程擴(kuò)展功能擴(kuò)展

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109106.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

hss01248

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

計(jì)算機(jī)畢業(yè)設(shè)計(jì)大學(xué)英語(yǔ)閱讀大賽管理系統(tǒng)【ssm+vue前后端分離】代碼講解安裝調(diào)試

閱讀 1948·2021-11-24 09:39
ftp主機(jī)名怎么查-FTP主機(jī)名要填什么？

閱讀 3327·2021-09-22 14:58
CSS圖片廊

閱讀 1181·2019-08-30 15:54
幾種有效的清除浮動(dòng)的方法

閱讀 3332·2019-08-29 11:33
Vue 組件間通信方式

閱讀 1801·2019-08-26 13:54
jQuery擴(kuò)展

閱讀 1612·2019-08-26 13:35
Vue多環(huán)境代理配置

閱讀 2481·2019-08-23 18:14
手摸手教你用 js 寫一個(gè) js 解釋器

閱讀 778·2019-08-23 17:04

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

jQuery擴(kuò)展

相關(guān)文章

jQuery源碼分析3-jQuery對(duì)象的擴(kuò)展--extend

**前端基礎(chǔ)進(jìn)階（十一）：詳細(xì)圖解jQuery對(duì)象，以及如何擴(kuò)展jQuery插件**

**手把手教你JQuery插件的寫法和規(guī)范**

jQuery源碼分析-整體架構(gòu)（轉(zhuǎn)）

**初步學(xué)習(xí) jQuery 核心 API**

發(fā)表評(píng)論

0條評(píng)論

hss01248

男|高級(jí)講師

TA的文章

計(jì)算機(jī)畢業(yè)設(shè)計(jì)大學(xué)英語(yǔ)閱讀大賽管理系統(tǒng)【ssm+vue前后端分離】代碼講解安裝調(diào)試

ftp主機(jī)名怎么查-FTP主機(jī)名要填什么？

CSS圖片廊

幾種有效的清除浮動(dòng)的方法

Vue 組件間通信方式