本文是參考了Joey的博客后整理的。

先從一個(gè)簡單擴(kuò)展jQuery對象的demo開始說起：

//sample:擴(kuò)展jquery對象的方法，redTextColor()用于改變字體顏色。(function ($) {$.fn.extend({"redTextColor": function () {// 默認(rèn)字體顏色為紅色return this.css({ color: "red" });}});})(window.jQuery);

調(diào)用方式：

$(function(){$('p').redTextColor(); })

這是一個(gè)簡單的擴(kuò)展，下面我們開始詳細(xì)分析一下上面的代碼。

一、jQuery的插件機(jī)制

為了方便用戶創(chuàng)建插件，jQuery提供了jQuery.extend()和jQuery.fn.extend()兩種方法。

1.jQuery.extend()方法有一個(gè)重載

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)的例子：

//擴(kuò)展jQuery對象本身 jQuery.extend({"minValue": function (a, b) {///<summary>/// 比較兩個(gè)值，返回最小值///</summary>return a < b ? a : b;},"maxValue": function (a, b) {///<summary>/// 比較兩個(gè)值，返回最大值///</summary>return a > b ? a : b;}});//調(diào)用var i = 100; j = 101;var min_v = $.minValue(i, j); // min_v 等于 100var max_v = $.maxValue(i, j); // max_v 等于 101

重載版本：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ù)/閉包?

?什么是自執(zhí)行的匿名函數(shù)? ? 形式上是指(function{code})()這樣的函數(shù)

疑問 為什么(function {// code})();可以被執(zhí)行, 而function {// code}();卻會報(bào)錯(cuò)?

　　　　 (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
更多 閉包和匿名函數(shù) 可查看 Javascript的匿名函數(shù)與自執(zhí)行 這篇文章。

三.一步一步封裝jQuery插件

接下來我們寫一個(gè)高亮的插件

1.定義一個(gè)閉包區(qū)域，防止插件污染

//這樣閉包可以限制命名空間
(function($){...code... })(window.jQuery);

2.使用jQuery.fn.extend()的方式制作插件

(function ($) {$.fn.extend({'highlight': function (op) {........}}); })(window.jQuery);

3.設(shè)置默認(rèn)參數(shù)，實(shí)現(xiàn)插件功能

(function ($) {$.fn.extend({'highlight': function (op) {var opt = $.extend({},defaults,op);this.each(function () {$(this).css({backgroundColor: opt.background,color: opt.foreground});})}});
　　//默認(rèn)參數(shù)var defaults = {background: 'red',foreground: 'yellow'} })(window.jQuery);

至此，高亮插件已基本實(shí)現(xiàn)了，調(diào)用代碼如下：

$('p').highlight({ background: 'yellow',foreground: 'gray' });

這里只能 直接調(diào)用，不能鏈?zhǔn)秸{(diào)用。我們知道jQuey是可以鏈?zhǔn)秸{(diào)用的，就是可以在一個(gè)jQuery對象上調(diào)用多個(gè)方法，如：
$('p').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ū)別）

(function ($) {$.fn.extend({'highlight': function (op) {//使用jQuery.extend 覆蓋插件默認(rèn)參數(shù)var opt = $.extend({},defaults,op);//這里的this 就是 jQuery對象。這里return 為了支持鏈?zhǔn)秸{(diào)用return this.each(function () {//根據(jù)參數(shù)來設(shè)置 dom的樣式$(this).css({backgroundColor: opt.background,color: opt.foreground});})}});//默認(rèn)參數(shù)var defaults = {background: 'red',foreground: 'yellow'}; })(window.jQuery);

4.暴露公共方法 給別人來擴(kuò)展你的插件（如果有需求的話）
比如的高亮插件有一個(gè)format方法來格式話高亮文本，則我們可將它寫成公共的，暴露給插件使用者，不同的使用著根據(jù)自己的需求來重寫該format方法，從而是高亮文本可以呈現(xiàn)不同的格式。

//公共的格式化 方法. 默認(rèn)是加粗，用戶可以通過覆蓋該方法達(dá)到不同的格式化效果。$.fn.highLight.format = function (str) {return "<h3>" + str + "</h3>"; }

5.插件私有方法
?有些時(shí)候，我們的插件需要一些私有方法，不能被外界訪問。例如 我們插件里面需要有個(gè)方法 來檢測用戶調(diào)用插件時(shí)傳入的參數(shù)是否符合規(guī)范。

6.其他的一些設(shè)置，如：為你的插件加入元數(shù)據(jù)插件的支持將使其變得更強(qiáng)大。

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

//閉包限定命名空間 (function ($) {$.fn.extend({"highLight": function (options) {//檢測用戶傳進(jìn)來的參數(shù)是否合法if (!isValid(options))return this;var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認(rèn)參數(shù)return this.each(function () { //這里的this 就是 jQuery對象。這里return 為了支持鏈?zhǔn)秸{(diào)用//遍歷所有的要高亮的dom,當(dāng)調(diào)用 highLight()插件的是一個(gè)集合的時(shí)候。var $this = $(this); //獲取當(dāng)前dom 的 jQuery對象，這里的this是當(dāng)前循環(huán)的dom//根據(jù)參數(shù)來設(shè)置 dom的樣式$this.css({backgroundColor: opts.background,color: opts.foreground});//格式化高亮文本var markup = $this.html();markup = $.fn.highLight.format(markup);$this.html(markup);});}});//默認(rèn)參數(shù)var defaluts = {foreground: 'red',background: 'yellow'};//公共的格式化 方法. 默認(rèn)是加粗，用戶可以通過覆蓋該方法達(dá)到不同的格式化效果。$.fn.highLight.format = function (str) {return "<strong>" + str + "</strong>";}//私有方法，檢測參數(shù)是否合法function isValid(options) {return !options || (options && typeof options === "object") ? true : false;} })(window.jQuery);

調(diào)用：

//調(diào)用者覆蓋 插件暴露的共公方法 $.fn.highLight.format = function (txt) {return "<em>" + txt + "</em>"} $(function () {$("p").highLight({ foreground: 'orange', background: '#ccc' }); //調(diào)用自定義 高亮插件 });

?

轉(zhuǎn)載于:https://www.cnblogs.com/it-q/p/9294432.html

總結(jié)

以上是生活随笔為你收集整理的jQuery学习总结06-插件开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。