jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開(kāi)發(fā)
更新時(shí)間：2010年05月17日 22:55:29 作者：
在介紹如何擴(kuò)展jQuery之前，先大致看下jQuery源碼（以1.3.2版本為例）。
jQuery的主體如下:
(function(){ ……})();
對(duì)于Javascript基礎(chǔ)不太好好的人來(lái)說(shuō)比較奇怪。實(shí)際上，這個(gè)表達(dá)式聲明了一個(gè)匿名函數(shù)（第一個(gè)括號(hào)），然后再執(zhí)行它（第二個(gè)括號(hào)）。在這個(gè)函數(shù)中，完成了jQuery一系列方法和對(duì)象的定義。第24行很關(guān)鍵，
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}
在這里，定義了十分強(qiáng)大的$函數(shù)。$其實(shí)是jQuery的一個(gè)別名。jQuery才是“正宗”的jQuery函數(shù)，$的定義只是為了減少程序員的打字量。$很容易和其他庫(kù)沖突，例如著名的prototype庫(kù)也使用了這個(gè)名字。不過(guò)jQuery和其他庫(kù)沖突的機(jī)會(huì)就少多了，因此使用jQuery 要比$安全的多。下面再說(shuō)沖突的問(wèn)題。再看return的對(duì)象fn的定義，第35行
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { …… }, ……
};
很顯然fn只是一個(gè)jQuery的原型的簡(jiǎn)寫(xiě)而已。其中定義了一個(gè)init函數(shù)。實(shí)際上，init充當(dāng)?shù)氖莏Query的構(gòu)造函數(shù)的角色。當(dāng)我們使用var i=$(‘selector')這樣的代碼的時(shí)候，可以發(fā)現(xiàn)變量i被jQuery包裹起來(lái)了，也就是i帶上了jQuery.fn的方法。很明顯，i的prototype被指向了jQuery.fn。再Javascript的世界里，可以說(shuō)，i是jQuery的一個(gè)實(shí)例，你嘗試下 i instanceof jQuery,返回的是true。然而，這里并沒(méi)有用 i=new $(selector); 我估計(jì)，$是如此常用的一個(gè)函數(shù)，如果每次都要使用new來(lái)構(gòu)造一個(gè)對(duì)象的話，那也太麻煩了，這就是init存在的理由，$本身被定義為一個(gè)很簡(jiǎn)單的函數(shù)，它內(nèi)部?jī)H有一行代碼，返回一個(gè)init對(duì)象。我們每調(diào)用一次$(selector)方法，都返回一個(gè)jQuery對(duì)象。有點(diǎn)工廠模式的味道。當(dāng)然，如果你對(duì)Javascript比較熟悉，就會(huì)知道這樣是不夠的，我們需要把init的prototype設(shè)為jQuery.fn，代碼541行：
jQuery.fn.init.prototype = jQuery.fn;
到540行為止，都是定義的jQuery的原型對(duì)象，用OO語(yǔ)言的話說(shuō)，相當(dāng)于實(shí)例方法，從540行開(kāi)始，定義了一系列jQuery的方法，相當(dāng)于靜態(tài)方法。至此，拋開(kāi)方法的具體實(shí)現(xiàn)不談（有些實(shí)在是太困難了），jQuery的結(jié)構(gòu)基本上是明了的了。下面開(kāi)始介紹擴(kuò)展。
擴(kuò)展jQuery首先要注意的就是避免命名沖突，尤其是搶手的$。考慮周到的jQuery設(shè)計(jì)了一個(gè)jQuery.noConflict()方法，使得jQuery可以拱手讓出$符號(hào)，避免和其他庫(kù)沖突，而程序員可以使用完整的符號(hào)jQuery來(lái)調(diào)用jQuery提供的方法。noConflict()的實(shí)現(xiàn)簡(jiǎn)單而巧妙，順便看一下，首先在第21行，
// Map over the $ in case of overwrite
_$ = window.$,jQuery首先記錄下windows.$，注意這行代碼的運(yùn)行時(shí)間非常早，在jQuery任何函數(shù)執(zhí)行之前就會(huì)被執(zhí)行。當(dāng)然，這里的_$也有沖突的可能，不過(guò)概率是在是太小了，誰(shuí)會(huì)用這么詭異的名字作為關(guān)鍵的變量呢。此時(shí)如果$已經(jīng)被其他庫(kù)占用，它的值會(huì)保留在_$中，在任何時(shí)候，只要調(diào)用jQuery.noConflict方法，619行，其代碼如下：
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
這樣，$就又還回去了。
作為插件開(kāi)發(fā)者，我們無(wú)法保證$是否被拱手相讓，最保險(xiǎn)的是調(diào)用jQuery方法，然而有一個(gè)技巧可以保留簡(jiǎn)單的$而不影響其他部分，那就是:
(function($){
// plugin code goes here, you can use $ safely.
})(jQuery);
關(guān)于插件的js文件的命名，一般是jquery.pluginname.js。
要擴(kuò)展jQuery工具函數(shù)（靜態(tài)函數(shù)）是很容易的，下面一個(gè)例子實(shí)現(xiàn)一個(gè)將數(shù)字?jǐn)U展成固定位數(shù)的字符串的函數(shù)。
(function($) {
$.toFixedWidth = function(value, length, fill) {
var res = value.toString();
if (!fill) fill = 0;
var padding = length - res.length;
if (padding < 0) {
res = res.substr(-padding);
} else {
for (var n = 0; n < padding; n++)
res = fill + res;
}
return res;
}
})(jQuery);
要編寫(xiě)包裝集的方法也同樣容易，下面實(shí)現(xiàn)一個(gè)使表單元素只讀的方法：
$.fn.setReadOnly = function(readonly) {
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0);
}
下面編寫(xiě)一個(gè)小頁(yè)面測(cè)試下，這個(gè)頁(yè)面模擬的是訂單提交頁(yè)面，如果用戶需要發(fā)票，需要填寫(xiě)發(fā)票信息，否則不能填寫(xiě)發(fā)票信息。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Extension</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.yinzixin.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#OrderID').val($.toFixedWidth('123', 8));
$('#InvoiceRequired').click(function() {
$('.InvoiceInfo').setReadOnly(!this.checked);
});
$('.InvoiceInfo').setReadOnly(false);
}
);
</script>
</head>
<body>
<form>
Order ID:<input type="text" id="OrderID" /> <br />
<input type="checkbox" id="InvoiceRequired" />Invoice Required<br />
<div class="InvoiceInfo">
Inovice Tilte:<input type="text" id="Text1" />
Invoice Content:<input type="text" id="Text2" />
</div>
<input type="button" value="Submit" />
</form>
</body>
</html>
(function(){ ……})();
對(duì)于Javascript基礎(chǔ)不太好好的人來(lái)說(shuō)比較奇怪。實(shí)際上，這個(gè)表達(dá)式聲明了一個(gè)匿名函數(shù)（第一個(gè)括號(hào)），然后再執(zhí)行它（第二個(gè)括號(hào)）。在這個(gè)函數(shù)中，完成了jQuery一系列方法和對(duì)象的定義。第24行很關(guān)鍵，
復(fù)制代碼 代碼如下:
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}
在這里，定義了十分強(qiáng)大的$函數(shù)。$其實(shí)是jQuery的一個(gè)別名。jQuery才是“正宗”的jQuery函數(shù)，$的定義只是為了減少程序員的打字量。$很容易和其他庫(kù)沖突，例如著名的prototype庫(kù)也使用了這個(gè)名字。不過(guò)jQuery和其他庫(kù)沖突的機(jī)會(huì)就少多了，因此使用jQuery 要比$安全的多。下面再說(shuō)沖突的問(wèn)題。再看return的對(duì)象fn的定義，第35行
復(fù)制代碼 代碼如下:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { …… }, ……
};
很顯然fn只是一個(gè)jQuery的原型的簡(jiǎn)寫(xiě)而已。其中定義了一個(gè)init函數(shù)。實(shí)際上，init充當(dāng)?shù)氖莏Query的構(gòu)造函數(shù)的角色。當(dāng)我們使用var i=$(‘selector')這樣的代碼的時(shí)候，可以發(fā)現(xiàn)變量i被jQuery包裹起來(lái)了，也就是i帶上了jQuery.fn的方法。很明顯，i的prototype被指向了jQuery.fn。再Javascript的世界里，可以說(shuō)，i是jQuery的一個(gè)實(shí)例，你嘗試下 i instanceof jQuery,返回的是true。然而，這里并沒(méi)有用 i=new $(selector); 我估計(jì)，$是如此常用的一個(gè)函數(shù)，如果每次都要使用new來(lái)構(gòu)造一個(gè)對(duì)象的話，那也太麻煩了，這就是init存在的理由，$本身被定義為一個(gè)很簡(jiǎn)單的函數(shù)，它內(nèi)部?jī)H有一行代碼，返回一個(gè)init對(duì)象。我們每調(diào)用一次$(selector)方法，都返回一個(gè)jQuery對(duì)象。有點(diǎn)工廠模式的味道。當(dāng)然，如果你對(duì)Javascript比較熟悉，就會(huì)知道這樣是不夠的，我們需要把init的prototype設(shè)為jQuery.fn，代碼541行：
jQuery.fn.init.prototype = jQuery.fn;
到540行為止，都是定義的jQuery的原型對(duì)象，用OO語(yǔ)言的話說(shuō)，相當(dāng)于實(shí)例方法，從540行開(kāi)始，定義了一系列jQuery的方法，相當(dāng)于靜態(tài)方法。至此，拋開(kāi)方法的具體實(shí)現(xiàn)不談（有些實(shí)在是太困難了），jQuery的結(jié)構(gòu)基本上是明了的了。下面開(kāi)始介紹擴(kuò)展。
擴(kuò)展jQuery首先要注意的就是避免命名沖突，尤其是搶手的$。考慮周到的jQuery設(shè)計(jì)了一個(gè)jQuery.noConflict()方法，使得jQuery可以拱手讓出$符號(hào)，避免和其他庫(kù)沖突，而程序員可以使用完整的符號(hào)jQuery來(lái)調(diào)用jQuery提供的方法。noConflict()的實(shí)現(xiàn)簡(jiǎn)單而巧妙，順便看一下，首先在第21行，
// Map over the $ in case of overwrite
_$ = window.$,jQuery首先記錄下windows.$，注意這行代碼的運(yùn)行時(shí)間非常早，在jQuery任何函數(shù)執(zhí)行之前就會(huì)被執(zhí)行。當(dāng)然，這里的_$也有沖突的可能，不過(guò)概率是在是太小了，誰(shuí)會(huì)用這么詭異的名字作為關(guān)鍵的變量呢。此時(shí)如果$已經(jīng)被其他庫(kù)占用，它的值會(huì)保留在_$中，在任何時(shí)候，只要調(diào)用jQuery.noConflict方法，619行，其代碼如下：
復(fù)制代碼 代碼如下:
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
這樣，$就又還回去了。
作為插件開(kāi)發(fā)者，我們無(wú)法保證$是否被拱手相讓，最保險(xiǎn)的是調(diào)用jQuery方法，然而有一個(gè)技巧可以保留簡(jiǎn)單的$而不影響其他部分，那就是:
復(fù)制代碼 代碼如下:
(function($){
// plugin code goes here, you can use $ safely.
})(jQuery);
關(guān)于插件的js文件的命名，一般是jquery.pluginname.js。
要擴(kuò)展jQuery工具函數(shù)（靜態(tài)函數(shù)）是很容易的，下面一個(gè)例子實(shí)現(xiàn)一個(gè)將數(shù)字?jǐn)U展成固定位數(shù)的字符串的函數(shù)。
復(fù)制代碼 代碼如下:
(function($) {
$.toFixedWidth = function(value, length, fill) {
var res = value.toString();
if (!fill) fill = 0;
var padding = length - res.length;
if (padding < 0) {
res = res.substr(-padding);
} else {
for (var n = 0; n < padding; n++)
res = fill + res;
}
return res;
}
})(jQuery);
要編寫(xiě)包裝集的方法也同樣容易，下面實(shí)現(xiàn)一個(gè)使表單元素只讀的方法：
復(fù)制代碼 代碼如下:
$.fn.setReadOnly = function(readonly) {
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0);
}
下面編寫(xiě)一個(gè)小頁(yè)面測(cè)試下，這個(gè)頁(yè)面模擬的是訂單提交頁(yè)面，如果用戶需要發(fā)票，需要填寫(xiě)發(fā)票信息，否則不能填寫(xiě)發(fā)票信息。
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Extension</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.yinzixin.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#OrderID').val($.toFixedWidth('123', 8));
$('#InvoiceRequired').click(function() {
$('.InvoiceInfo').setReadOnly(!this.checked);
});
$('.InvoiceInfo').setReadOnly(false);
}
);
</script>
</head>
<body>
<form>
Order ID:<input type="text" id="OrderID" /> <br />
<input type="checkbox" id="InvoiceRequired" />Invoice Required<br />
<div class="InvoiceInfo">
Inovice Tilte:<input type="text" id="Text1" />
Invoice Content:<input type="text" id="Text2" />
</div>
<input type="button" value="Submit" />
</form>
</body>
</html>
您可能感興趣的文章:
- 跟我一起學(xué)寫(xiě)jQuery插件開(kāi)發(fā)方法（附完整實(shí)例及下載）
- jQuery插件開(kāi)發(fā)的兩種方法及$.fn.extend的詳解
- 基于Jquery插件開(kāi)發(fā)之圖片放大鏡效果(仿淘寶)
- jquery插件開(kāi)發(fā)方法(初學(xué)者)
- 跟我一起學(xué)JQuery插件開(kāi)發(fā)
- jQuery插件開(kāi)發(fā)詳細(xì)教程
- jQuery 插件開(kāi)發(fā) 其實(shí)很簡(jiǎn)單
- jQuery插件開(kāi)發(fā)精品教程(讓你的jQuery更上一個(gè)臺(tái)階)
- jQuery插件開(kāi)發(fā)的五種形態(tài)小結(jié)
- 老司機(jī)帶你解讀jQuery插件開(kāi)發(fā)流程
相關(guān)文章
jQuery :nth-child前有無(wú)空格的區(qū)別分析
:nth-child(index)子元素過(guò)濾選擇器的描述是：選取每個(gè)父元素下的弟index個(gè)子元素，index從1開(kāi)始。2011-07-07
本文主要介紹了jQuery中$.ajax()方法的具體使用，$.ajax(url,[settings])通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)，文中通過(guò)示例代碼詳細(xì)的介紹了$.ajax()的用法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
本文主要介紹jQuery文件上傳控件 Uploadify的用法，原作者做了非常詳細(xì)的備注，有需要的朋友可以參考一下。2016-06-06
jquery動(dòng)畫(huà)效果學(xué)習(xí)筆記（8種效果）
這篇文章分享了一份jquery動(dòng)畫(huà)效果學(xué)習(xí)筆記，針對(duì)jquery動(dòng)畫(huà)效果進(jìn)行細(xì)致解析，對(duì)淡入淡出效果、滑動(dòng)效果進(jìn)行原理講解，想要學(xué)好jquery動(dòng)畫(huà)效果，就耐心閱讀本文，相信大家會(huì)有意想不到的收獲。2015-11-11
利用JQuery直接調(diào)用asp.net后臺(tái)的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇利用JQuery直接調(diào)用asp.net后臺(tái)的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jquery 自定義容器下雨效果可將下雨圖標(biāo)改為其他
這篇文章主要介紹了jquery 自定義容器下雨效果可將下雨圖標(biāo)改為其他,需要的朋友可以參考下2014-04-04
jquery使用淘寶接口跨域查詢手機(jī)號(hào)碼歸屬地實(shí)例
這篇文章主要介紹了jquery使用淘寶接口跨域查詢手機(jī)號(hào)碼歸屬地的方法，大家參考使用吧2013-11-11
jQuery Datatables表頭不對(duì)齊的解決辦法
這篇文章主要為大家詳細(xì)介紹了jQuery Datatables表頭不對(duì)齊的解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
DIV+CSS+jQ實(shí)現(xiàn)省市聯(lián)動(dòng)可擴(kuò)展
這篇文章主要介紹了DIV+CSS+jQ實(shí)現(xiàn)省市聯(lián)動(dòng)可擴(kuò)展方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
淺談jQuery hover(over, out)事件函數(shù)
下面小編就為大家?guī)?lái)一篇淺談jQuery hover(over, out)事件函數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-12-12