大熊君JavaScript插件化開發------（第一季）

一，開篇分析

Hi，你們！大熊君又來了，今天這系列文章主要是說說如何開發基於「JavaScript」的插件式開發，我想不少人對」插件「這個詞並不陌生，

有的人可能叫「組件」或「部件」，這不重要，關鍵是看如何設計，如何作一個全方位的考量，這是本文的重點闡述的概念。我想你們對

「jQuery插件的方式」有必定的瞭解，咱們結合這個話題一塊兒討論一下，最終給出相關的實現方案，來不斷提升本身的誰能力。

　   　　　　　　　

二，進入插件正題

通常來講，jQuery插件的開發分爲兩種：一種是掛在jQuery命名空間下的全局函數，也可稱爲靜態方法。

另外一種是jQuery對象級別的方法，即掛在jQuery原型下的方法，這樣經過選擇器獲取的jQuery對象實例也能共享該方法。

 

（1），類級別的插件開發

類級別的插件開發最直接的理解就是給"jQuery"類添加類方法，能夠理解爲添加靜態方法。典型的例子就是"$.ajax()"這個函數，將函數定義於jQuery的命名空間中。關於類級別的插件開發能夠採用以下幾種形式進行擴展：

1.1添加一個全局函數，咱們只需以下定義，看代碼:　

$.hello = function(){
    alert("Hello,大熊君！") ;
} ;

 

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

1 $.extend({
2     hello : function(name){
3         // put your code here
4     } ,
5     world : function(){
6         // put your code here
7     }
8 }) ;

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

若是該方法只有一個參數target，則該參數將擴展jQuery的命名空間，即做爲靜態方法掛在jQuery全局對象下）。

 

（2），對象級別的插件開發

　對象級別的插件開發須要以下的兩種形式：

　2.1經過「$.fn.extend()」爲原型動態掛載相關的屬性。

1 (function($){   
2     $.fn.extend({   
3         pluginName : function(opts){   
4             // put your code here
5         }   
6     }) ;   
7 })(jQuery) ;   

 

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

1 (function($) {     
2     $.fn.pluginName = function(){   
3         // put your code here  
4     } ;   
5 })(jQuery) ;    

　　說明一下：兩者是等價的，對於一個jQuery插件，一個基本的函數就能夠很好地工做，可是對於複雜一點的插件就須要提供各類各樣的方法和私有函數。

你可能會使用不一樣的命名空間去爲你的插件提供各類方法，可是添加過多的命名空間反而會使代碼變得混亂，健壯性降低。因此最好的解決辦法是適當地定義私有函數和方法。

因此咱們經過自執行函數與閉包的結合實現模擬的私有插件單元，就像咱們上面的實例中同樣。

 

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

　　（1），「html」片斷代碼，以下：

　　

1 <div id="bb" style="width:220px;border:1px solid #ccc;">
2     <span></span>
3     <div 
4         style="margin-top:10px;
5         margin-bottom:30px;"
6     >8     </div>
9 </div>            

 

　　（2），「data.json」定義以下：

　　{

　　　　"text" : "你好，大熊君{{bb}} ！" ;
　　}

　　

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

　　

 1 $(function(){
 2     $("#bb").bigbear() ;
 3 }) ;
 4 (function($){
 5     $.fn.bigbear = function(opts){
 6         opts = $.extend({},$.fn.bigbear.defaults,opts) ;
 7         return this.each(function(){
 8             var elem = $(this) ;
 9             elem.find("span").text(opts["title"]) ;
10             $.get(opts["url"],function(data){
11                 elem.find("div").text(data["text"]) ;
12             }) ;
13         }) ;
14     } ;
15     $.fn.bigbear.defaults = {
16         title : "這是一個簡單的測試" ,
17         url : "data.json"
18     } ;
19 })(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的狀況），如何作重構那？

明天的文章就會說一下這個問題，而且將會重構插件的關鍵邏輯，敬請期待。。。

 

　　　　　　　　　　　　

 

　　　　　　　　　　　　　　　　 哈哈哈，本篇結束，未完待續，但願和你們多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)