编写超酷jQuery插件的10点建议

简介

我已经对开发插件学习了研究了一段时间了,很多精力都是在jquery插件上,通过开发插件的过程,让我学习到很多关于他们如何工作的原理。市面上有一大堆的插件看起来很炫很酷，但是有一不分他们的幕后的代码实现很令人沮丧。有很多插件只是多花费了一点精力，就从原先的优秀变成了卓越，因而获得更广泛的应用。

这里有一些我收集正理的简单建议，可以帮助开发者们写出真正的卓越插件，（而不是只有华丽的展现，幕后代码实现很糟糕的插件）。有些建议在当前的插件里效果体现的不是很明显，但是他们不仅仅是帮助你们开发Jquery插件，也能对你们将来维护拓展大有益处。

同样值得注意的是，你有一个良好的代码结构和方针，会加快插件的开发速度，因此有必要花费一些时间来思考如何开始你的项目。你会知道，以后只需要编写插件的核心代码而不用担心任何其他的细节。

1. 让你的插件劲量简单的就能使用起来(Plugins Should Work Out of the Box)

第一条建议可能翻译的不是很好,大家见谅。

这是我最大的挫折当开始使用插件的时候，所以我把它列为第一条。你的插件应该在不需要额外的步骤或结构定义的情况下就能使用。插件应该有一个最小限度的最基础的默认配置，除了一个初始化的操作，不需要其他的必要操作。

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

一个jquery的幻灯片效果的插件是一个很好的例子,它有一个sliders接口和next/prev按钮.我见过的插件会让你设置一个div,指定一个合适的id和class然后让你通过插件函数去索引它。像这些事情，完全可以直接内建 并 提供一个可以配置项来控制,是否开启它。

2.总是提供默认配置

非常罕见的，你的插件包含绝对不需要配置的设置。接着第一条建议，你应该总是尽量找多更多的配置项，并且非他们提供默认值。这将会增加开发会使用你的插件的机会，增加开发者们传播关于你插件的消息。

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

上面的代码是一个标准的方法。可以设置你的默认值，并且继承开发者们传进来的任何配置。

3. 保持所有的命名唯一性。

当你开发你的插件的时候，你应该始终留心保持任何一个插件里的索引的唯一性。这包括使用的css类，id，插件本身的名字等。这条建议绝对不需要耗费你更多的精力，并且能帮你避免和现有javaScript代码和css代码的冲突。

$("#container").tooltip();    //bad   
$("#container").wTooltip();   //good

上面的例子中，我们通过给插件添加了一个前缀字母“w”，来保持我们插件名字的唯一性，来区别其他可能已经存在的命名，在css代码里我也保持命名的唯一性，确保和通用术语，例如：tab，holder等包含的关键字的唯一性。

_wPaint_button
_wPaint_holder

我也喜欢通过添加下划线来确保id和css类class没有冲突的机会，给我更多的信心我的jquery插件将会成功。

4. 让你的插件结构化。（The Standard Plugin Layout in a Nutshell)

这是一个非常漂亮的标准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. Setters和getters方法不是总是必须的 但是应该在每次循环之前做一次检查。（jquery里有很多setter和getter方法 例如val(),width(),hieght(),html(),等方法都是,在提供参数的时候,会赋值才做,没有参数的时候会返回值.）
3. 返回每一个元素是不要破环jquery下面的方法链
4. 保存元素的数据的时候用 .data(),我们可能在后面会需要它。
5. 最后的任何的Classes/Prototypes的步骤，放在循环结束后的外面。

5. 保持你的代码有组织性。

尽管这条建议我看起来很明显,但是我见过太多的插件的组织性很怪异糟糕。一个好主意就是让你文件有一个简单的如下的结构，好的文件结构本身就是一种说明。

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

这是一个非常清晰的组织，包含哪些文件，其他插件的文件或者jquery库文件等可以很方便的查看它们。

6.使用原型（use class prototype）

这在js脚本编程里面，已经是一个很大的话题了，所以在这里我就简略的提及一下。主要有两大原因让你在编程时使用原型。
1. 不必为每一个方法都实例化一个复本，这样带来更高的效率和运行速度。
2. 因为每一个对象的方法只是索引原型，而不是为每一个对象的方法制造一个复本，从而节省了大量的内存。

function Canvas(settings)
{
    this.canvas = null;    
    this.ctx = null;
}
 
Canvas.prototype =
{
    generate: function()
    {
        //generate code
    }
}

使用原型同样可以是你的代码更规范化、有组织性，更能增强复用性。在上面的例子中，Canvas对象在实例化的时候，仅仅只是把每一个原型索引到实例化对象中。

7.提供getter和setter方法

虽然提供getter和setter方法不是必须的，但是我发现为需要他们的开发者提供他们，是一个很好的选择。这里我们所做的是房插件被调用之后，可以被修改。大体操作步骤如下：

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

在这里我们所做的是检查是否是一个set操作，而不是一些配置信息。如果提供了两个参数，意味着我们正在执行set操作，如果提供一个参数，意味着我们正在索取执行的选项信息。（这段可能翻译的不是很好，自己也蒙蒙的，感觉作者在这里举的例子不是很合适，jquery很多setter和getter方法，例如：val（），width（），height（）。css（“”someting“）等，都是提供参数就是setter，不提供就是getter。）

8.在所有浏览器中测试你的插件。

在所有的浏览器中测试关系到你的插件的生死存亡，一些开发者们可能会不在乎自己插件的一些小bug，但是如果代码有很多bug，插件的使用者们肯定会很快把插件替换掉。举个例子，在的插件jQuery Color Picker Plugin里面，我发现一些bug，竟然导致我的插件不能在ie7下使用，它只需要很简单的一个修正，ie7开始，不支持浮动元素以“inline-block”方式显示。
当你感觉插件完成想要运行的时候，一个很让人烦恼的事情。确保你能坚持住，多花费一天的时间在尽可能多的场景下测试你的插件，这不仅仅是修复一些简单的bug，同时也是一种提高于完善。

9.发布的时候记得打包。

如果你的代码已经完善,就绪,准备发布,那么请话费一些时间做下面这简单的三个步骤.
1. 对核心分部写一些说明文档,不止是为了别的开发者,你自己将来也会需要他.
2.为你的插件指定版本,文件命,或者文档里都可以.在那里无所谓,只能开发者们能知道他们在使用哪个版本,一般以后更新.
3. 最后提供一个你代码的压缩版,这仅仅只是话费几分钟的时间,加上它,开发者们使用的时候会更高兴,会有更多的回头客.
最后开发者们决定用不用你的插件的时候,有时候这些简单的步骤,真的会改变你的插件,所以确保让开发者们使用你的插件的时候尽量的高兴.

10.上传你的插件.

网上有很多可以使用的服务, 我倾向于Gitub和google code,(译者当然是csdn了)
你不一定上传插件总是为了公共使用,特别是在一个内部的项目使用中,请确保他们都在各自的代码库里面,不要让他们的版本混淆.这将确保你的插件能在正确的文档和版本里维护.
如果你的插件正的需要公共发布,我还是建议我上面提到的Gitub和google code,他们提供的发行报告,访问统计,下载统计是很好的.这让你可以和用户互动,你可以通过查看总下载量来估计你的插件的干的如何,这些服务是安装步骤非常简单,提供了很多参考设置.

结束语:

这些建议全部覆盖了影响你的jquery插件生命周期的核心内容,
它(指上面的10条建议)也提供了一些开发者们通常使用的标准代码格式可以借鉴,无论你开发插件是为了兴趣更多还是专业更多,它会让你的插件在使用的时候更让人觉得满意.

原文连接:http://www.queness.com/post/10828/10-tips-for-writing-awesome-jquery-plugins

说明一下:
我知道翻译的很烂,希望大家不要喷,我的目的是大家一起学习一起进步,我在学习英语,也在做jquery开发.所以说翻译一些这样的文章对我是很有好处的.
翻译不对的地方希望大家能指正.