創建jQuery插件的建議

作者：Snail 2012-05-10 13:45:45

使用相同的設計模式和架構也讓修復bug或者二次開發更容易。一套經過驗證的架構可以保證我的插件不出大的問題，不論插件簡單還是復雜。我在這里分享10條我總結的經驗。

在開發過很多 jQuery 插件以后，我慢慢的摸索出了一套開發jQuery插件比較標準的結構和模式。這樣我就可以 copy & paste 大部分的代碼結構，只要專注最主要的邏輯代碼就行了。

1. 把你的代碼全部放在閉包里面

這是我用的最多的一條。但是有時候在閉包外面的方法會不能調用。不過你的插件的代碼只為你自己的插件服務，所以不存在這個問題，你可以把所有的代碼都放在閉包里面。而方法可能應該放在Prototype方法內部，我們后面會講到這一點。

<script>    
(function($)    
{    
     //code here    
})(jQuery);    
</script>

2. 提供插件的默認選項

你的插件應該會有一些選項是可以讓開發者設置的，所以提供恢復默認選項是以有必要的。你可以通過jQuery的extend功能來設置這些選項：

script>  
var defaultSettings = {  
    mode : 'Pencil',  
    lineWidthMin    : '0',  
    lineWidthMax    : '10',  
    lineWidth       : '2' 
};  
settings = $.extend({}, defaultSettings, settings || {});  
</script>

3. 使用返回一個元素

JavaScript/jQuery有一個很好的特點就是可以進行方法級聯，所以我們不應該破壞這個特性，始終在方法中返回一個元素。我在我的每一個jQuery插件中都遵守這一條。

<script>  
$.fn.wPaint = function(settings)  
    {  
        return this.each(function()  
        {  
            var elem = $(this);  
 
            //run some code here  
        }  
    }  
</script>

4. 一次性代碼放在主循環以外

這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆默認值，只需要被實例化一次，而不是每次調用你插件功能的時候都實例化，你應該把這段代碼放在插件方法的外面。這樣可以讓你的插件運行的更高效，節省內存。我們將會在后面討論prototype的時候，看這個方法在實際中的運用。

<script>  
var defaultSettings = {  
    mode            : 'Pencil',  
    lineWidthMin    : '0',  
    lineWidthMax    : '10',  
    lineWidth       : '2' 
};  
$.fn.wPaint = function(settings)  
{  
    settings = $.extend({}, defaultSettings, settings || {});  
    return this.each(function()  
    {  
        var elem = $(this);  
            //run some code here  
    }  
}  
</script>

你可以注意到，上面代碼中的“defaultSettings”是完全在插件方法外面的，由于這些代碼是在閉包里面，我們不用擔心這些變量被重寫。

5. 為什么要設置 Class Prototyping

作為你代碼的血與肉，方法和函數應該放在prototype函數內。有兩個原因：

它可以節省很多內存，因為可以不用重復創建這些方法。

引用一個現成的方法比重新創建一個好快很多。

簡單的說，prototype就是擴展了一個對象，為它提供方法，而不用在每一個對象中實例化這些方法。這也讓你的代碼更有條理和高效。一旦你習慣這種開發方式，你會發現它在你將來的項目中為你節省了很多時間。

6. 如何設置 Class Prototyping

設置一個 prototype 方法有兩個部分。首先我們需要創建我們最初的類定義，在多數情況下這就意味著創建一個對象。這個定義包含了每一個對象實例都不同的部分。在我的 Paint jQuery Plugin 插件中，我是這么寫的：

<script>  
function Canvas(settings)  
{  
    this.settings = settings;  
    this.draw = false;  
    this.canvas = null;  
    this.ctx = null;  
 
    return this;  
}  
</script>

下面來添加全局的方法：

<script>  
Canvas.prototype =  
{  
    generate: function()  
    {  
        //generate code  
    }  
}  
</script>

這里的關鍵是要讓prototype的方法是通用的，但是數據是每個實例自己的，可以用“this”引用。

7. 使用 “this” 對象

通過使用“$this”，我們可以向別的閉包傳遞正確的引用。我們也可能需要向別的方法傳入 $this 引用。需要注意的是， $this 這個名字是可以改的，任意的變量名都可以。

<script>  
Canvas.prototype =  
{  
    generate: function()  
    {  
        //some code  
        var $this = this;  
        var buton = //...some code  
        button.click(function(){  
            //using this will not be found since it has it's own this  
            //use $this instead.  
            $this.someFunc($this);  
        });  
    },  
    someFunc: function($this)  
    {  
        //won't know what "this" is.  
        //use $this instead passed from the click event  
    }  
}  
</script>

8. 在每一個對象中保存設置

我一直在每一個對象中保存自己的設置，然后操作它自己的設置。這樣你就不用在不同的方法中傳遞很多參數。把這些變量放在對象中，也方便你在其他地方調用這些變量。

<script>  
function Canvas(settings)  
{  
    this.settings = settings;  
 
    return this;  
}  
</script>

9. 分離你的Prototype方法邏輯

這可能是一個基本的原則。當你在猶豫是否需要提供一個方法的時候，你可以問你自己 “如果其他人要重寫這個方法的話，你的代碼是否能滿足他的需求?”或者“別人來寫這個方法有多困難?”。當然這是一個靈活性拿捏的問題。這里列出了我的 Color Picker jQuery Plugin 的方法，你可以參考一下：

<script>  
generate()  
appendColors()  
colorSelect()  
colorHoverOn()  
colorHoverOff()  
appendToElement()  
showPalette()  
hidePalette()  
</script>

10. 提供 Setter/Getter 選項

這一條不是必須的，但是我發現我所有的插件都包用到了這一條。因為它只需要一點點代碼，就能為別人提供一個他可能需要的功能。

基本上，我們只要讓開發者能夠設置或者獲取元素已經存在的值：

<script>  
var lineWidth = $("#container").wPaint("lineWidth");  
$("#container").wPaint("lineWidth", "5");  
</script>

首先我們要把元素和對象關聯起來，然后我們就可以引用它。我們在返回元素之前做如下操作：

<script>  
return this.each(function()  
{  
    var elem = $(this);  
 
    var canvas = new Canvas(settings);  
 
    //run some code here  
 
    elem.data("_wPaint_canvas", canvas);  
}  
//下面的代碼明確了我們究竟要做什么：  
$.fn.wPaint = function(option, settings)  
{  
    if(typeof option === 'object')  
    {  
        settings = option;  
    }  
    else if(typeof option === 'string')  
    {  
        if(  
            this.data('_wPaint_canvas') &&  
            defaultSettings[option] !== undefined  
        ){  
            var canvas = this.data('_wPaint_canvas');  
 
            if(settings)  
            {  
                canvas.settings[option] = settings;  
                return true;  
            }  
            else 
            {  
                return canvas.settings[option];  
            }  
        }  
        else 
            return false;  
    }  
 
    return this.each(function()  
    {  
        //run some code here  
    }  
}  
</script>

以上十條基本上覆蓋了jQuery插件開發的核心，并且可以作為開發的模板。有一套基本的代碼可以極大的縮短你的開發時間，并且能夠讓你設計插件架構的時候更自信。

原文鏈接：http://www.phpfuns.com/scripts/jquery/jquery-plugins.shtml

【編輯推薦】

jQ文件無刷新上傳插件下載及介紹
更優美的jQuery UI部件
新鮮出爐的jQuery效果
多個目前流行的jQuery插件
隨機展示頭像的jQuery代碼

責任編輯：張偉來源： phpFuns

jQuery