jQuery插件編寫步驟詳解
本文實(shí)例講述了jQuery插件編寫步驟。分享給大家供大家參考，具體如下：
如今做web開(kāi)發(fā)，jquery 幾乎是必不可少的，就連vs神器在2010版本開(kāi)始將Jquery 及ui 內(nèi)置web項(xiàng)目里了。至于使用jquery好處這里就不再贅述了，用過(guò)的都知道。今天我們來(lái)討論下jquery的插件機(jī)制，jquery有著成千上萬(wàn)的第 三方插件，有時(shí)我們寫好了一個(gè)獨(dú)立的功能，也想將其與jquery結(jié)合起來(lái)，可以用jquery鏈?zhǔn)秸{(diào)用，這就要擴(kuò)展jquery，寫成插件形式了，如下 面就是一個(gè)簡(jiǎn)單擴(kuò)展Jquery對(duì)象的demo：
//sample:擴(kuò)展jquery對(duì)象的方法，bold()用于加粗字體。
(function ($) {
$.fn.extend({
"bold": function () {
///<summary>
/// 加粗字體
///</summary>
return this.css({ fontWeight: "bold" });
}
});
})(jQuery);
調(diào)用方式：
這是一個(gè)非常簡(jiǎn)單的擴(kuò)展。接下來(lái)我們一步步來(lái)解析上面的代碼。
一、jquery的插件機(jī)制
為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend() 方法有一個(gè)重載。
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)的例子：
//擴(kuò)展jQuery對(duì)象本身
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 等于 100
var max_v = $.maxValue(i, j); // max_v 等于 101
重載版本：
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 方法，制作插件
//閉包限定命名空間
(function ($) {
$.fn.extend({
"highLight":function(options){
//do something
}
});
})(window.jQuery);
3.給插件默認(rèn)參數(shù)，實(shí)現(xiàn) 插件的功能
//閉包限定命名空間
(function ($) {
$.fn.extend({
"highLight": function (options) {
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認(rèn)參數(shù)
this.each(function () { //這里的this 就是 jQuery對(duì)象
//遍歷所有的要高亮的dom,當(dāng)調(diào)用 highLight()插件的是一個(gè)集合的時(shí)候。
var $this = $(this); //獲取當(dāng)前dom 的 jQuery對(duì)象，這里的this是當(dāng)前循環(huán)的dom
//根據(jù)參數(shù)來(lái)設(shè)置 dom的樣式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
});
}
});
//默認(rèn)參數(shù)
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
到這一步，高亮插件基本功能已經(jīng)具備了。調(diào)用代碼如下：
$(function () {
$("p").highLight(); //調(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ū)別）
//閉包限定命名空間
(function ($) {
$.fn.extend({
"highLight": function (options) {
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認(rèn)參數(shù)
return this.each(function () { //這里的this 就是 jQuery對(duì)象。這里return 為了支持鏈?zhǔn)秸{(diào)用
//遍歷所有的要高亮的dom,當(dāng)調(diào)用 highLight()插件的是一個(gè)集合的時(shí)候。
var $this = $(this); //獲取當(dāng)前dom 的 jQuery對(duì)象，這里的this是當(dāng)前循環(huán)的dom
//根據(jù)參數(shù)來(lái)設(shè)置 dom的樣式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
});
}
});
//默認(rèn)參數(shù)
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
4.暴露公共方法 給別人來(lái)擴(kuò)展你的插件（如果有需求的話）
比如的高亮插件有一個(gè)format方法來(lái)格式話高亮文本，則我們可將它寫成公共的，暴露給插件使用者，不同的使用著根據(jù)自己的需求來(lái)重寫該format方法，從而是高亮文本可以呈現(xiàn)不同的格式。
//公共的格式化 方法. 默認(rèn)是加粗，用戶可以通過(guò)覆蓋該方法達(dá)到不同的格式化效果。
$.fn.highLight.format = function (str) {
return "<strong>" + str + "</strong>";
}
5.插件私有方法
有些時(shí)候，我們的插件需要一些私有方法，不能被外界訪問(wèn)。例如 我們插件里面需要有個(gè)方法 來(lái)檢測(cè)用戶調(diào)用插件時(shí)傳入的參數(shù)是否符合規(guī)范。
6.其他的一些設(shè)置，如：為你的插件加入元數(shù)據(jù)插件的支持將使其變得更強(qiáng)大。
完整的高亮插件代碼如下：
//閉包限定命名空間
(function ($) {
$.fn.extend({
"highLight": function (options) {
//檢測(cè)用戶傳進(jìn)來(lái)的參數(shù)是否合法
if (!isValid(options))
return this;
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認(rèn)參數(shù)
return this.each(function () { //這里的this 就是 jQuery對(duì)象。這里return 為了支持鏈?zhǔn)秸{(diào)用
//遍歷所有的要高亮的dom,當(dāng)調(diào)用 highLight()插件的是一個(gè)集合的時(shí)候。
var $this = $(this); //獲取當(dāng)前dom 的 jQuery對(duì)象，這里的this是當(dāng)前循環(huán)的dom
//根據(jù)參數(shù)來(lái)設(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)是加粗，用戶可以通過(guò)覆蓋該方法達(dá)到不同的格式化效果。
$.fn.highLight.format = function (str) {
return "<strong>" + str + "</strong>";
}
//私有方法，檢測(cè)參數(shù)是否合法
function isValid(options) {
return !options || (options && typeof options === "object") ? true : false;
}
})(window.jQuery);
調(diào)用：
//調(diào)用
//調(diào)用者覆蓋 插件暴露的共公方法
$.fn.highLight.format = function (txt) {
return "<em>" + txt + "</em>"
}
$(function () {
$("p").highLight({ foreground: 'orange', background: '#ccc' }); //調(diào)用自定義 高亮插件
});
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
今天是CSS的選擇器，以后還有一部分xPath的選擇器。今天的筆記中包括44個(gè)選擇器，基本涵蓋了CSS 2和CSS 3的所有規(guī)定。2010-03-03
JQuery將文本轉(zhuǎn)化成JSON對(duì)象需要注意的問(wèn)題
在JQuery的許多方法中，很多方法的參數(shù)可以傳入一個(gè)JSON對(duì)象，比如Ajax方法的第二個(gè)參數(shù)。怎么將文本轉(zhuǎn)化成JSON對(duì)象，需要注意以下問(wèn)題2011-05-05
通過(guò)jsonp獲取json數(shù)據(jù)實(shí)現(xiàn)AJAX跨域請(qǐng)求
JSON 可通過(guò) JavaScript 進(jìn)行解析，JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸，這篇文章主要介紹了通過(guò)jsonp獲取json數(shù)據(jù)（實(shí)現(xiàn)AJAX跨域請(qǐng)求），有興趣的可以了解一下。2017-01-01
jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開(kāi)菜單的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家介紹了jQuery編程動(dòng)畫基本實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
第一次認(rèn)識(shí)jquery延遲對(duì)象，這篇文章主要為大家詳細(xì)解析JQ延遲對(duì)象的相關(guān)概念,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery+Ajax+PHP+Mysql實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)實(shí)例講解
這是一個(gè)典型的Ajax應(yīng)用，在頁(yè)面上，您只需要點(diǎn)擊“下一頁(yè)”，數(shù)據(jù)區(qū)將自動(dòng)加載對(duì)應(yīng)頁(yè)碼的數(shù)據(jù)，重新刷新數(shù)據(jù)區(qū)。類似的效果在很多網(wǎng)站上應(yīng)用，尤其在一些需要展示大量圖片數(shù)據(jù)的網(wǎng)頁(yè)如淘寶商品列表頁(yè)，Ajax分頁(yè)效果讓您的網(wǎng)站數(shù)據(jù)加載顯得非常流暢。2015-09-09
jQuery prototype沖突的2種解決方法(附demo示例下載)
這篇文章主要介紹了jQuery prototype沖突的2種解決方法,分析了針對(duì)jQuery中添加代碼與沖突位置添加代碼2種情況,并附帶demo示例供讀者下載參考,需要的朋友可以參考下2016-01-01
jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法,實(shí)例分析了jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了jQuery中ScrollTo用法,結(jié)合實(shí)例形式分析了jQuery中ScrollTo的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下2016-09-09