jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解

更新時(shí)間：2015年02月03日 09:25:29 作者：Hito''''s Blog

這篇文章主要介紹了jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解,extend()函數(shù)用于jQuery插件的開發(fā),本文主要分析它的實(shí)現(xiàn)原理,需要的朋友可以參考下

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

在jQuery的API手冊中，我們看到，extend實(shí)際上是掛載在jQuery和jQuery.fn上的兩個不同方法，盡管在jQuery內(nèi)部jQuery.extend()和jQuery.fn.extend()是用相同的代碼實(shí)現(xiàn)的，但是它們的功能卻不太一樣。來看一下官方API對extend的解釋:

復(fù)制代碼代碼如下:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把兩個或者更多的對象合并到第一個當(dāng)中)

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把對象掛載到j(luò)Query的prototype屬性，來擴(kuò)展一個新的jQuery實(shí)例方法)

我們知道，jQuery有靜態(tài)方法和實(shí)例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的第一個區(qū)別就是一個用來擴(kuò)展靜態(tài)方法，一個用來擴(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都會被選擇

注意兩種調(diào)用插件的方式，一種是直接用$調(diào)用，另外一種是用$()調(diào)用，另外jQuery.extend()接收多個對象作為參數(shù)，如果只有一個參數(shù)，則把這個對象的屬性方法附加到j(luò)Query上，如果含有多個參數(shù)，則把后面的對象的屬性和方法附加到第一個對象上。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 &lt; 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()中有多個參數(shù)時(shí)的對象合并，深度拷貝問題，如果去掉這些功能，讓extend只有擴(kuò)展靜態(tài)和實(shí)例方法的功能，那么代碼如下:

jQuery.extend = jQuery.fn.extend = function(obj){
 //obj是傳遞過來擴(kuò)展到this上的對象
 var target=this;
 for (var name in obj){
 //name為對象屬性
 //copy為屬性值
 copy=obj[name];
 //防止循環(huán)調(diào)用
 if(target === copy) continue;
 //防止附加未定義值
 if(typeof copy === 'undefined') continue;
 //賦值
 target[name]=copy;
 }
 return target;
}

下面再來對extend方法進(jìn)行注釋解釋:

jQuery.extend = jQuery.fn.extend = function() {
 // 定義默認(rèn)參數(shù)和變量
 // 對象分為擴(kuò)展對象和被擴(kuò)展的對象 
 //options 代表擴(kuò)展的對象中的方法
 //name 代表擴(kuò)展對象的方法名
 //i 為擴(kuò)展對象參數(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ù)谝粋€參數(shù)為布爾類型是，次參數(shù)定義是否為深拷貝
 //對接下來的參數(shù)進(jìn)行處理
 if ( typeof target === "boolean" ) {
 deep = target;
 target = arguments[1] || {};
 // 當(dāng)定義是否深拷貝時(shí)，參數(shù)往后移動一位
 i = 2;
 }
 // 如果要擴(kuò)展的不是對象或者函數(shù)，則定義要擴(kuò)展的對象為空
 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
 target = {};
 }
 // 當(dāng)只含有一個參數(shù)時(shí)，被擴(kuò)展的對象是jQuery或jQuery.fn
 if ( length === i ) {
 target = this;
 --i;
 }
 //對從i開始的多個參數(shù)進(jìn)行遍歷
 for ( ; i &lt; length; i++ ) {
 // 只處理有定義的值
 if ( (options = arguments[ i ]) != null ) {
 // 展開擴(kuò)展對象
 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插件而煩惱了。

您可能感興趣的文章: