欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript插件化開發(fā)教程 （一）

 更新時(shí)間：2015年01月27日 12:20:25   投稿：hebedich  
這篇文章主要介紹了JavaScript插件化開發(fā)教程，十分的詳細(xì)，

一，開篇分析

Hi，大家！今天這系列文章主要是說說如何開發(fā)基于“JavaScript”的插件式開發(fā)，我想很多人對”插件“這個詞并不陌生，

有的人可能叫“組件”或“部件”，這不重要，關(guān)鍵是看如何設(shè)計(jì)，如何做一個全方位的考量，這是本文的重點(diǎn)闡述的概念。我想大家對

“jQuery插件的方式”有一定的了解，我們結(jié)合這個話題一起討論一下，最終給出相關(guān)的實(shí)現(xiàn)方案，來不斷提高自己的誰能力。

二，進(jìn)入插件正題

一般來說，jQuery插件的開發(fā)分為兩種：一種是掛在jQuery命名空間下的全局函數(shù)，也可稱為靜態(tài)方法。

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

（1），類級別的插件開發(fā)

類級別的插件開發(fā)最直接的理解就是給"jQuery"類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是"$.ajax()"這個函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級別的插件開發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：

1.1添加一個全局函數(shù)，我們只需如下定義，看代碼:　

復(fù)制代碼 代碼如下:

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

1.2添加多個全局函數(shù)，可采用如下定義：

復(fù)制代碼 代碼如下:

$.extend({
    hello : function(name){
        // put your code here
    } ,
    world : function(){
        // put your code here
    }
}) ;

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

如果該方法只有一個參數(shù)target，則該參數(shù)將擴(kuò)展jQuery的命名空間，即作為靜態(tài)方法掛在jQuery全局對象下）。

（2），對象級別的插件開發(fā)

　對象級別的插件開發(fā)需要如下的兩種形式：

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

復(fù)制代碼 代碼如下:

(function($){  
    $.fn.extend({  
        pluginName : function(opts){  
            // put your code here
        }  
    }) ;  
})(jQuery) ;  

　2.2直接添加動態(tài)屬性到原型鏈上。

復(fù)制代碼 代碼如下:

 (function($) {    
     $.fn.pluginName = function(){  
         // put your code here 
     } ;  
 })(jQuery) ; 

　　說明一下：二者是等價(jià)的，對于一個jQuery插件，一個基本的函數(shù)就可以很好地工作，但是對于復(fù)雜一點(diǎn)的插件就需要提供各種各樣的方法和私有函數(shù)。

你可能會使用不同的命名空間去為你的插件提供各種方法，但是添加過多的命名空間反而會使代碼變得混亂，健壯性下降。所以最好的解決辦法是適當(dāng)?shù)囟x私有函數(shù)和方法。

所以我們通過自執(zhí)行函數(shù)與閉包的結(jié)合實(shí)現(xiàn)模擬的私有插件單元，就像我們上面的實(shí)例中一樣。

（三），下面給一個簡單的例子看看實(shí)現(xiàn)的過程：

　?。?），“html”片段代碼，如下：

復(fù)制代碼 代碼如下:

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

　?。?），“data.json”定義如下：

復(fù)制代碼 代碼如下:

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

　?。?），"bb.js"代碼如下：

復(fù)制代碼 代碼如下:

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

　　運(yùn)行效果：

小結(jié)一下：

　?。?）“$.fn.bigbear.defaults”提供插件的默認(rèn)參數(shù)選項(xiàng)一個擴(kuò)展性良好的插件應(yīng)該是可以讓使用者根據(jù)需求自定義參數(shù)選項(xiàng)，并控制插件的行為，所以提供恢復(fù)默認(rèn)選項(xiàng)是很有必要的。你可以通過jQuery的extend方法來設(shè)置這些選項(xiàng)。

　?。?），“return this.each(){...}”遍歷多個元素并返回jQuery使用Sizzle選擇器引擎，Sizzle可以為你的函數(shù)提供多元素操作（例如對所有類名相同的元素）。這是jQuery幾個優(yōu)秀的特性之一，在開發(fā)插件過程中即使你不準(zhǔn)備為你的插件提供多元素支持，但為這做準(zhǔn)備仍然是一個很好的方式。另外，jQuery有一個很好的特點(diǎn)就是可以進(jìn)行方法級聯(lián)，也可稱為鏈?zhǔn)秸{(diào)用，所以我們不應(yīng)該破壞這個特性，始終在方法中返回一個元素。

（四），最后總結(jié)

　?。?），jQuery為開發(fā)插件提拱了兩個方法，分別是：jQuery.fn.extend(object);  給jQuery對象添加方法。
jQuery.extend(object);  為擴(kuò)展jQuery類本身.為類添加新的方法。

　?。?），把全部代碼放在閉包(一個即時(shí)執(zhí)行函數(shù))里此時(shí)閉包相當(dāng)于一個私有作用域，外部無法訪問到內(nèi)部的信息，并且不會存在全局變量的污染情況。官方創(chuàng)建開發(fā)規(guī)范的解釋是：a) 避免全局依賴；b) 避免第三方破壞；c) 兼容jQuery操作符'$'和'jQuery '。

　?。?），提供插件的默認(rèn)參數(shù)選項(xiàng)一個擴(kuò)展性良好的插件應(yīng)該是可以讓使用者根據(jù)需求自定義參數(shù)選項(xiàng)，并控制插件的行為，所以提供恢復(fù)默認(rèn)選項(xiàng)是很有必要的。你可以通過jQuery的extend方法來設(shè)置這些選項(xiàng)

　?。?），遍歷多個元素并返回jQuery使用Sizzle選擇器引擎，Sizzle可以為你的函數(shù)提供多元素操作（例如對所有類名相同的元素）。這是jQuery幾個優(yōu)秀的特性之一，在開發(fā)插件過程中即使你不準(zhǔn)備為你的插件提供多元素支持，但為這做準(zhǔn)備仍然是一個很好的實(shí)踐。另外，jQuery有一個很好的特點(diǎn)就是可以進(jìn)行方法級聯(lián)，也可稱為鏈?zhǔn)秸{(diào)用，所以我們不應(yīng)該破壞這個特性，始終在方法中返回一個元素。

　?。?），一次性代碼放在主循環(huán)以外這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆默認(rèn)值，只需要被實(shí)例化一次，而不是每次調(diào)用你插件功能的時(shí)候都需要實(shí)例化，你應(yīng)該把這段代碼放在插件方法的外面。

　?。?），大家學(xué)習(xí)完思考一下，如果項(xiàng)目技術(shù)選型換了這些插件又是強(qiáng)依賴“jQuery”機(jī)制，我們以前寫的插件將會不能用（假設(shè)不用jQuery的情況），如何做重構(gòu)那？

明天的文章就會說一下這個問題，并且將會重構(gòu)插件的關(guān)鍵邏輯，敬請期待。。。

相關(guān)文章

最新評論