Please enable Javascript to view the contents

jQuery插件开发

 ·  ☕ 2 分钟

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参数

微信公众号
作者
微信公众号