10 條建議讓你建立更好的 jQuery 插件

在開發過不少 jQuery 插件之後，我慢慢的摸索出了一套開發jQuery插件比較標準的結構和模式。這樣我就能夠 copy & paste 大部分的代碼結構，只要專一最主要的邏輯代碼就好了。 

使用相同的設計模式和架構也讓修復bug或者二次開發更容易。一套通過驗證的架構能夠保證個人插件不出大的問題，不論插件簡單仍是複雜。 

我在這裏分享10條我總結的經驗。

1. 把你的代碼所有放在閉包裏面 
這是我用的最多的一條。可是有時候在閉包外面的方法會不能調用。不過你的插件的代碼只爲你本身的插件服務，因此不存在這個問題，你能夠把全部的代碼都放在閉包裏面。而方法可能應該放在Prototype方法內部，咱們後面會講到這一點。 

(function($)
{
    //code here
})(jQuery);

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

var defaultSettings = {
    mode            : 'Pencil',
    lineWidthMin    : '0',
    lineWidthMax    : '10',
    lineWidth       : '2'
};

settings = $.extend({}, defaultSettings, settings || {});

3. 使用返回一個元素 
JavaScript/jQuery有一個很好的特色就是能夠進行方法級聯，因此咱們不該該破壞這個特性，始終在方法中返回一個元素。我在個人每個jQuery插件中都遵照這一條。

$.fn.wPaint = function(settings)
{
    return this.each(function()
    {
        var elem = $(this);

        //run some code here
    }
}

4. 一次性代碼放在主循環之外 
這一條很重要，可是經常被忽略。簡單的講，若是你有一段代碼是一堆默認值，只須要被實例化一次，而不是每次調用你插件功能的時候都實例化，你應該把這段代碼放在插件方法的外面。這樣可讓你的插件運行的更高效，節省內存。咱們將會在後面討論prototype的時候，看這個方法在實際中的運用。

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
    }
}

你能夠注意到，上面代碼中的「defaultSettings」是徹底在插件方法外面的，因爲這些代碼是在閉包裏面，咱們不用擔憂這些變量被重寫。 

5. 爲何要設置 Class Prototyping 
做爲你代碼的血與肉，方法和函數應該放在prototype函數內。有兩個緣由： 

• 它能夠節省不少內存，由於能夠不用重複建立這些方法。
• 引用一個現成的方法比從新建立一個好快不少。

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

6. 如何設置 Class Prototyping 
設置一個 prototype 方法有兩個部分。首先咱們須要建立咱們最初的類定義，在多數狀況下這就意味着建立一個對象。這個定義包含了每個對象實例都不一樣的部分。在個人 Paint jQuery Plugin 插件中，我是這麼寫的： 

function Canvas(settings)
{
    this.settings = settings;
    this.draw = false;
    this.canvas = null;       
    this.ctx = null;

    return this;
}

下面來添加全局的方法： 

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

這裏的關鍵是要讓prototype的方法是通用的，可是數據是每一個實例本身的，能夠用「this」引用。 

7. 使用 「this」 對象 
經過使用「$this」，咱們能夠向別的閉包傳遞正確的引用。咱們也可能須要向別的方法傳入 $this 引用。須要注意的是， $this 這個名字是能夠改的，任意的變量名均可以。 

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
    }
}

8. 在每個對象中保存設置 
我一直在每個對象中保存本身的設置，而後操做它本身的設置。這樣你就不用在不一樣的方法中傳遞不少參數。把這些變量放在對象中，也方便你在其餘地方調用這些變量。 

function Canvas(settings)
{
    this.settings = settings;

    return this;
}

9. 分離你的Prototype方法邏輯 
這多是一個基本的原則。當你在猶豫是否須要提供一個方法的時候，你能夠問你本身 「若是其餘人要重寫這個方法的話，你的代碼是否能知足他的需求？」或者「別人來寫這個方法有多困難？」。固然這是一個靈活性拿捏的問題。這裏列出了個人 Color Picker jQuery Plugin  的方法，你能夠參考一下： 

generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()

10. 提供 Setter/Getter 選項 
這一條不是必須的，可是我發現我全部的插件都包用到了這一條。由於它只須要一點點代碼，就能爲別人提供一個他可能須要的功能。 

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

var lineWidth = $("#container").wPaint("lineWidth");
$("#container").wPaint("lineWidth", "5");

首先咱們要把元素和對象關聯起來，而後咱們就能夠引用它。咱們在返回元素以前作以下操做： 

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
    }
}

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

 

原文：http://www.websanova.com/blog/jquery/10-coding-tips-to-write-superior-jquery-plugins#.Ulo4tsZ9fBs

譯文：http://www.oschina.net/question/28_39656