不管你是前端程序員产禾，還是后端程序員，無人不知JQuery牵啦，無人不曉JQuery亚情。她的好處想必大家都知道，很多人喜歡使用JQuery哈雏，最主要的就是她極大的簡化了原生Javascript的開發(fā)楞件，并且對于我們程序員來說非常簡單易用、上手快裳瘪。但是土浸，用了好久的JQuery，我想你只是知道怎么使用她原有的方法和別人基于JQuery寫好的插件彭羹，而你知道怎么來擴(kuò)展她黄伊，自己寫一個(gè)JQuery插件嗎？那么今天我們就來討論一下JQuery插件是如何編寫的派殷？
首先我們寫一個(gè)給字體加紅的一個(gè)擴(kuò)展方法：
那么接下來看看我們怎么使用這個(gè)擴(kuò)展方法：
這是一個(gè)非常簡單的擴(kuò)展方法，那么接下來我們一步一步的解析上面的代碼毡惜。
一拓轻、JQuery的插件機(jī)制
為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法经伙。
jQuery.extend(object) ,一個(gè)參數(shù)的用于擴(kuò)展jQuery類本身扶叉，也就是用來在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的 ajax方法都是用jQuery.ajax()這樣調(diào)用的辜梳，有點(diǎn)像 “類名.方法名” 靜態(tài)方法的調(diào)用方式粱甫。下面我們也來寫個(gè)jQuery.extend(object)的例子：
重載版本：jQuery.extend([deep], target, object1, [objectN])
用一個(gè)或多個(gè)其他對象來擴(kuò)展一個(gè)對象，返回被擴(kuò)展的對象作瞄。
如果不指定target茶宵，則給jQuery命名空間本身進(jìn)行擴(kuò)展。這有助于插件作者為jQuery增加新方法宗挥。
如果第一個(gè)參數(shù)設(shè)置為true乌庶，則jQuery返回一個(gè)深層次的副本，遞歸地復(fù)制找到的任何對象契耿。否則的話瞒大，副本會與原對象共享結(jié)構(gòu)。
未定義的屬性將不會被復(fù)制搪桂，然而從對象的原型繼承的屬性將會被復(fù)制透敌。
參數(shù)
deep:可選。如果設(shè)為true踢械，則遞歸合并酗电。
target:待修改對象。
object1:待合并到第一個(gè)對象的對象内列。
objectN:可選撵术。待合并到第一個(gè)對象的對象。
示例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è)重載的方法交排，我們一般用來在編寫插件時(shí)用自定義插件參數(shù)去覆蓋插件的默認(rèn)參數(shù)划滋。
jQuery.fn.extend(object)擴(kuò)展 jQuery 元素集來提供新的方法（通常用來制作插件）。
首先我們來看fn 是什么東西呢埃篓。查看jQuery代碼古毛，就不難發(fā)現(xiàn)。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {.....};
};
原來 jQuery.fn = jQuery.prototype都许，也就是jQuery對象的原型稻薇。那jQuery.fn.extend()方法就是擴(kuò)展jQuery對象的原型方法。我們知道擴(kuò)展原型上的方法胶征，就相當(dāng)于為對象添加”成員方法“塞椎，類的”成員方法“要類的對象才能調(diào)用，所以使用jQuery.fn.extend(object)擴(kuò)展的方法睛低， jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”案狠。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區(qū)分開來服傍。
二、自執(zhí)行的匿名函數(shù)/閉包
1. 什么是自執(zhí)行的匿名函數(shù)?
它是指形如這樣的函數(shù): (function {// code})();
2. 疑問 為什么(function {// code})();可以被執(zhí)行, 而function {// code}();卻會報(bào)錯(cuò)?
3. 分析
(1). 首先, 要清楚兩者的區(qū)別:(function {// code})是表達(dá)式, function {// code}是函數(shù)聲明.
(2). 其次, js"預(yù)編譯"的特點(diǎn):js在"預(yù)編譯"階段, 會解釋函數(shù)聲明, 但卻會忽略表式.
(3). 當(dāng)js執(zhí)行到function() {//code}();時(shí), 由于function() {//code}在"預(yù)編譯"階段已經(jīng)被解釋過, js會跳過function(){//code}, 試圖去執(zhí)行();, 故會報(bào)錯(cuò);
當(dāng)js執(zhí)行到(function {// code})();時(shí), 由于(function {// code})是表達(dá)式, js會去對它求解得到返回值, 由于返回值是一 個(gè)函數(shù), 故而遇到();時(shí), 便會被執(zhí)行.
另外骂铁， 函數(shù)轉(zhuǎn)換為表達(dá)式的方法并不一定要靠分組操作符()吹零，我們還可以用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插件
接下來我們一起來寫個(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對象上調(diào)用多個(gè)方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","測試“);
但是我們上面的插件振湾，就不能這樣鏈?zhǔn)秸{(diào)用了杀迹。比如：$("p").highLight().css({marginTop:'100px'}); //將會報(bào)找不到css方法亡脸，原因在與我的自定義插件在完成功能后押搪，沒有將 jQuery對象給返回出來。接下來浅碾，return jQuery對象大州，讓我們的插件也支持鏈?zhǔn)秸{(diào)用。（其實(shí)很簡單垂谢，就是執(zhí)行完我們插件代碼的時(shí)候?qū)Query對像return 出來厦画，和上面的代碼沒啥區(qū)別）
4.暴露公共方法 給別人來擴(kuò)展你的插件（如果有需求的話）
比如的高亮插件有一個(gè)format方法來格式話高亮文本，則我們可將它寫成公共的滥朱，暴露給插件使用者根暑，不同的使用著根據(jù)自己的需求來重寫該format方法，從而是高亮文本可以呈現(xiàn)不同的格式徙邻。
5.插件私有方法
有些時(shí)候排嫌，我們的插件需要一些私有方法，不能被外界訪問缰犁。例如 我們插件里面需要有個(gè)方法 來檢測用戶調(diào)用插件時(shí)傳入的參數(shù)是否符合規(guī)范淳地。
6.其他的一些設(shè)置怖糊，如：為你的插件加入元數(shù)據(jù)插件的支持將使其變得更強(qiáng)大。
完整的高亮插件代碼如下：
調(diào)用
