JavaScript外掛程式化開發教程 （一），javascript外掛程式

JavaScript外掛程式化開發教程 （一），javascript外掛程式

一，開篇分析

Hi，大家！今天這系列文章主要是說說如何開發基於“JavaScript”的外掛程式式開發，我想很多人對”外掛程式“這個詞並不陌生，

有的人可能叫“組件”或“組件”，這不重要，關鍵是看如何設計，如何做一個全方位的考量，這是本文的重點闡述的概念。我想大家對

“jQuery外掛程式的方式”有一定的瞭解，我們結合這個話題一起討論一下，最終給出相關的實現方案，來不斷提高自己的誰能力。

二，進入外掛程式正題

一般來說，jQuery外掛程式的開發分為兩種：一種是掛在jQuery命名空間下的全域函數，也可稱為靜態方法。

另一種是jQuery對象層級的方法，即掛在jQuery原型下的方法，這樣通過選取器擷取的jQuery對象執行個體也能共用該方法。

（1），類層級的外掛程式開發

類層級的外掛程式開發最直接的理解就是給"jQuery"類添加類方法，可以理解為添加靜態方法。典型的例子就是"$.ajax()"這個函數，將函數定義於jQuery的命名空間中。關於類層級的外掛程式開發可以採用如下幾種形式進行擴充：

1.1添加一個全域函數，我們只需如下定義，看代碼:　

複製代碼 代碼如下:
$.hello = function(){
    alert("Hello,大熊君！") ;
} ;

1.2添加多個全域函數，可採用如下定義：

複製代碼 代碼如下:
$.extend({
    hello : function(name){
        // put your code here
    } ,
    world : function(){
        // put your code here
    }
}) ;

說明：”$.extend(target, [object1], [objectN])“（該方法主要用於合并兩個或更多個物件的內容(屬性)到第一個對象，並返回合并後的第一對象。

如果該方法只有一個參數target，則該參數將擴充jQuery的命名空間，即作為靜態方法掛在jQuery全域對象下）。

（2），對象層級的外掛程式開發

　對象層級的外掛程式開發需要如下的兩種形式：

　2.1通過“$.fn.extend()”為原型動態掛載相關的屬性。

複製代碼 代碼如下:
(function($){  
    $.fn.extend({  
        pluginName : function(opts){  
            // put your code here
        }  
    }) ;  
})(jQuery) ;  

　2.2直接添加動態屬性到原型鏈上。

複製代碼 代碼如下:
 (function($) {    
     $.fn.pluginName = function(){  
         // put your code here 
     } ;  
 })(jQuery) ; 

　　說明一下：二者是等價的，對於一個jQuery外掛程式，一個基本的函數就可以很好地工作，但是對於複雜一點的外掛程式就需要提供各種各樣的方法和私人函數。

你可能會使用不同的命名空間去為你的外掛程式提供各種方法，但是添加過多的命名空間反而會使代碼變得混亂，健壯性下降。所以最好的解決辦法是適當地定義私人函數和方法。

所以我們通過自執行函數與閉包的結合實現類比的私人外掛程式單元，就像我們上面的執行個體中一樣。

（三），下面給一個簡單的例子看看實現的過程：

　　（1），“html”片段代碼，如下：

複製代碼 代碼如下:
<div id="bb" style="width:220px;border:1px solid #ccc;">
   <span></span>
   <div
       style="margin-top:10px;
       margin-bottom:30px;"
   >8     </div>
</div>           

　　（2），“data.json”定義如下：

複製代碼 代碼如下:
　　{
　　　　"text" : "你好，大熊君{{bb}} ！" ;
　　}

　　（3），"bb.js"代碼如下：

複製代碼 代碼如下:
$(function(){
    $("#bb").bigbear() ;
}) ;
(function($){
    $.fn.bigbear = function(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            elem.find("span").text(opts["title"]) ;
            $.get(opts["url"],function(data){
                elem.find("div").text(data["text"]) ;
            }) ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        title : "這是一個簡單的測試" ,
        url : "data.json"
    } ;
})(jQuery) ;

　　運行效果：

小結一下：

　　（1）“$.fn.bigbear.defaults”提供外掛程式的預設參數選項一個擴充性良好的外掛程式應該是可以讓使用者根據需求自訂參數選項，並控制外掛程式的行為，所以提供恢複預設選項是很有必要的。你可以通過jQuery的extend方法來設定這些選項。

　　（2），“return this.each(){...}”遍曆多個元素並返回jQuery使用Sizzle選取器引擎，Sizzle可以為你的函數提供多元素操作（例如對所有類名相同的元素）。這是jQuery幾個優秀的特性之一，在開發外掛程式過程中即使你不準備為你的外掛程式提供多元素支援，但為這做準備仍然是一個很好的方式。另外，jQuery有一個很好的特點就是可以進行方法級聯，也可稱為鏈式調用，所以我們不應該破壞這個特性，始終在方法中返回一個元素。

（四），最後總結

　　（1），jQuery為開發外掛程式提拱了兩個方法，分別是：jQuery.fn.extend(object);  給jQuery對象添加方法。
jQuery.extend(object);  為擴充jQuery類本身.為類添加新的方法。

　　（2），把全部代碼放在閉包(一個即時執行函數)裡此時閉包相當於一個私人範圍，外部無法訪問到內部的資訊，並且不會存在全域變數的汙染情況。官方建立開發規範的解釋是：a) 避免全域依賴；b) 避免第三方破壞；c) 相容jQuery操作符'$'和'jQuery '。

　　（3），提供外掛程式的預設參數選項一個擴充性良好的外掛程式應該是可以讓使用者根據需求自訂參數選項，並控制外掛程式的行為，所以提供恢複預設選項是很有必要的。你可以通過jQuery的extend方法來設定這些選項

　　（4），遍曆多個元素並返回jQuery使用Sizzle選取器引擎，Sizzle可以為你的函數提供多元素操作（例如對所有類名相同的元素）。這是jQuery幾個優秀的特性之一，在開發外掛程式過程中即使你不準備為你的外掛程式提供多元素支援，但為這做準備仍然是一個很好的實踐。另外，jQuery有一個很好的特點就是可以進行方法級聯，也可稱為鏈式調用，所以我們不應該破壞這個特性，始終在方法中返回一個元素。

　　（5），一次性代碼放在主迴圈以外這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆預設值，只需要被執行個體化一次，而不是每次調用你外掛程式功能的時候都需要執行個體化，你應該把這段代碼放在外掛程式方法的外面。

　　（6），大家學習完思考一下，如果項目技術選型換了這些外掛程式又是強依賴“jQuery”機制，我們以前寫的外掛程式將會不能用（假設不用jQuery的情況），如何做重構那？

明天的文章就會說一下這個問題，並且將會重構外掛程式的關鍵邏輯，敬請期待。。。