jQuery 插件开发指南

如果您熟悉 JavaScript 和 jQuery , 了解 HTML DOM,想将一个功能封装为 jQuery 插件,那么,这篇 jQuery 插件开发指南 适合您来阅读。

开发方式

《jQuery高级编程》介绍说jQuery有三种插件开发方式:

  • 使用 $.extend() 来扩展jQuery ;
  • 使用 $.fn 为 jQuery 添加新的方法;
  • 使用 $.widget() 为 jQueryUI 创建插件;

第一种方式:仅在jQuery命名空间上添加了一个静态方法,调用以$.extend()方式添加的函数时,是以$符号调用的,例如 $.coolwpCustomFunc(),不需选中DOM元素,也难以与之交互,它常用来定义某些辅助方法(例如:console输出,数据过滤等)。

第二种方式:常用的 jQuery 插件开发方式;

第三种方式: 是用来开发 jQueryUI 的。

不带参数的 jQuery 插件

为 jQuery 的 fn 属性一个属性(这个属性是自定义的插件的名称),以及一个作为该属性值的匿名函数作为其绑定的方法,示例如下:

上面只是个最小的 jQuery 插件,它什么都没有做,并且可能会污染命名空间。解决方法就是使用自调用函数把它包裹起来,并把某些全局变量传递进来,以优化性能,示例如下:

 

在实参中并未传递 undefined 就是为了得到真实的 undefined

上面的这个小插件的作用是将调用它的DOM元素的字体设置为某种蓝色。把上面的代码保存在一个js文件种,比如 jquery-hello.js,然后在 html 中调用它,示例如下:

 

就可以看到效果了。

如果想对每一个选中的元素进行操作,示例如下:

 

上面的 jQuery 插件可以工作,但是,它不支持参数,这在某些情况下是不妥的,那么,我们就让它支持参数吧!

带参数的 jQuery 插件

为 jQuery 添加参数,以让它支持自定义调用,是一个很好的,也是常见的主意,因为参数可以让它更灵活。本小节将介绍如何在自定义 jQuery 插件中添加和使用参数。

上面简单提到了 $.extend 方法可用于参数过滤,这里我们会用上它,这个方法在接收到一个对象时,会将这个对象附加到 jQuery 上,自 jQuery 1.1.4 开始,它的参数是这样的:

第一个参数是个布尔值,用于确定是否是浅复制(如为真,将递归复制); 第二个参数是合并后的目标对象,它将会接收到合并后的各个属性; 第三个参数是要合并属性到目标对象的对象,如果第一个参数deep未被提供,该对象中的属性没有在目标对象中定义,将会被忽略。如果第一个参数deep未true,该对象中的属性即使未在目标对象中定义,也会被添加到目标对象中; 以后的若干个参数均为可选,参数越靠后,其所表示的对象在与目标对象合并时,其优先级越高。

当有两个或更多对象作为参数时,这些对象的属性将会添加/合并到目标对象(即第一个参数所表示的对象)上去,值为 nullundefined 的属性将会被忽略。

如果仅有一个对象作为参数,这表示目标对象被省略了, 此时, jQuery 自身将会成为目标对象.

具体参见:http://api.jquery.com/jQuery.extend/

我们就可以将参数封装在一个对象里,传递给它,然后把它赋值给插件内的一个变量,就可以在这个插件里把这个变量作为参数调用了,示例如下:

 

html示例:

 

面向对象的 jQuery 插件开发

一个强大的 jQuery 必定有较大的代码量,有较多的方法和属性,这时候,就该将这些方法和属性包装到一个对象上,以让代码结构更清晰,便于维护,并尽量小的影响命名空间,避免潜在的污染。

示例:

另外一种写法:

 

HTML 调用:

 

变量/命名以及其它一些注意事项

  • 推荐使用 JavaScript 喜欢的小驼峰命名法 ( lower CamelCase ),也就是首个单词的首字母小写,之后每个单词的首字母大写。示例:
 

  • 如上下文允许,尽量使用单引号;
  • 压缩版本与开发版本: 将通过测试的开发版本的 jQuery 插件压缩之后,在文件名称的 .js之前,加上 .min 是一种约定俗成的好习惯;

结论

jQuery 插件的构造并不复杂。


error: 错误信息!