jQuery插件開發模式有哪些及怎么實現

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

jQuery插件開發模式

軟件開發過程中是需要一定的設計模式來指導開發的，有了模式，我們就能更好地組織我們的代碼，并且從這些前人總結出來的模式中學到很多好的實踐。

jQuery插件開發方式主要有三種：

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

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

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

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

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

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

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

插件開發

 基本格式：

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

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

例：

<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標簽不是a標簽，我不會受影響</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 為我們自定義的插件，內容如下：

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

有的時候，當一個頁面可能會引用多個插件的時候，為了保證插件的正確，我們可以在我們的插件起始加一個 ; 來表示上一個插件結束，開始新的插件

調用插件的方法 $('a').myPlugin() 相當于 $('a').css('color','red'); 即把所有的a標簽轉為紅色

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

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

上面的插件意思：把所有的鏈接轉為紅色，并且將每個鏈接顯示真實的鏈接地址

jquery有一個特性就是 支持鏈式調用，選擇好的DOM元素后可以不斷的調用其他方法，要不打破這種鏈式調用，需要把最后的值 return 一下

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

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

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

 面向對象的插件開發

 需要一個方法是就去定義一個function，需要變量是就去定義一個變量，這樣不方便維護，也不夠清晰。一旦代碼較多的時候，還是使用面向對象的思維比較好。

將需要的重要變量定義到對象的屬性上，函數變成方法，當我們需要的時候通過對象來獲取，一來方便管理，二來不會影響外部命名空間，因為變量名和方法名都在對象內部

（function(){
//定義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();
}
});

在寫任意js代碼時都應該注意 不要污染全局命名空間。因為隨著代碼的變多，全局范圍的變量很難維護，也容易跟別人的代碼有沖突。最好始終用 自調用匿名函數 包裹代碼

如上面的例子，我們調整了代碼的組織結構，并將其用自調用匿名函數包裹。自調用匿名函數里面的代碼會在第一時間執行，方便后面的代碼使用插件。

為了防止多個插件同時使用時，有的插件沒有用分號結尾，最好在代碼開始加個分號 ; 

而，原有的系統變量也有可能被更改，所以最好將系統變量以參數形式傳遞到插件內部。這樣插件內部就有一個局部的引用，可以提高訪問速度，會有些許性能提升

結構如下：

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

　　而至于這個undefined，稍微有意思一點，為了得到沒有被修改的undefined，我們并沒有傳遞這個參數，但卻在接收時接收了它，因為實際并沒有傳，所以‘undefined’那個位置接收到的就是真實的'undefined'了。

最終，這個插件應該為：

;(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);

讀到這里，這篇“jQuery插件開發模式有哪些及怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。