Fork me on GitHub

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 代码。

<script type="text/javascript" src="http://www.lovelucy.info/all.js"></script>

只要写一些函数简单地放在文件里，就算是一个模块，直接调用就行了。

   function m1(){
　　　　//...
　　}
　　function m2(){
　　　　//...
　　}

这种方法缺陷很明显，就是污染了全局空间，无法保证不与其他模块发生变量名冲突，而且方法成员之间看不出直接关系。

2. 扩展写法

使用 jQuery.extend(object) 来扩展 jQuery 类本身，可以理解为 jQuery 添加静态方法。

$.extend({
　　addMethod : function(a, b){return a + b;}
});
// $.addMethod(1, 2); //return 3

3. 简单写法

给 jQuery 添加一个全局函数，只需如下定义

jQuery.foo = function() {
    alert('test');
    // other code...
};

这样就能直接用了：jQuery.foo() 或者 $.foo() 。

4. 使用命名空间

虽然上面的 2 种写法相对于原始写法要干净很多，减少了在全局空间冲突的概率，但是在 jQuery 命名空间中，仍然不可避免某些函数或变量名可能和其他 jQuery 插件冲突。因此我们习惯再封装一层，将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {
    foo:function() {
        alert('test');
    },
    bar:function(param) {
        alert('test "' + param + '".');
    }
};
// $.myPlugin.foo();
// $.myPlugin.bar('hello');

采用命名空间的函数仍然是全局函数，使用独立的插件名我们可以避免命名空间内函数的冲突。

三、对象级别 jQuery 插件的开发

大部分 jQuery 插件都是对象级别的，开发一个对象级别插件会遇到闭包这个概念，简单起见先只看闭包的表现形式

(function($){  
    // your codes  
})(jQuery);

1. 扩展写法

给 jQuery 对象添加方法，就是对 jQuery.prototype 进行扩展，为 jQuery 类添加成员方法，需要用到jQuery.fn.extend(object); 。下面是一个例子：

$.fn.extend({ 
    getInputText:function(){ 
        $(this).click(function(){ 
            alert($(this).val()); 
        }); 
    } 
});
//$("#username").getInputText();

2. 通用写法

对象级别的插件也可以这样定义 $.fn.myPlugin = function(){}，同样的，和类级别相比多了一个 fn。

一个通用的对象级别插件框架——

(function($){ 
    $.fn.myPluginName = function(options){ 
        var defaults = {} //各种属性和参数
        var options = $.extend(defaults, options); 
        this.each(function(){ 
            //插件的实现代码
        }); 
    }; 
})(jQuery);

$.extend(defaults, options) 通过合并 defaults 和 options 来扩展默认参数，实现插件接受外部 options 参数的功能。于是我们就可以见到这样的用法：

$('#myDiv').hilight({
    foreground: 'blue'
});

3. 改进的通用写法

上面代码的一种改进是暴露插件的默认设置。这可以让插件的使用者更容易用较少的代码覆盖和修改插件。

(function($){ 
    $.fn.myPluginName = function(options){
        var options = $.extend({}, $.fn.myPluginName.defaults, options);
        this.each(function(){
            //插件的实现代码
        }); 
    };
    // 暴露的默认参数
    $.fn.myPluginName.defaults = {};
})(jQuery);

于是我们就可以见到这样使用的

$.fn.hilight.defaults.foreground = 'blue';
$('#myDiv').hilight();

覆盖默认的配置就只需要调用一次，而不必在每次调用插件时都传递参数。是否需要传递参数，在不同的场景下可以灵活处理，两者的使用可以结合起来。

更高级的插件写法还包括暴露一些函数给使用者，让他们可以覆盖。另一方面，也可以保持私有函数的私有性。具体的代码这里就不多赘述了。学习的最好方式就是阅读别人的插件代码。

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插件的结构如下：

[javascript] view plaincopyprint?
  1. //为了更好的兼容性，开始前加分号  
  2. ;(function($){  
  3.     /*这里放置代码，可以使用$作为jQuery对象别名*/  
  4. })(jQuery);//这里将jQuery作为实参传递给匿名函数  

 

jQuery插件的机制

jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。这两个方法都接受一个参数，类型为Object。Object的”键/值对”分别代表“函数方法名/函数主体”。

1.jQuery.extend()

可以用于扩展后两种插件。该方法是对jQuery对象的扩展，可以理解为静态方法，不需要实例jQuery就可以使用，代码如下：

[javascript] view plaincopyprint?
  1. jQuery.extend({  
  2.     add : function(a, b){  
  3.         return a + b;  
  4.     }    
  5. });  
  6. alert($.add(2, 3)); //7  

 

jQuery.extend()方法除了可以用于扩展jQuery对象之外，还能用于扩展已有的Object对象。如合并settings对象和options对象，修改并返回settings对象，代码如下：

[javascript] view plaincopyprint?
  1. var defaults = {name:'ZhangSan', sex:'男', age:20};  
  2. var options = {name:'LiSi', age:22};  
  3. var newOpts = $.extend(defaults, options);  
  4. //结果newOpts = {name:'LiSi', sex:'男', age:22};  

 

2.jQuery.fn.extend()

用于扩展之前提到的三种类型插件中的第一种。该方法是对jQuery元素的扩展，只能用在jQuery元素上，可以理解为普通方法，即获取了相应的jQuery对象才能调用。定义插件时需要返回this，以支持jQuery的链式操作，代码如下：

[javascript] view plaincopyprint?
  1. $.fn.extend({  
  2.         color : function(c){  
  3.             this.css("color", c);  
  4.         }  
  5.     });  
  6. alert($('#test').color('red'));  

 

编写jQuery插件

常见jQuery插件的结构如下：

[javascript] view plaincopyprint?
  1. ;(function($){  
  2.     //这里编写插件的代码，可以继续使用$作为jQuery的别名  
  3.     //定义一个局部变量foo，仅方法内部可以访问  
  4.     var foo;  
  5.     var bar = function(){  
  6.         /* 
  7.             在匿名函数内部的函数都可以访问foo，即使在外部调 
  8.             用bar()的时候，也可以在bar()的内部访问foo，但 
  9.             无法在匿名函数外部直接访问foo 
  10.         */     
  11.     }  
  12.     /* 
  13.         下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围， 
  14.         这样就可以在匿名函数的外部通过$.BAR()来访问内部定义的函数 
  15.         bar()，并且内部函数bar()也能访问foo 
  16.     */  
  17.     $.BAR = bar;  
  18. })(jQuery);  

 

1.封装jQuery对象方法的插件

这里主要是为了说明编写jQuery插件的过程和注意事项，就以一个简单的实例（设置和获取颜色）来说明。

1）插件功能说明

（1）设置匹配元素的颜色。

（2）获取匹配元素的颜色。

2）将该插件按规范命名为jquery.color.js。

3）在JS文件中搭好框架，由于是对jQuery对象的方法扩展，因此采用扩展插件方法jQuery.fn.extend()来编写，代码如下：

[javascript] view plaincopyprint?
  1. ;(function($){  
  2.     $.fn.extend({  
  3.         color : function(c){  
  4.             //这里写插件的代码  
  5.         }  
  6.     });  
  7. })(jQuery);  

 

4）编写插件的实现代码如下：

 

[javascript] view plaincopyprint?
  1. ;(function($){  
  2.     $.fn.extend({  
  3.         color : function(c){  
  4.             if(c == undefined){//如果不传值，则获取字体颜色  
  5.                 return this.css("color");  
  6.             } else { //如果传值，则设置字体颜色  
  7.                 return this.css("color", c);  
  8.             }  
  9.         }  
  10.     });  
  11. })(jQuery);  

 

 

这样，一个简单的jQuery插件算是完成了。

 

2.封装全局函数的插件

这类插件是在jQuery命名空间内部添加一个函数。这类插件只是普通的函数。

例如新增两个函数，分别用于去除左侧和右侧的空格，代码如下：

[javascript] view plaincopyprint?
  1. ;(function($){  
  2.     $.extend({  
  3.         ltrim : function(text){  
  4.             return (text || "").replace(/^\s+/g, "");  
  5.         },  
  6.         rtrim : function(text){  
  7.             return (text || "").replace(/\s+$/g, "");  
  8.         }  
  9.         //(text || "")部分是用于放置传递进来的text这个字符串变量是未定义的状态  
  10.         //当text是undified，则返回字符串""，否则返回字符串text  
  11.     });  
  12. })(jQuery);  

 

 

posted @ 2013-12-25 14:50  迁梦余光  阅读(264)  评论(0)  编辑  收藏  举报