快速开发jQuery插件的10大技巧

　　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插件开发的核心，并且可以作为开发的模板。有一套基本的代码可以极大的缩短你的开发时间，并且能够让你设计插件架构的时候更自信。