天天看点

如何制作JQuery Plugin 插件

好了,下面有一些我觉得想做一个好的插件必须应有的要求:

1、在JQuery命名空间下声明只声明一个单独的名称

2、接受options参数,以便控制插件的行为

3、暴露插件的默认设置 ,以便外面可以访问

4、适当地将子函数提供给外部访问调用

5、保持私有函数

6、支持元数据插件

下面将逐条地过一遍:

这表明是一个单独的插件脚本。如果你的脚本包含多个插件或者是互补的插件(像$.fn.doSomething()和$.undoSomething()),那么你可以根据要求声明多个名称。但一般情况下,力争用单一的名称来维持插件现实的所有细节。

在本例中,我们将声明一个叫“hilight”的名称

作为插件的提升和优化,我们应该将上面的代码暴露出来作为插件的默认设置。

这非常重要,这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势:

这里值得注意的是$.extend()第一个参数是一个空的对象,这样可以让我们重写插件的默认设置

用户可以像这样使用插件:

这个例子延续前面的例子,你会发现有一个有趣的方法可以扩展你的插件(然后还可以让其他人扩展你的插件 :))。例如,我们在插件里声明了一个函数叫“format”用来高这显示文本,我们的插件实现代码可能是这样子的:

暴露插件有部分内容提供重写看上去似乎非常强大,但是你必须认真地考虑你的插件哪一部分是需要暴露出来的。一旦暴露出来,你就需要考虑这些变化点,一般情况下,如果你没有把握哪部分需要暴露出来,那么你可以不这样做。

那如何才能够定义更多的函数而不将其暴露出来呢?这个任务就交给闭包吧。为了证实,我们在插件中添加一个函数叫“debug”,这debug函数将会记录已选择的元素数量到FireBug控制台中。为了创建闭包,我们将插件定义的整部分都包装起来:

依赖于所写的插件类型,并支持元数据插件会使得其本身更加强大。个人来讲,我喜欢元素据插件,因为它能让你分离标签中重写插件的配置(这在写demo和示例时特别有用)。最重要的是,想现实它特别的容易!

几行的变化完成了以下几件事:

1、检测元数据是否已经配置

2、如果已配置,将配置属性与额外的元数据进行扩展

然后我们通过一句脚本就可以根据元数据配置分开地高亮显示这些div标签:

最后,将全部代码放在一起:

<a href="http://11011.net/software/vspaste"></a>

并在本文中更新了最后的代码

<b>作者赞赏</b>

<a href="http://union.dangdang.com/transfer.php?from=P-262177&amp;ad_type=10&amp;sys_id=1&amp;backurl=http%3A%2F%2Fbook.dangdang.com%2F">当当计算书籍 5-8折</a>

本文转自Sam Lin博客博客园博客,原文链接:http://www.cnblogs.com/samlin/archive/2010/04/18/How-To-Develop-JQuery-Plugin.html,如需转载请自行联系原作者

继续阅读