jQuery插件开发基础：类方法与对象级方法实现详解

jQuery插件开发概述

一、开篇分析

大家好！本系列文章旨在探讨基于JavaScript的插件式开发模式。

尽管“插件”这一概念在业界常被称作“组件”或“部件”，但命名的差异并非重点，核心在于如何设计架构并进行全方位的综合考量，这也是本文着重阐述的内容。

鉴于大家可能对“jQuery插件”的开发方式已有一定了解，我们将结合这一话题展开讨论，最终提供具体的实现方案，旨在提升大家的编码能力。

插件开发的核心模式

二、进入插件正题

通常，jQuery插件的开发主要包含两种模式：第一种是挂载在jQuery命名空间下的全局函数，也称为静态方法。

第二种是挂载在jQuery原型上的对象级方法，使得通过选择器获取的jQuery对象实例能够共享该方法。

类级别插件开发

（1）类级别的插件开发

类级别插件开发最直观的理解是为“jQuery”类添加类方法，即静态方法。典型的例子如“$.ajax()”函数，该函数定义在jQuery的命名空间内。关于类级别插件的开发，可采用以下几种扩展形式：

1.1 添加一个全局函数，定义方式如下，请看代码：

$.hello = function(){
alert("Hello,大熊君！") ;
} ;

1.2 添加多个全局函数，可采用如下定义：

$.extend({
hello : function(name){
// put your code here
    } ,
world : function(){
// put your code here
    }
}) ;

说明：”$.extend(target, [object1], [objectN])“（该方法主要用于合并两个或更多对象的内容(属性)到第一个对象，并返回合并后的第一对象。

如果该方法只有一个参数target，则该参数将扩展jQuery的命名空间，即作为静态方法挂在jQuery全局对象下）。

对象级别插件开发

（2）对象级别的插件开发

对象级别的插件开发需要如下的两种形式：

2.1通过“$.fn.extend()”为原型动态挂载相关的属性。

(function($){
$.fn.extend({
pluginName : function(opts){
// put your code here
        }   
    }) ;   
})(jQuery) ;

2.2直接添加动态属性到原型链上。

(function($) {
$.fn.pluginName = function(){
// put your code here
     } ;   
})(jQuery) ;

说明一下：二者是等价的，对于一个jQuery插件，一个基本的函数就可以很好地工作，但是对于复杂一点的插件就需要提供各种各样的方法和私有函数。

你可能会使用不同的命名空间去为你的插件提供各种方法，但是添加过多的命名空间反而会使代码变得混乱，健壮性下降。所以最好的解决办法是适当地定义私有函数和方法。

所以我们通过自执行函数与闭包的结合实现模拟的私有插件单元，就像我们上面的实例中一样。

插件实现示例与最佳实践

（三），下面给一个简单的例子看看实现的过程：

（1），“html”片段代码，如下：

<div id="bb" style="width:220px;border:1px solid #ccc;">
<span></span>
<div
style="margin-top:10px;
margin-bottom:30px;"
>8 </div>
</div>

（2），“data.json”定义如下：

　　{
"text" : "你好，大熊君{{bb}} ！" ;
　　}

（3），"bb.js"代码如下：

$(function(){
"#bb").bigbear() ;
}) ;
(function($){
$.fn.bigbear = function(opts){
opts = $.extend({},$.fn.bigbear.defaults,opts) ;
return this.each(function(){
var elem = $(this) ;
elem.find("span").text(opts["title"]) ;
$.get(opts["url"],function(data){
elem.find("div").text(data["text"]) ;
            }) ;
        }) ;
    } ;
$.fn.bigbear.defaults = {
title : "这是一个简单的测试" ,
url : "data.json"
    } ;
})(jQuery) ;

运行效果：

小结一下：

（1）“$.fn.bigbear.defaults”提供插件的默认参数选项一个扩展性良好的插件应该是可以让使用者根据需求自定义参数选项，并控制插件的行为，所以提供恢复默认选项是很有必要的。你可以通过jQuery的extend方法来设置这些选项。

（2），“return this.each(){...}”遍历多个元素并返回jQuery使用Sizzle选择器引擎，Sizzle可以为你的函数提供多元素操作（例如对所有类名相同的元素）。这是jQuery几个优秀的特性之一，在开发插件过程中即使你不准备为你的插件提供多元素支持，但为这做准备仍然是一个很好的方式。另外，jQuery有一个很好的特点就是可以进行方法级联，也可称为链式调用，所以我们不应该破坏这个特性，始终在方法中返回一个元素。

开发规范总结

（四），最后总结

（1），jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend(object); 给jQuery对象添加方法。 jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

（2），把全部代码放在闭包(一个即时执行函数)里此时闭包相当于一个私有作用域，外部无法访问到内部的信息，并且不会存在全局变量的污染情况。官方创建开发规范的解释是：a) 避免全局依赖；b) 避免第三方破坏；c) 兼容jQuery操作符'$'和'jQuery '。

（3），提供插件的默认参数选项一个扩展性良好的插件应该是可以让使用者根据需求自定义参数选项，并控制插件的行为，所以提供恢复默认选项是很有必要的。你可以通过jQuery的extend方法来设置这些选项

（4），遍历多个元素并返回jQuery使用Sizzle选择器引擎，Sizzle可以为你的函数提供多元素操作（例如对所有类名相同的元素）。这是jQuery几个优秀的特性之一，在开发插件过程中即使你不准备为你的插件提供多元素支持，但为这做准备仍然是一个很好的实践。另外，jQuery有一个很好的特点就是可以进行方法级联，也可称为链式调用，所以我们不应该破坏这个特性，始终在方法中返回一个元素。

（5），一次性代码放在主循环以外这一条很重要，但是常常被忽略。简单的讲，如果你有一段代码是一堆默认值，只需要被实例化一次，而不是每次调用你插件功能的时候都需要实例化，你应该把这段代码放在插件方法的外面。

（6），大家学习完思考一下，如果项目技术选型换了这些插件又是强依赖“jQuery”机制，我们以前写的插件将会不能用（假设不用jQuery的情况），如何做重构那？

明天的文章就会说一下这个问题，并且将会重构插件的关键逻辑，敬请期待。。。