本文小編為大家詳細(xì)介紹“jQuery插件開發(fā)模式有哪些及怎么實(shí)現(xiàn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jQuery插件開發(fā)模式有哪些及怎么實(shí)現(xiàn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的六枝網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

jQuery插件開發(fā)模式

軟件開發(fā)過程中是需要一定的設(shè)計(jì)模式來指導(dǎo)開發(fā)的，有了模式，我們就能更好地組織我們的代碼，并且從這些前人總結(jié)出來的模式中學(xué)到很多好的實(shí)踐。

jQuery插件開發(fā)方式主要有三種：

1. 通過$.extend()來擴(kuò)展jQuery

2. 通過$.fn 向jQuery添加新的方法

3. 通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建

通常我們使用第二種方法來進(jìn)行簡單插件開發(fā)，說簡單是相對于第三種方式。第三種方式是用來開發(fā)更高級jQuery部件的，該模式開發(fā)出來的部件帶有很多jQuery內(nèi)建的特性，比如插件的狀態(tài)信息自動(dòng)保存，各種關(guān)于插件的常用方法等。而第一種方式又太簡單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個(gè)靜態(tài)方法而已。所以我們調(diào)用通過$.extend()添加的函數(shù)時(shí)直接通過$符號調(diào)用（$.myfunction()）而不需要選中DOM元素

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //調(diào)用
$.sayHello('Wayou'); //帶參調(diào)用

 上面代碼中，通過$.extend()向jQuery添加了一個(gè)sayHello函數(shù)，然后通過$直接調(diào)用。到此你可以認(rèn)為我們已經(jīng)完成了一個(gè)簡單的jQuery插件了。

 但是這種方式無法利用jquery 強(qiáng)大的選擇器帶來的便利，要處理DOM元素以及將插件更好的運(yùn)用于所選擇的元素上，還需要使用第二種開發(fā)方式。

插件開發(fā)

 基本格式：

$.fn.pluginName = function() {
    //your code goes here

往 $.fn 上面添加一個(gè)方法，名字是我們的插件名稱。然后 插件代碼在這個(gè)方法里面展開。

例：

<ul>
    <li>
        <a href="http://www.webo.com/liuwayong">我的微博</a>
    </li>
    <li>
    </li>
    <li>
        <a href="http://wayouliu.duapp.com/">我的小站</a>
    </li>
</ul>
<p>這是p標(biāo)簽不是a標(biāo)簽，我不會(huì)受影響</p>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.myplugin.js"></script>
<script type="text/javascript">
    $(function(){
        $('a').myPlugin();
    })
</script>

而 jquery.myplugin.js 為我們自定義的插件，內(nèi)容如下：

$.fn.myPlugin = function() {
    //在這里面,this指的是用jQuery選中的元素
　　this.css('color', 'red');
}

有的時(shí)候，當(dāng)一個(gè)頁面可能會(huì)引用多個(gè)插件的時(shí)候，為了保證插件的正確，我們可以在我們的插件起始加一個(gè) ; 來表示上一個(gè)插件結(jié)束，開始新的插件

調(diào)用插件的方法 $('a').myPlugin() 相當(dāng)于 $('a').css('color','red'); 即把所有的a標(biāo)簽轉(zhuǎn)為紅色

插件里面的this 指代jquery 選擇器返回的集合，而通過調(diào)用 jQuery 的.each() 方法可以處理合集中 的每個(gè)元素了。在each 方法內(nèi)部，this指代的時(shí)候普通的DOM 元素，所以需要用$包裝，如$(this) 

$.fn.myPlugin = function() {
    //在這里面,this指的是用jQuery選中的元素
    this.css('color', 'red');
    this.each(function() {
        //對每個(gè)元素進(jìn)行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

上面的插件意思：把所有的鏈接轉(zhuǎn)為紅色，并且將每個(gè)鏈接顯示真實(shí)的鏈接地址

jquery有一個(gè)特性就是 支持鏈?zhǔn)秸{(diào)用，選擇好的DOM元素后可以不斷的調(diào)用其他方法，要不打破這種鏈?zhǔn)秸{(diào)用，需要把最后的值 return 一下

而一個(gè)好的插件是可以讓使用者隨意定制的，所以需要在編寫插件是要考慮的全面一些，盡量提供合適的參數(shù)。比如，我們可以讓用戶定義顯示什么顏色。需要讓使用者在調(diào)用的時(shí)候傳入一個(gè)參數(shù)，我們在插件代碼里面接受即可。為了靈活，使用者可以不傳遞參數(shù)，插件里面采用默認(rèn)值。為了保護(hù)好默認(rèn)參數(shù)，所以第一個(gè)值使用新的空對象{}

$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend({},defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

在處理插件參數(shù)的接收上，通常使用Jquery的extend方法。當(dāng)給extend方法傳遞一個(gè)以上的參數(shù)時(shí)，它會(huì)將所有參數(shù)合并到第一個(gè)里，同時(shí)，如果對象中有同名屬性時(shí)，合并的時(shí)候后面的會(huì)覆蓋前面的。

 面向?qū)ο蟮牟寮_發(fā)

 需要一個(gè)方法是就去定義一個(gè)function，需要變量是就去定義一個(gè)變量，這樣不方便維護(hù)，也不夠清晰。一旦代碼較多的時(shí)候，還是使用面向?qū)ο蟮乃季S比較好。

將需要的重要變量定義到對象的屬性上，函數(shù)變成方法，當(dāng)我們需要的時(shí)候通過對象來獲取，一來方便管理，二來不會(huì)影響外部命名空間，因?yàn)樽兞棵头椒荚趯ο髢?nèi)部

（function(){
//定義Beautifier的構(gòu)造函數(shù)
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) {
    //創(chuàng)建Beautifier的實(shí)體
    var beautifier = new Beautifier(this, options);
    //調(diào)用其方法
    return beautifier.beautify();
}
});

在寫任意js代碼時(shí)都應(yīng)該注意 不要污染全局命名空間。因?yàn)殡S著代碼的變多，全局范圍的變量很難維護(hù)，也容易跟別人的代碼有沖突。最好始終用 自調(diào)用匿名函數(shù)包裹代碼

如上面的例子，我們調(diào)整了代碼的組織結(jié)構(gòu)，并將其用自調(diào)用匿名函數(shù)包裹。自調(diào)用匿名函數(shù)里面的代碼會(huì)在第一時(shí)間執(zhí)行，方便后面的代碼使用插件。

為了防止多個(gè)插件同時(shí)使用時(shí)，有的插件沒有用分號結(jié)尾，最好在代碼開始加個(gè)分號 ; 

而，原有的系統(tǒng)變量也有可能被更改，所以最好將系統(tǒng)變量以參數(shù)形式傳遞到插件內(nèi)部。這樣插件內(nèi)部就有一個(gè)局部的引用，可以提高訪問速度，會(huì)有些許性能提升

結(jié)構(gòu)如下：

;(function($,window,document,undefined){
    //我們的代碼。。
    //blah blah blah...
})(jQuery,window,document);

　　而至于這個(gè)undefined，稍微有意思一點(diǎn)，為了得到?jīng)]有被修改的undefined，我們并沒有傳遞這個(gè)參數(shù)，但卻在接收時(shí)接收了它，因?yàn)閷?shí)際并沒有傳，所以‘undefined’那個(gè)位置接收到的就是真實(shí)的'undefined'了。

最終，這個(gè)插件應(yīng)該為：

;(function($, window, document,undefined) {
    //定義Beautifier的構(gòu)造函數(shù)
    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) {
        //創(chuàng)建Beautifier的實(shí)體
        var beautifier = new Beautifier(this, options);
        //調(diào)用其方法
        return beautifier.beautify();
    }
})(jQuery, window, document);

讀到這里，這篇“jQuery插件開發(fā)模式有哪些及怎么實(shí)現(xiàn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：jQuery插件開發(fā)模式有哪些及怎么實(shí)現(xiàn)
分享網(wǎng)址：http://jinyejixie.com/article22/peoojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站導(dǎo)航、網(wǎng)站營銷、小程序開發(fā)、微信公眾號、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)