10个帮助你创建超棒jQuery插件的小技巧

日期：2012/02/29  来源：GBin1.com

这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件，很多开发人员都开发了很多不错的jQuery插件，但是对我们这些插件的使用者来说，很多jQuery插件的使用都不是那么直 接和透明。这里的10个技巧能够帮助你将更好的维和和扩展你的jQuery插件。而且对于插件开发来说，如果你有一个非常好的架构，将会给你的开发带来极 大的益处。所以在正式开发前，进过深思熟虑还是非常有必要的。

1. 插件开发需要做到独立

这是jQuery插件开发中最让个伤脑筋的事之一。因为我们需要首先考虑。你的插件应该在不需要额外的配置情况下正常工作。因此最小的缺省初始化你的jQuery插件就应该正常工作，如下：

$("#gbin1-container").wTooltip();

一个非常好的例子就是拥有向前/向后按钮的jQuery幻灯展示插件。 我曾经看到过了一些插件要求你配置div和属性id和class，然后要求你通过插件来参考。这样的配置应该在插件内处理，提供可开关的选项

2. 提供缺省的设置

很少有插件不提供任何的配置设定。和前面观点类似，我们肯定需要提供用户一些选项，这样可以帮助用户自己配置自己需要的效果并且扩展需求，更重要的在于帮助你推广你的插件

var gbin1DefaultSettings = {
    mode            : 'Pencil',
    lineWidthMin    : '0',
    lineWidthMax    : '10',
    lineWidth       : '2'
};settings = $.extend({}, gbin1DefaultSettings, settings || {}); 3. 保证所有的命名都唯一

当创建你的插件的时候，你需要记住一定要使得任何你的插件的参考都唯一，例如，class，id和插件名称。这样能够保证你不会和已经存在的javascript或者CSS代码冲突。

$("#gbin1container").tooltip();    //避免这样使用   
$("#gbin1container").wTooltip();   //推荐这样使用

在上面的例子中我们通过添加w来唯一命名我们插件，这样避免和其它的常规命名冲突。同时我们也需要用这种方式来命名CSS，保证一般使用的词语例如，“tab”和“holder”都唯一

_wPaint_button
_wPaint_holder

我同时也添加下划线来确认不会和其它id和class冲突，这种方式能够保证我们开发的插件更强壮。

4. 标准的简略插件布局

下面是一个标准的jQuery插件代码片段，你将会看到大多数的插件都使用这样的格式。包含了所有你需要开发，维护和更新所需要的重要代码内容。帮助你专注于你的代码开发。你可以看看我的jQuery Tooltip插件代码，我使用了一个最小代码量的代码，能够帮助你了解如何将这些代码有效的结合。

var defaultSettings = {
    //settings
};

$.fn.wPaint = function(settings)
{
    //check for setters/getters
    
    return this.each(function()
    {
        var elem = $(this);

        //run some code here
        
        elem.data("_wPaint", wPaint);
    }
    
    //classes/prototyping
}

这里你需要注意五点：

5. 保持你的代码有组织

可能这点儿非常明显，但是在很多插件中都有很多奇怪的配置。对于一个好的插件代码来说，干净简答的结构能够有效的被阅读

./images/
./includes/
./themes/
./wPaint.js
./wPaint.min.js
./wPaint.css
./wPaint.min.css

非常明显，你很容易的就知道哪里去寻找文件或者jQuery类库。

6. 使用Class原型

这本身就是一个非常大的话题，因此这里我只是简单的介绍一下。基本上这里有俩个主要原因：

不实例化分离的拷贝方法就会更好高效，并且运行速度更快

只参考每一个对象方法并且不在每一个中执行拷贝能够保证节省很多内存

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

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

同时也有效组织的你代码并且更加容易重用。在上面例子中只有Canvas对象得到了实例化，其它原型函数只是参考。

7. 提供setter和getter方法

提供setter和getter方法不是必须的，但是提供给需要的开发人员还是有必要的。我们需要做的只是允许插件调用后能够修改插件。基本如下：

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

所有的我们需要做的就是检查选项被设置而不是其它。如果俩个参数都提供了，说明我们设置了，如果只有一个意味着我们要请求指定的选项。

9. 在所有的浏览器中测试