举例说明jquery插件的编写方法

摘要： jquery插件开发分为类级别开发和对象级别开发

jquery插件开发分为类级别开发和对象级别开发

类级别（$.extend）

jQuery.extend(object)类级别就是用来在jQuery类/命名空间上增加新函数，可以理解为拓展jquery类，最明显的例子是$.ajax(...),ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。开发扩展其方法时使用$.extend方法，即jQuery.extend(object);

jQuery.extend() 方法有一个重载

下面我们也来写个jQuery.extend(object)的例子：

jQuery.extend(｛
    "minValue": function (a, b) ｛
        return a < b ? a : b;
    },
    "maxValue": function (a, b) ｛
        return a > b ? a : b;
    }
});

调用:

var i = 100; j = 101;
var min_v = $.minValue(i, j); // min_v 等于 100
var max_v = $.maxValue(i, j); // max_v 等于 101

重载版本：jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法

如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构

未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制

参数:

deep: 可选。如果设为true，则递归合并。

target: 待修改对象。

object1: 待合并到第一个对象的对象。

objectN: 可选。待合并到第一个对象的对象

示例1：

//合并 settings 和 options，修改并返回 settings。
var settings = ｛ validate: false, limit: 5, name: "foo" };
var options = ｛ validate: true, name: "bar" };
jQuery.extend(settings, options);
//结果：
settings == ｛ validate: true, limit: 5, name: "bar" }

示例2：

//合并 defaults 和 options, 不修改 defaults。
var empty = ｛};
var defaults = ｛ validate: false, limit: 5, name: "foo" };
var options = ｛ validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
//结果：
settings == ｛ validate: true, limit: 5, name: "bar" }
empty == ｛ validate: true, limit: 5, name: "bar" }

这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数

对象级别

对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);

## 首先准备好一个架子

;(function($){})(jQuery);

这个架子是你编写插件代码要写入的空间，下面简单解释一下这个架子

1.自执行的匿名函数:是指形如这样的函数: 

(function ｛// code})();

在jQuery环境下封装自己的插件，首先为避免与其他库的冲突，需要在插件的后面传一个jQuery参数进去，对应的函数里面的参数写入$

2 为避免出现问题，需在插件的前后加入分号（分号的增加并不会影响程序的运行）

3.为什么```(function｛// code})();```可以被执行, 而```function｛// code}();```却会报错?

首先, 要清楚两者的区别:``` (function ｛// code})```是表达式, ```function ｛// code}```是函数声明.    

其次, js"预编译"的特点: js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.    

当js执行到```function()｛//code}();```时, 由于```function() ｛//code}```在"预编译"阶段已经被解释过, js会跳过```function()｛//code}```, 试图去执行```();```, 故会报错; 

当js执行到```(function ｛// code})();```时, 由于```(function｛// code})```是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到```();```时, 便会被执行.

另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……
例如：

//bootstrap 框架中的插件写法：
!function($)｛
　　//do something;
}(jQuery);
和
(function($)｛
　　//do something;
})(jQuery); 
是一回事

匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用

例如：

var a=1;
(function()｛
var a=100;
})();
alert(a); //弹出 1

## 再上一个架子

;(function($){
$.fn.tab = function(options){
var defaults = {
//各种参数,各种属性
}
var options = $.extend(defaults,options);
this.each(function(){ //没有必要再作 $(this) ，因为"this"已经是 jQuery 对象了.$(this) 与 $($('.tab')) 是相同的
//各种功能
});
return this; //直接写成return this.each()这里可以省略

转载于:https://my.oschina.net/u/3472227/blog/968249