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