jQuery插件开发

1. jQuery特征

• jQuery消除了浏览器的兼容问题
• 遍历DOM树、选择元素
• 大量的插件库
• 工具函数库，$.type()、$.extent()等

jQuery的核心函数，通常指的是一个工厂对象，即jQuery()函数，或者更为常用的别名$()函数。jQuery除了jQuery和$之外，不会污染全局名称空间。jQuery插件的命名：通常采用jquery.pluginName.js命名，min版也采用与之类似的命名规范jquery.pluginName.min.js

2. jQuery扩展方式

2.1 jQuery函数prototype属性的别名（jquery.fn）进行扩展

fn/prototype 是实时的。无论何时，新增的属性和方法，任何从该类型创建的对象都可以立即访问这些属性和方法。

1
2
3

jQuery.fn.newFunction = function(){
    console.log("This is a simple case");
}

2.2 jQuery.extend() 方法

$.extend方法最基本的功能是合并两个对象。调用 $.extend方法时，如果只传入一个参数，那么该参数将被合并到jQuery中。

1
2
3
4
5

jQuery.extend({
    newFunction:function(){
    console.log("This is a simple case");
   }
});

2.3 jQuery UI Widget Factory 扩展

Widget Factory是一个jQuery方法，接受两个或者三个参数：第一个参数是名称空间，第二个参数是一个已有的widget原型，它将从该原型继承，第三个参数是可选的对象字面量，作为新widget原型。

1

jQuery.widget('namespace.newFunction',{});

3. 需要关注的地方

• this。在jQuery插件的上下文中，this指的是jQuery本身，而不是当前操作的DOM。唯一的例外是$.each循环体内，this才指向DOM。
• 确保$指向jQuery。(function($){ })(jQuery)。
• 不要省略分号。 避免最小化时，异常。
• 尽可能返回jQuery对象，支持链式语法。

4. 最佳实践

• 使用jQuery插件模式
• 在只为插件声明单个名称，对外暴露唯一接口
• 插件只接受一个Options参数