jQuery 插件开发(1)
JavaScript 是一门混乱的语言,好的特性和坏的特性混杂在一起。而不同浏览器对标准的解析不一致,使得这门语言更加混乱,在这种情况下遵循最佳实践有诸多好处,至少不会掉入坑里。所以就有了《JavaScript: The Good Parts》这类书专门教最佳实践。可惜读完后再去看别人的 js 代码,会发觉几乎没有谁做得很标准。
一、jQuery 插件的类别
在 jQuery 中要使用一个插件,一般有两种形式:
- 类级别。例如
$.myPlugin()
- 对象级别。例如
$('#node').myPlugin()
类级别插件可以理解为拓展 jQuery 类,即给 jQuery 添加新的全局函数,典型的例子就是 $.ajax()
这个函数。jQuery 的全局函数就是属于 jQuery 命名空间的函数。另一种是对象级别的插件,即作用于指定的 jQuery 对象,典型的例子 $('.msg').show()
。
二、类级别 jQuery 插件的开发
1. 原始写法
一般在项目中我们会引入一个 js 文件,里面存放了所有的 js 代码。
只要写一些函数简单地放在文件里,就算是一个模块,直接调用就行了。
这种方法缺陷很明显,就是污染了全局空间,无法保证不与其他模块发生变量名冲突,而且方法成员之间看不出直接关系。
2. 扩展写法
使用 jQuery.extend(object) 来扩展 jQuery 类本身,可以理解为 jQuery 添加静态方法。
3. 简单写法
给 jQuery 添加一个全局函数,只需如下定义
这样就能直接用了:jQuery.foo()
或者 $.foo()
。
4. 使用命名空间
虽然上面的 2 种写法相对于原始写法要干净很多,减少了在全局空间冲突的概率,但是在 jQuery 命名空间中,仍然不可避免某些函数或变量名可能和其他 jQuery 插件冲突。因此我们习惯再封装一层,将一些方法封装到另一个自定义的命名空间。
采用命名空间的函数仍然是全局函数,使用独立的插件名我们可以避免命名空间内函数的冲突。
三、对象级别 jQuery 插件的开发
大部分 jQuery 插件都是对象级别的,开发一个对象级别插件会遇到闭包这个概念,简单起见先只看闭包的表现形式
1. 扩展写法
给 jQuery 对象添加方法,就是对 jQuery.prototype 进行扩展,为 jQuery 类添加成员方法,需要用到jQuery.fn.extend(object);
。下面是一个例子:
2. 通用写法
对象级别的插件也可以这样定义 $.fn.myPlugin = function(){}
,同样的,和类级别相比多了一个 fn。
一个通用的对象级别插件框架——
$.extend(defaults, options)
通过合并 defaults 和 options 来扩展默认参数,实现插件接受外部 options 参数的功能。于是我们就可以见到这样的用法:
3. 改进的通用写法
上面代码的一种改进是暴露插件的默认设置。这可以让插件的使用者更容易用较少的代码覆盖和修改插件。
于是我们就可以见到这样使用的
覆盖默认的配置就只需要调用一次,而不必在每次调用插件时都传递参数。是否需要传递参数,在不同的场景下可以灵活处理,两者的使用可以结合起来。
更高级的插件写法还包括暴露一些函数给使用者,让他们可以覆盖。另一方面,也可以保持私有函数的私有性。具体的代码这里就不多赘述了。学习的最好方式就是阅读别人的插件代码。
jQuery插件的种类
编写插件的目的是给已有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率。jQuery的插件主要分为以下三种类型:
1.封装对象方法的插件
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是一种最常见的插件。绝大部分的jQuery插件都是封装对象方法的插件。此类插件可以发挥出jQuery的强大优势。
2.封装全局函数的插件
可以将独立的函数加到jQuery命名空间之下。例如noConflict()方法是jQuery内部作为全局函数的插件附加到内核上去的。
3.选择器插件
极少数的情况下,需要用到选择器插件。虽然jQuery的选择器十分强大,但还是会需要扩充一些适用的选择器。
jQuery插件的基本要点
(1)jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JavaScript库插件混淆。
(2)所有对象方法都应该附加到jQuery.fn对象上,所有的全局函数都应当附加到jQuery对象本身上。
(3)插件内部,this指向的是当前通过选择器获取的jQuery对象,对于一般的方法,内部的this指向的是DOM元素。
(4)可以通过this.each来遍历所有元素。
(5)所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现问题。为了更稳妥些,甚至可以在插件头部先加上一个分号,以免他人的不规范的代码给插件带来影响。
(6)通常情况下,插件应该返回一个jQuery对象,以保证插件能够链式操作。
(7)避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,这样可以避免冲突。当然可以用笔包这种技巧来回避这个问题,使插件内部继续使用$作为jQuery的别名。常见的jQuery插件的结构如下:
- //为了更好的兼容性,开始前加分号
- ;(function($){
- /*这里放置代码,可以使用$作为jQuery对象别名*/
- })(jQuery);//这里将jQuery作为实参传递给匿名函数
jQuery插件的机制
jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。这两个方法都接受一个参数,类型为Object。Object的”键/值对”分别代表“函数方法名/函数主体”。
1.jQuery.extend()
可以用于扩展后两种插件。该方法是对jQuery对象的扩展,可以理解为静态方法,不需要实例jQuery就可以使用,代码如下:
- jQuery.extend({
- add : function(a, b){
- return a + b;
- }
- });
- alert($.add(2, 3)); //7
jQuery.extend()方法除了可以用于扩展jQuery对象之外,还能用于扩展已有的Object对象。如合并settings对象和options对象,修改并返回settings对象,代码如下:
- var defaults = {name:'ZhangSan', sex:'男', age:20};
- var options = {name:'LiSi', age:22};
- var newOpts = $.extend(defaults, options);
- //结果newOpts = {name:'LiSi', sex:'男', age:22};
2.jQuery.fn.extend()
用于扩展之前提到的三种类型插件中的第一种。该方法是对jQuery元素的扩展,只能用在jQuery元素上,可以理解为普通方法,即获取了相应的jQuery对象才能调用。定义插件时需要返回this,以支持jQuery的链式操作,代码如下:
- $.fn.extend({
- color : function(c){
- this.css("color", c);
- }
- });
- alert($('#test').color('red'));
编写jQuery插件
常见jQuery插件的结构如下:
- ;(function($){
- //这里编写插件的代码,可以继续使用$作为jQuery的别名
- //定义一个局部变量foo,仅方法内部可以访问
- var foo;
- var bar = function(){
- /*
- 在匿名函数内部的函数都可以访问foo,即使在外部调
- 用bar()的时候,也可以在bar()的内部访问foo,但
- 无法在匿名函数外部直接访问foo
- */
- }
- /*
- 下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围,
- 这样就可以在匿名函数的外部通过$.BAR()来访问内部定义的函数
- bar(),并且内部函数bar()也能访问foo
- */
- $.BAR = bar;
- })(jQuery);
1.封装jQuery对象方法的插件
这里主要是为了说明编写jQuery插件的过程和注意事项,就以一个简单的实例(设置和获取颜色)来说明。
1)插件功能说明
(1)设置匹配元素的颜色。
(2)获取匹配元素的颜色。
2)将该插件按规范命名为jquery.color.js。
3)在JS文件中搭好框架,由于是对jQuery对象的方法扩展,因此采用扩展插件方法jQuery.fn.extend()来编写,代码如下:
- ;(function($){
- $.fn.extend({
- color : function(c){
- //这里写插件的代码
- }
- });
- })(jQuery);
4)编写插件的实现代码如下:
- ;(function($){
- $.fn.extend({
- color : function(c){
- if(c == undefined){//如果不传值,则获取字体颜色
- return this.css("color");
- } else { //如果传值,则设置字体颜色
- return this.css("color", c);
- }
- }
- });
- })(jQuery);
这样,一个简单的jQuery插件算是完成了。
2.封装全局函数的插件
这类插件是在jQuery命名空间内部添加一个函数。这类插件只是普通的函数。
例如新增两个函数,分别用于去除左侧和右侧的空格,代码如下:
- ;(function($){
- $.extend({
- ltrim : function(text){
- return (text || "").replace(/^\s+/g, "");
- },
- rtrim : function(text){
- return (text || "").replace(/\s+$/g, "");
- }
- //(text || "")部分是用于放置传递进来的text这个字符串变量是未定义的状态
- //当text是undified,则返回字符串"",否则返回字符串text
- });
- })(jQuery);