jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解
extend()是jQuery中一個(gè)重要的函數(shù),作用是實(shí)現(xiàn)對(duì)對(duì)象的擴(kuò)展, 它經(jīng)常用于jQuery插件的開發(fā),jQuery內(nèi)部也使用它來擴(kuò)展屬性方法,如上篇文章中講到的noConflict方法,就是用extend方法來擴(kuò)展的。

在jQuery的API手冊(cè)中,我們看到,extend實(shí)際上是掛載在jQuery和jQuery.fn上的兩個(gè)不同方法,盡管在jQuery內(nèi)部jQuery.extend()和jQuery.fn.extend()是用相同的代碼實(shí)現(xiàn)的,但是它們的功能卻不太一樣。來看一下官方API對(duì)extend的解釋:
jQuery.extend(): Merge the contents of two or more objects together into the first object.(把兩個(gè)或者更多的對(duì)象合并到第一個(gè)當(dāng)中)
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把對(duì)象掛載到j(luò)Query的prototype屬性,來擴(kuò)展一個(gè)新的jQuery實(shí)例方法)
我們知道,jQuery有靜態(tài)方法和實(shí)例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的第一個(gè)區(qū)別就是一個(gè)用來擴(kuò)展靜態(tài)方法,一個(gè)用來擴(kuò)展實(shí)例方法。用法如下:
jQuery.extend({
sayhello:function(){
console.log("Hello,This is jQuery Library");
}
})
$.sayhello(); //Hello, This is jQuery Library
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
})
$( "input[type='checkbox']" ).check(); //所有的checkbox都會(huì)被選擇
注意兩種調(diào)用插件的方式,一種是直接用$調(diào)用,另外一種是用$()調(diào)用,另外jQuery.extend()接收多個(gè)對(duì)象作為參數(shù),如果只有一個(gè)參數(shù),則把這個(gè)對(duì)象的屬性方法附加到j(luò)Query上,如果含有多個(gè)參數(shù),則把后面的對(duì)象的屬性和方法附加到第一個(gè)對(duì)象上。jQuery extend的實(shí)現(xiàn)源碼:
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) {
target = this;
--i;
}
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 plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// 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;
};
很大一堆代碼,乍看起來難以理解,其實(shí)代碼的大部分都是用來實(shí)現(xiàn)jQuery.extend()中有多個(gè)參數(shù)時(shí)的對(duì)象合并,深度拷貝問題,如果去掉這些功能,讓extend只有擴(kuò)展靜態(tài)和實(shí)例方法的功能,那么代碼如下:
jQuery.extend = jQuery.fn.extend = function(obj){
//obj是傳遞過來擴(kuò)展到this上的對(duì)象
var target=this;
for (var name in obj){
//name為對(duì)象屬性
//copy為屬性值
copy=obj[name];
//防止循環(huán)調(diào)用
if(target === copy) continue;
//防止附加未定義值
if(typeof copy === 'undefined') continue;
//賦值
target[name]=copy;
}
return target;
}
下面再來對(duì)extend方法進(jìn)行注釋解釋:
jQuery.extend = jQuery.fn.extend = function() {
// 定義默認(rèn)參數(shù)和變量
// 對(duì)象分為擴(kuò)展對(duì)象和被擴(kuò)展的對(duì)象
//options 代表擴(kuò)展的對(duì)象中的方法
//name 代表擴(kuò)展對(duì)象的方法名
//i 為擴(kuò)展對(duì)象參數(shù)起始值
//deep 默認(rèn)為淺復(fù)制
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
//當(dāng)?shù)谝粋€(gè)參數(shù)為布爾類型是,次參數(shù)定義是否為深拷貝
//對(duì)接下來的參數(shù)進(jìn)行處理
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// 當(dāng)定義是否深拷貝時(shí),參數(shù)往后移動(dòng)一位
i = 2;
}
// 如果要擴(kuò)展的不是對(duì)象或者函數(shù),則定義要擴(kuò)展的對(duì)象為空
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// 當(dāng)只含有一個(gè)參數(shù)時(shí),被擴(kuò)展的對(duì)象是jQuery或jQuery.fn
if ( length === i ) {
target = this;
--i;
}
//對(duì)從i開始的多個(gè)參數(shù)進(jìn)行遍歷
for ( ; i < length; i++ ) {
// 只處理有定義的值
if ( (options = arguments[ i ]) != null ) {
// 展開擴(kuò)展對(duì)象
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// 防止循環(huán)引用
if ( target === copy ) {
continue;
}
// 遞歸處理深拷貝
if ( deep && copy &&; ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[ name ] = jQuery.extend( deep, clone, copy );
// 不處理未定義值
} else if ( copy !== undefined ) {
//給target增加屬性或方法
target[ name ] = copy;
}
}
}
}
//返回
return target;
};
弄懂了jQuery擴(kuò)展的原理,相信以后再也不用為編寫jQuery插件而煩惱了。
- 模仿JQuery.extend函數(shù)擴(kuò)展自己對(duì)象的js代碼
- Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)
- jQuery中extend函數(shù)詳解
- jQuery中extend函數(shù)詳解
- 原生js實(shí)現(xiàn)復(fù)制對(duì)象、擴(kuò)展對(duì)象 類似jquery中的extend()方法
- jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解
- Jquery中擴(kuò)展方法extend使用技巧
- jQuery插件擴(kuò)展extend的簡單實(shí)現(xiàn)原理
- 淺談jQuery中的$.extend方法來擴(kuò)展JSON對(duì)象
- jQuery中extend函數(shù)簡單用法示例
相關(guān)文章
jquery實(shí)現(xiàn)全屏滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全屏滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
JSONP 跨域訪問代理API-yahooapis實(shí)現(xiàn)代碼
介紹一個(gè)JSONP 跨域訪問代理API-yahooapis,需要的朋友可以參考下2012-12-12
Jquery和BigFileUpload實(shí)現(xiàn)大文件上傳及進(jìn)度條顯示
這篇文章主要介紹了Jquery和BigFileUpload實(shí)現(xiàn)大文件上傳及進(jìn)度條顯示的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jQuery監(jiān)聽瀏覽器窗口大小的變化實(shí)例
下面小編就為大家?guī)硪黄猨Query監(jiān)聽瀏覽器窗口大小的變化實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
jQuery實(shí)現(xiàn)簡單的下拉菜單導(dǎo)航功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的下拉菜單導(dǎo)航功能,涉及jQuery針對(duì)頁面元素的遍歷與節(jié)點(diǎn)修改相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
如何使用jquery修改css中帶有!important的樣式屬性
如何使用jquery修改css中帶有!important的樣式屬性?下面小編就為大家?guī)硪黄褂胘query修改css中帶有!important的樣式屬性方法。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2016-04-04

