jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2015-09-20 08:33 我要评论( )

这可能是一个基本的原则。当你在犹豫是否需要提供一个方法的时候,你可以问你自己 “如果其他人要重写这个方法的话,你的代码是否能满足他的需求?”或者“别人来写这个方法有多困难?”。当然这是一个灵活性拿捏的问

这可能是一个基本的原则。当你在犹豫是否需要提供一个方法的时候,你可以问你自己 “如果其他人要重写这个方法的话,你的代码是否能满足他的需求?”或者“别人来写这个方法有多困难?”。当然这是一个灵活性拿捏的问题。这里列出了我的 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插件开发的核心,并且可以作为开发的模板。有一套基本的代码可以极大的缩短你的开发时间,并且能够让你设计插件架构的时候更自信。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
e