不管你是前端程序員，還是后端程序員，無人不知JQuery，無人不曉JQuery。她的好處想必大家都知道，很多人喜歡使用JQuery，最主要的就是她極大的簡化了原生Javascript的開發(fā)，并且對于我們程序員來說非常簡單易用、上手快。但是，用了好久的JQuery，我想你只是知道怎么使用她原有的方法和別人基于JQuery寫好的插件，而你知道怎么來擴展她，自己寫一個JQuery插件嗎？那么今天我們就來討論一下JQuery插件是如何編寫的？
首先我們寫一個給字體加紅的一個擴展方法：
那么接下來看看我們怎么使用這個擴展方法：
這是一個非常簡單的擴展方法，那么接下來我們一步一步的解析上面的代碼。
一、JQuery的插件機制
為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
jQuery.extend(object) ,一個參數(shù)的用于擴展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的 ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點像 “類名.方法名” 靜態(tài)方法的調(diào)用方式。下面我們也來寫個jQuery.extend(object)的例子：
重載版本：jQuery.extend([deep], target, object1, [objectN])
用一個或多個其他對象來擴展一個對象，返回被擴展的對象。
如果不指定target，則給jQuery命名空間本身進行擴展。這有助于插件作者為jQuery增加新方法。
如果第一個參數(shù)設(shè)置為true，則jQuery返回一個深層次的副本，遞歸地復制找到的任何對象。否則的話，副本會與原對象共享結(jié)構(gòu)。
未定義的屬性將不會被復制，然而從對象的原型繼承的屬性將會被復制。
參數(shù)
deep:可選。如果設(shè)為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);
結(jié)果：
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);
結(jié)果：
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
這個重載的方法，我們一般用來在編寫插件時用自定義插件參數(shù)去覆蓋插件的默認參數(shù)。
jQuery.fn.extend(object)擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。
首先我們來看fn 是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {.....};
};
原來 jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。那jQuery.fn.extend()方法就是擴展jQuery對象的原型方法。我們知道擴展原型上的方法，就相當于為對象添加”成員方法“，類的”成員方法“要類的對象才能調(diào)用，所以使用jQuery.fn.extend(object)擴展的方法， jQuery類的實例可以使用這個“成員函數(shù)”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區(qū)分開來。
二、自執(zhí)行的匿名函數(shù)/閉包
1. 什么是自執(zhí)行的匿名函數(shù)?
它是指形如這樣的函數(shù): (function {// code})();
2. 疑問 為什么(function {// code})();可以被執(zhí)行, 而function {// code}();卻會報錯?
3. 分析
(1). 首先, 要清楚兩者的區(qū)別:(function {// code})是表達式, function {// code}是函數(shù)聲明.
(2). 其次, js"預編譯"的特點:js在"預編譯"階段, 會解釋函數(shù)聲明, 但卻會忽略表式.
(3). 當js執(zhí)行到function() {//code}();時, 由于function() {//code}在"預編譯"階段已經(jīng)被解釋過, js會跳過function(){//code}, 試圖去執(zhí)行();, 故會報錯;
當js執(zhí)行到(function {// code})();時, 由于(function {// code})是表達式, js會去對它求解得到返回值, 由于返回值是一 個函數(shù), 故而遇到();時, 便會被執(zhí)行.
另外， 函數(shù)轉(zhuǎn)換為表達式的方法并不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……
例如：
bootstrap 框架中的插件寫法：
!function($){
//do something;
}(jQuery);
和
(function($){
//do something;
})(jQuery); 是一回事。
匿名函數(shù)最大的用途是創(chuàng)建閉包（這是JavaScript語言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。
例如：
var a=1;
(function()(){
var a=100;
})();
alert(a); //彈出 1
三、一步一步封裝JQuery插件
接下來我們一起來寫個高亮的jqury插件
1.定一個閉包區(qū)域，防止插件"污染"
//閉包限定命名空間
(function($) {
})(window.jQuery);
2.jQuery.fn.extend(object)擴展jquery 方法，制作插件
3.給插件默認參數(shù)，實現(xiàn) 插件的功能
到這一步，高亮插件基本功能已經(jīng)具備了。調(diào)用代碼如下：
這里只能 直接調(diào)用，不能鏈式調(diào)用。我們知道jQuey是可以鏈式調(diào)用的，就是可以在一個jQuery對象上調(diào)用多個方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","測試“);
但是我們上面的插件，就不能這樣鏈式調(diào)用了。比如：$("p").highLight().css({marginTop:'100px'}); //將會報找不到css方法，原因在與我的自定義插件在完成功能后，沒有將 jQuery對象給返回出來。接下來，return jQuery對象，讓我們的插件也支持鏈式調(diào)用。（其實很簡單，就是執(zhí)行完我們插件代碼的時候?qū)Query對像return 出來，和上面的代碼沒啥區(qū)別）
4.暴露公共方法 給別人來擴展你的插件（如果有需求的話）
比如的高亮插件有一個format方法來格式話高亮文本，則我們可將它寫成公共的，暴露給插件使用者，不同的使用著根據(jù)自己的需求來重寫該format方法，從而是高亮文本可以呈現(xiàn)不同的格式。
5.插件私有方法
有些時候，我們的插件需要一些私有方法，不能被外界訪問。例如 我們插件里面需要有個方法 來檢測用戶調(diào)用插件時傳入的參數(shù)是否符合規(guī)范。
6.其他的一些設(shè)置，如：為你的插件加入元數(shù)據(jù)插件的支持將使其變得更強大。
完整的高亮插件代碼如下：
調(diào)用
