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

这篇文章我们将分享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
}

 这里你需要注意五点：

1.  缺省的配置需要在插件外面，这样不需要每次都实例化一次
2. setter和getter方式并不是必须的，但是需要在每次运行主循环时做检查
3. 返回每个元素不能够破坏jQuery方法链流程
4. 保存任何数据都使用data()，我们可能在后面的setter和getter中需要使用
5. 最后在主循环外面设置任何class/原型

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. 在所有的浏览器中测试

这对于插件开发来说，绝对的重要。你可能对你的代码并不挑剔，但是你的用户肯定关心，如果他们有很多抱怨，你的插件估计很快被替换。例如，我在我的 jQuery color picker插件中发现了一些bug，使得在IE7下完全无法使用。其实只需要一个简答的修复，因为IE7不支持“inline-block”元素。

这个步骤可能在你完成一个插件后显得微不足道。但是最好保证你会花一天时间对你的插件进行浏览器兼容性测试。这个过程中，可能不单单是测试bug，有可能帮助你提升你的插件的用户体验

10. 上传你的插件

很多类似的服务，我推荐Google和Github

可能你不希望公开你的插件，特别如果它是为一个内部项目开发的，但是也需要使用你的内部版本控制软件，以便更好的维护文章和版本。

当然，如果你可以公开你的插件，以上俩个地方是不错的选择，你可以有效的跟踪问题，查看活跃的feed及其下载数量。帮助你有效的和你的用户互动。