不管你是前端程序员，还是后端程序员，无人不知JQuery，无人不晓JQuery。她的好处想必大家都知道，很多人喜欢使用JQuery，最主要的就是她极大的简化了原生Javascript的开发，并且对于我们程序员来说非常简单易用、上手快。但是，用了好久的JQuery，我想你只是知道怎么使用她原有的方法和别人基于JQuery写好的插件，而你知道怎么来扩展她，自己写一个JQuery插件吗？那么今天我们就来讨论一下JQuery插件是如何编写的？

首先我们写一个给字体加红的一个扩展方法：

字体加红

那么接下来看看我们怎么使用这个扩展方法：

链式调用，给字体加红

这是一个非常简单的扩展方法，那么接下来我们一步一步的解析上面的代码。

---

一、JQuery的插件机制

为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：

重载版本：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" }

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

jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

首先我们来看fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {.....};

};

原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。

二、自执行的匿名函数/闭包

1. 什么是自执行的匿名函数?

它是指形如这样的函数: (function {// code})();

2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?

3. 分析

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

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

(3). 当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

三、一步一步封装JQuery插件

接下来我们一起来写个高亮的jqury插件

1.定一个闭包区域，防止插件"污染"

//闭包限定命名空间

(function($) {

})(window.jQuery);

2.jQuery.fn.extend(object)扩展jquery 方法，制作插件

3.给插件默认参数，实现 插件的功能

到这一步，高亮插件基本功能已经具备了。调用代码如下：

这里只能 直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：

$('#id').css({marginTop:'100px'}).addAttr("title","测试“);

但是我们上面的插件，就不能这样链式调用了。比如：$("p").highLight().css({marginTop:'100px'}); //将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）

4.暴露公共方法 给别人来扩展你的插件（如果有需求的话）

比如的高亮插件有一个format方法来格式话高亮文本，则我们可将它写成公共的，暴露给插件使用者，不同的使用着根据自己的需求来重写该format方法，从而是高亮文本可以呈现不同的格式。

5.插件私有方法

有些时候，我们的插件需要一些私有方法，不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。

6.其他的一些设置，如：为你的插件加入元数据插件的支持将使其变得更强大。

完整的高亮插件代码如下：

调用