jQuery外掛開發模式詳解

helloxiaoliang發表於2016-08-01
jQuery模式

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

根據《jQuery高階程式設計》的描述，jQuery外掛開發方式主要有三種：

  1. 通過$.extend()來擴充套件jQuery
  2. 通過$.fn 向jQuery新增新的方法
  3. 通過$.widget()應用jQuery UI的部件工廠方式建立

通常我們使用第二種方法來進行簡單外掛開發，說簡單是相對於第三種方式。第三種方式是用來開發更高階jQuery部件的，該模式開發出來的部件帶有很多jQuery內建的特性，比如外掛的狀態資訊自動儲存，各種關於外掛的常用方法等，非常貼心，這裡不細說。

而第一種方式又太簡單，僅僅是在jQuery名稱空間或者理解成jQuery身上新增了一個靜態方法而以。所以我們呼叫通過$.extend()新增的函式時直接通過$符號呼叫（$.myfunction()）而不需要選中DOM元素($(‘#example’).myfunction())。請看下面的例子。

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

執行結果：

上面程式碼中，通過$.extend()向jQuery新增了一個sayHello函式，然後通過$直接呼叫。到此你可以認為我們已經完成了一個簡單的jQuery外掛了。

但如你所見，這種方式用來定義一些輔助方法是比較方便的。比如一個自定義的console，輸出特定格式的資訊，定義一次後可以通過jQuery在程式中任何需要的地方呼叫它。

$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //！JavaScript中月分是從0開始的
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(time + ' My App: ' + message);
    }
})
$.log('initializing...'); //呼叫

但這種方式無法利用jQuery強大的選擇器帶來的便利，要處理DOM元素以及將外掛更好地運用於所選擇的元素身上，還是需要使用第二種開發方式。你所見到或使用的外掛也大多是通過此種方式開發。

外掛開發

下面我們就來看第二種方式的jQuery外掛開發。

基本方法

先看一下它的基本格式：

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

基本上就是往$.fn上面新增一個方法，名字是我們的外掛名稱。然後我們的外掛程式碼在這個方法裡面展開。

比如我們將頁面上所有連結顏色轉成紅色，則可以這樣寫這個外掛：

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

在外掛名字定義的這個函式內部，this指代的是我們在呼叫該外掛時，用jQuery選擇器選中的元素，一般是一個jQuery型別的集合。比如$(‘a’)返回的是頁面上所有a標籤的集合，且這個集合已經是jQuery包裝型別了，也就是說，在對其進行操作的時候可以直接呼叫jQuery的其他方法而不需要再用美元符號來包裝一下。

所以在上面外掛程式碼中，我們在this身上呼叫jQuery的css()方法，也就相當於在呼叫 $(‘a’).css()。

理解this在這個地方的含義很重要。這樣你才知道為什麼可以直接商用jQuery方法同時在其他地方this指代不同時我們又需要用jQuery重新包裝才能呼叫，下面會講到。初學容易被this的值整暈，但理解了就不難。

現在就可以去頁面試試我們的程式碼了，在頁面上放幾個連結，呼叫外掛後連結字型變成紅色。

<ul>
	<li>
		<a href="http://www.webo.com/liuwayong">我的微博</a>
	</li>
	<li>
		<a href="http://http://www.cnblogs.com/Wayou/">我的部落格</a>
	</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>

執行結果：

下面進一步，在外掛程式碼裡處理每個具體的元素，而不是對一個集合進行處理，這樣我們就可以針對每個元素進行相應操作。

我們已經知道this指代jQuery選擇器返回的集合，那麼通過呼叫jQuery的.each()方法就可以處理合集中的每個元素了，但此刻要注意的是，在each方法內部，this指帶的是普通的DOM元素了，如果需要呼叫jQuery的方法那就需要用$來重新包裝一下。

比如現在我們要在每個連結顯示連結的真實地址，首先通過each遍歷所有a標籤，然後獲取href屬性的值再加到連結文字後面。

更改後我們的外掛程式碼為：

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

呼叫程式碼還是一樣的，我們通過選中頁面所有的a標籤來呼叫這個外掛

執行結果：

到此，你已經可以編寫功能簡單的jQuery外掛了。是不是也沒那麼難。

下面開始jQuery外掛編寫中一個重要的部分，引數的接收。

支援鏈式呼叫

我們都知道jQuery一個時常優雅的特性是支援鏈式呼叫，選擇好DOM元素後可以不斷地呼叫其他方法。

要讓外掛不打破這種鏈式呼叫，只需return一下即可。

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

讓外掛接收引數

一個強勁的外掛是可以讓使用者隨意定製的，這要求我們提供在編寫外掛時就要考慮得全面些，儘量提供合適的引數。

比如現在我們不想讓連結只變成紅色，我們讓外掛的使用者自己定義顯示什麼顏色，要做到這一點很方便，只需要使用者在呼叫的時候傳入一個引數即可。同時我們在外掛的程式碼裡面接收。另一方面，為了靈活，使用者可以不傳遞引數，外掛裡面會給出引數的預設值。

在處理外掛引數的接收上，通常使用jQuery的extend方法，上面也提到過，但那是給extend方法傳遞單個物件的情況下，這個物件會合併到jQuery身上，所以我們就可以在jQuery身上呼叫新合併物件裡包含的方法了，像上面的例子。當給extend方法傳遞一個以上的引數時，它會將所有引數物件合併到第一個裡。同時，如果物件中有同名屬性時，合併的時候後面的會覆蓋前面的。

利用這一點，我們可以在外掛裡定義一個儲存外掛引數預設值的物件，同時將接收來的引數物件合併到預設物件上，最後就實現了使用者指定了值的引數使用指定的值，未指定的引數使用外掛預設值。

為了演示方便，再指定一個引數fontSize，允許呼叫外掛的時候設定字型大小。

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

現在，我們呼叫的時候指定顏色，字型大小未指定，會運用外掛裡的預設值12px。

$('a').myPlugin({
    'color': '#2C9929'
});

執行結果：

同時指定顏色與字型大小：

$('a').myPlugin({
    'color': '#2C9929',
    'fontSize': '20px'
});

保護好預設引數

注意到上面程式碼呼叫extend時會將defaults的值改變，這樣不好，因為它作為外掛因有的一些東西應該維持原樣，另外就是如果你在後續程式碼中還要使用這些預設值的話，當你再次訪問它時它已經被使用者傳進來的引數更改了。

一個好的做法是將一個新的空物件做為$.extend的第一個引數，defaults和使用者傳遞的引數物件緊隨其後，這樣做的好處是所有值被合併到這個空物件上，保護了外掛裡面的預設值。

$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend({},defaults, options);//將一個空物件做為第一個引數
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

到此，外掛可以接收和處理引數後，就可以編寫出更健壯而靈活的外掛了。若要編寫一個複雜的外掛，程式碼量會很大，如何組織程式碼就成了一個需要面臨的問題，沒有一個好的方式來組織這些程式碼，整體感覺會雜亂無章，同時也不好維護，所以將外掛的所有方法屬性包裝到一個物件上，用物件導向的思維來進行開發，無疑會使工作輕鬆很多。

物件導向的外掛開發

為什麼要有物件導向的思維，因為如果不這樣，你可能需要一個方法的時候就去定義一個function，當需要另外一個方法的時候，再去隨便定義一個function，同樣，需要一個變數的時候，毫無規則地定義一些散落在程式碼各處的變數。

還是老問題，不方便維護，也不夠清晰。當然，這些問題在程式碼規模較小時是體現不出來的。

如果將需要的重要變數定義到物件的屬性上，函式變成物件的方法，當我們需要的時候通過物件來獲取，一來方便管理，二來不會影響外部名稱空間，因為所有這些變數名還有方法名都是在物件內部。

接著上面的例子，我們可以把這個外掛抽象成一個美化頁面的物件，因為他的功能是設定顏色啊字型啊什麼的，當然我們還可以加入其他功能比如設定下劃線啊什麼的。當然對於這個例子抽象成物件有點小題大做，這裡僅作演示用。以後我可能會介紹我編寫的一個jQuery外掛SlipHover,其中程式碼就比較多，這樣的模式就用得上了。

所以我們新建一個物件命名為Beautifier，然後我們在外掛裡使用這個物件來編碼。

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

通過上面這樣一改造，我們的程式碼變得更物件導向了，也更好維護和理解，以後要加新功能新方法，只需向物件新增新變數及方法即可，然後在外掛裡例項化後即可呼叫新新增的東西。

外掛的呼叫還是一樣的，我們對程式碼的改動並不影響外掛其他地方，只是將程式碼的組織結構改動了而以。

$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px'
    });
})

指定文字帶下劃線（我們在Beautifier物件中新加的功能，預設不帶下劃線，如上面的例子）的呼叫：

$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px',
        'textDecoration': 'underline'
    });
})

到這裡，你可以更好地編寫複雜的外掛同時很好地組織程式碼了。當我們回頭去看上面的程式碼時，其實也還是有改進空間的。也就是下面介紹的關於名稱空間及變數各什麼的，一些雜項。

關於名稱空間

不僅僅是jQuery外掛的開發，我們在寫任何JS程式碼時都應該注意的一點是不要汙染全域性名稱空間。因為隨著你程式碼的增多，如果有意無意在全域性範圍內定義一些變數的話，最後很難維護，也容易跟別人寫的程式碼有衝突。

比如你在程式碼中向全域性window物件新增了一個變數status用於存放狀態，同時頁面中引用了另一個別人寫的庫，也向全域性新增了這樣一個同名變數，最後的結果肯定不是你想要的。所以不到萬不得已，一般我們不會將變數定義成全域性的。

一個好的做法是始終用自呼叫匿名函式包裹你的程式碼，這樣就可以完全放心，安全地將它用於任何地方了，絕對沒有衝突。

用自呼叫匿名函式包裹你的程式碼

我們知道JavaScript中無法用花括號方便地建立作用域，但函式卻可以形成一個作用域，域內的程式碼是無法被外界訪問的。如果我們將自己的程式碼放入一個函式中，那麼就不會汙染全域性名稱空間，同時不會和別的程式碼衝突。

如上面我們定義了一個Beautifier全域性變數，它會被附到全域性的window物件上，為了防止這種事情發生，你或許會說，把所有程式碼放到jQuery的外掛定義程式碼裡面去啊，也就是放到$.fn.myPlugin裡面。這樣做倒也是種選擇。但會讓我們實際跟外掛定義有關的程式碼變得臃腫，而在$.fn.myPlugin裡面我們其實應該更專注於外掛的呼叫，以及如何與jQuery互動。

所以保持原來的程式碼不變，我們將所有程式碼用自呼叫匿名函式包裹。

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

這樣做的好處，也就是上面所闡述的那樣。另外還有一個好處就是，自呼叫匿名函式裡面的程式碼會在第一時間執行，頁面準備好過後，上面的程式碼就將外掛準備好了，以方便在後面的程式碼中使用外掛。

目前為止似乎接近完美了。如果再考慮到其他一些因素，比如我們將這段程式碼放到頁面後，前面別人寫的程式碼沒有用分號結尾，或者前面的程式碼將window, undefined等這些系統變數或者關鍵字修改掉了，正好我們又在自己的程式碼裡面進行了使用，那結果也是不可預測的，這不是 我們想要的。我知道其實你還沒太明白，下面詳細介紹。

將系統變數以變數形式傳遞到外掛內部

來看下面的程式碼，你猜他會出現什麼結果？

var foo=function(){
    //別人的程式碼
}//注意這裡沒有用分號結尾

//開始我們的程式碼。。。
(function(){
    //我們的程式碼。。
    alert('Hello!');
})();

本來別人的程式碼也正常工作，只是最後定義的那個函式沒有用分號結尾而以，然後當頁面中引入我們的外掛時，報錯了，我們的程式碼無法正常執行。

原因是我們用來充當自呼叫匿名函式的第一對括號與上面別人定義的函式相連，因為中間沒有分號嘛，總之我們的程式碼無法正常解析了，所以報錯。

所以好的做法是我們在程式碼開頭加一個分號，這在任何時候都是一個好的習慣。

var foo=function(){
    //別人的程式碼
}//注意這裡沒有用分號結尾

//開始我們的程式碼。。。
;(function(){
    //我們的程式碼。。
    alert('Hello!');
})();

同時，將系統變數以引數形式傳遞到外掛內部也是個不錯的實踐。

當我們這樣做之後，window等系統變數在外掛內部就有了一個區域性的引用，可以提高訪問速度，會有些許效能的提升

最後我們得到一個非常安全結構良好的程式碼：

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

而至於這個undefined，稍微有意思一點，為了得到沒有被修改的undefined，我們並沒有傳遞這個引數，但卻在接收時接收了它，因為實際並沒有傳，所以‘undefined’那個位置接收到的就是真實的’undefined’了。是不是有點hack的味道，值得細細體會的技術，當然不是我發明的，都是從前人的經驗中學習。

所以最後我們的外掛成了這樣：

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

一個安全，結構良好，組織有序的外掛編寫完成。

關於變數定義及命名

現在談談關於變數及方法等的命名，沒有硬性規定，但為了規範，遵循一些約定還是很有必要的。

變數定義：好的做法是把將要使用的變數名用一個var關鍵字一併定義在程式碼開頭，變數名間用逗號隔開。原因有二：

  • 一是便於理解，知道下面的程式碼會用到哪些變數，同時程式碼顯得整潔且有規律，也方便管理，變數定義與邏輯程式碼分開；
  • 二是因為JavaScript中所有變數及函式名會自動提升，也稱之為JavaScript的Hoist特性，即使你將變數的定義穿插在邏輯程式碼中，在程式碼解析執行期間，這些變數的宣告還是被提升到了當前作用域最頂端的，所以我們將變數定義在一個作用域的開頭是更符合邏輯的一種做法。當然，再次說明這只是一種約定，不是必需的。

變數及函式命名 一般使用駝峰命名法（CamelCase），即首個單詞的首字母小寫，後面單詞首字母大寫，比如resultArray，requestAnimationFrame。對於常量，所有字母採用大寫，多個單詞用下劃線隔開，比如WIDTH=100，BRUSH_COLOR=’#00ff00′。當變數是jQuery型別時，建議以$開頭，開始會不習慣，但經常用了之後會感覺很方便，因為可以很方便地將它與普通變數區別開來，一看到以$開頭我們就知道它是jQuery型別可以直接在其身上呼叫jQuery相關的方法，比如var $element=$(‘a’); 之後就可以在後面的程式碼中很方便地使用它，並且與其他變數容易區分開來。

引號的使用：既然都扯了這些與外掛主題無關的了，這裡再多說一句，一般HTML程式碼裡面使用雙引號，而在JavaScript中多用單引號，比如下面程式碼所示：

var name = 'Wayou';
document.getElementById(‘example’).innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持雙引號，JavaScript中保持單引號

一方面，HTML程式碼中本來就使用的是雙引號，另一方面，在JavaScript中引號中還需要引號的時候，要求我們單雙引號間隔著寫才是合法的語句，除非你使用轉意符那也是可以的。再者，堅持這樣的統一可以保持程式碼風格的一致，不會出現這裡字串用雙引號包著，另外的地方就在用單引號。

相關文章