jQuery的實(shí)現(xiàn)原理的模擬代碼 -4 重要的擴(kuò)展函數(shù) extend
更新時(shí)間:2010年08月03日 00:34:10 作者:
在上兩篇文章中,我們看到每次要通過 jQuery 的原型增加共享方法的時(shí)候,都需要通過 jQuery.fn 一個(gè)個(gè)進(jìn)行擴(kuò)展,非常麻煩.
jQuery.fn.extend 提供了一個(gè)擴(kuò)展機(jī)制,可以方便我們通過一個(gè)或者多個(gè)示例對象來擴(kuò)展某個(gè)對象。如果沒有指定被擴(kuò)展的對象,那么將擴(kuò)展到自己身上。
jQuery.extend 也可以通過 jQuery.fn.extend 使用, 在 jQuery 中使用很多,用來為一個(gè)目標(biāo)對象擴(kuò)展成員,擴(kuò)展的成員來自于一系列參考對象。
這樣,如果我們需要為 jQuery.fn 擴(kuò)展成員 removeData,就可以這樣進(jìn)行。
jQuery.fn.extend(
{
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
}
);
extend 的源碼如下,因?yàn)楸容^簡單,所以沒有做太多的精簡。
/// <reference path="jQuery-core.js" />
2
3
4 jQuery.extend = jQuery.fn.extend = function () {
5 // copy reference to target object
6 var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
7
8 // 深拷貝情況,第一個(gè)參數(shù)為 boolean 類型,那么,表示深拷貝,第二個(gè)參數(shù)為目標(biāo)對象
9 if (typeof target === "boolean") {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// 如果目標(biāo)不是對象也不是函數(shù)
if (typeof target !== "object" && !jQuery.isFunction(target)) {
target = {};
}
// 如果只有一個(gè)參數(shù)就是擴(kuò)展自己
if (length === i) {
target = this;
--i;
}
// 遍歷所有的參考對象,擴(kuò)展到目標(biāo)對象上
for (; i < length; i++) {
// Only deal with non-null/undefined values
if ((options = arguments[i]) != null) {
// Extend the base object
for (name in options) {
src = target[name];
copy = options[name];
// Prevent never-ending loop
if (target === copy) {
continue;
}
// Recurse if we're merging object literal values or arrays
if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {
var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src
: jQuery.isArray(copy) ? [] : {};
// Never move original objects, clone them
target[name] = jQuery.extend(deep, clone, copy);
// Don't bring in undefined values
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
// Return the modified object
return target;
};
jQuery.extend 也可以通過 jQuery.fn.extend 使用, 在 jQuery 中使用很多,用來為一個(gè)目標(biāo)對象擴(kuò)展成員,擴(kuò)展的成員來自于一系列參考對象。
這樣,如果我們需要為 jQuery.fn 擴(kuò)展成員 removeData,就可以這樣進(jìn)行。
復(fù)制代碼 代碼如下:
jQuery.fn.extend(
{
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
}
);
extend 的源碼如下,因?yàn)楸容^簡單,所以沒有做太多的精簡。
復(fù)制代碼 代碼如下:
/// <reference path="jQuery-core.js" />
2
3
4 jQuery.extend = jQuery.fn.extend = function () {
5 // copy reference to target object
6 var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
7
8 // 深拷貝情況,第一個(gè)參數(shù)為 boolean 類型,那么,表示深拷貝,第二個(gè)參數(shù)為目標(biāo)對象
9 if (typeof target === "boolean") {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// 如果目標(biāo)不是對象也不是函數(shù)
if (typeof target !== "object" && !jQuery.isFunction(target)) {
target = {};
}
// 如果只有一個(gè)參數(shù)就是擴(kuò)展自己
if (length === i) {
target = this;
--i;
}
// 遍歷所有的參考對象,擴(kuò)展到目標(biāo)對象上
for (; i < length; i++) {
// Only deal with non-null/undefined values
if ((options = arguments[i]) != null) {
// Extend the base object
for (name in options) {
src = target[name];
copy = options[name];
// Prevent never-ending loop
if (target === copy) {
continue;
}
// Recurse if we're merging object literal values or arrays
if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {
var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src
: jQuery.isArray(copy) ? [] : {};
// Never move original objects, clone them
target[name] = jQuery.extend(deep, clone, copy);
// Don't bring in undefined values
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
// Return the modified object
return target;
};
相關(guān)文章
jQuery實(shí)現(xiàn)凍結(jié)表頭的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)凍結(jié)表頭的方法,實(shí)例分析了jQuery擴(kuò)展方法的實(shí)現(xiàn)技巧及固定表格樣式的方法,需要的朋友可以參考下2015-03-03
jquery 鼠標(biāo)滑動顯示詳情應(yīng)用示例
本文示例要為大家實(shí)現(xiàn)的效果是鼠標(biāo)滑動,顯示詳情,代碼很簡潔,很適合學(xué)習(xí)2014-01-01
jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果簡單演示
這篇文章向大家推薦了一個(gè)jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果的簡單演示,感興趣的小伙伴們可以參考一下2015-11-11
javascript截圖 jQuery插件imgAreaSelect使用詳解
這篇文章主要介紹了avascript截圖 jQuery插件imgAreaSelect使用詳解,需要的朋友可以參考下2016-05-05
jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)
這篇文章主要介紹了jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-06-06
jquery無限級聯(lián)下拉菜單簡單實(shí)例演示
這篇文章主要向大家推薦了一個(gè)jquery無限級聯(lián)下拉菜單簡單實(shí)例演示,感興趣的小伙伴們可以參考一下2015-11-11
jQuery實(shí)現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼,涉及jquery鼠標(biāo)事件操作頁面元素的遍歷與樣式動態(tài)修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08

