**:
今天來分析下extend方法在各種js框架下的設計。這個函式的功能基本都是實現物件的拷貝功能,即將乙個物件的所有屬屬性拷貝到另外乙個物件上去,這個函式使用的頻率也很高,如果我們要將乙個類的所有方法拷貝到另外方法上去,使用這個方法很方便的。
};僅有2個引數,extend(target,source),第乙個引數是目標物件,第二個引數是原物件 ,對原物件中的每個屬性進行判斷,如果是,那麼將他拷貝到目標的物件上去。
2)在jquery 中的實現:
jquery.extend = jquery.fn.extend = function() ,
i = 1,
length = arguments.length,
deep = false;
//如果第乙個值為bool值,那麼就將第二個引數作為目標引數,同時目標引數從2開始計數
if ( typeof target === "boolean" ) ;
// skip the boolean and the target
i = 2;
}// 當目標引數不是object 或者不是函式的時候,設定成object型別的
if ( typeof target !== "object" && !jquery.isfunction(target) ) ;
}//如果extend只有乙個函式的時候,那麼將跳出後面的操作
if ( length === i )
for ( ; i < length; i++ )
// 如果我們拷貝的物件是乙個物件或者陣列的話
if ( deep && copy && ( jquery.isplainobject(copy) || (copyisarray = jquery.isarray(copy)) ) ) else ;
}//不刪除目標物件,將目標物件和原物件重新拷貝乙份出來。
target[ name ] = jquery.extend( deep, clone, copy );
// 如果options[name]的不為空,那麼將拷貝到目標物件上去。
} else if ( copy !== undefined ) }}
}// 返回修改的目標物件
return target;
}; jquery的實現原理和tangram差不多,也是講原物件的屬性分別拷貝到目標物件上去,不過jq可以接受的引數比tangram要多,他可以接受無限和引數,如果第乙個引數為true的話,將執行深度拷貝,將原物件和目標物件中的某些屬性值合併起來。
3)protype.js的實現方式
function extend(destination, source)
也是遍歷原 物件的各種屬性,然後將他拷貝到目標物件上去。實現的方式和tangram類似。
4)dojo的實現
dojo.extend = function(/*object*/ constructor, /*object...*/ props)
return constructor; // object
} var extranames, extralen, empty = {};
for(var i in )
dojo._extranames = extranames = extranames || ["hasownproperty", "valueof", "isprototypeof",
"propertyisenumerable", "tolocalestring", "tostring", "constructor"];
extralen = extranames.length;
dojo._mixin = function(/*object*/ target, /*object*/ source)
}// ie doesn't recognize some custom functions in for..in
if(extralen && source)}}
return target; // object
} dojo首先會封裝乙個_mixin方法,該方法起到的作用其實就是extend該起到的作用,然後再背部呼叫_mixin()方法,封裝的extend方法可以接受多個引數,同時將原物件的每個屬性都拷貝到目標物件的原型方法上。
技巧(extend方法的妙用):
1)實現元件引數的靈活配置,我們在寫元件的時候,可以使用一些預設的配置引數,但是如果使用者想定製一些特殊的樣式的話,可以使用extend方法
例如在寫jq外掛程式的時候
(function($) ,
c: false,
b: false
};var params = $.extend({}, defaults, options || {});
//接下來對函式進行處理。
} })(jquery)
2)實現類方法的拷貝。
extend 方法在js框架中的設計
今天來分析下extend方法在各種js框架下的設計。這個函式的功能基本都是實現物件的拷貝功能,即將乙個物件的所有屬屬性拷貝到另外乙個物件上去,這個函式使用的頻率也很高,如果我們要將乙個類的所有方法拷貝到另外方法上去,使用這個方法很方便的。僅有2個引數,extend target,source 第乙個...
jQuery中的extend方法
jquery 中的extend方法jquery中的extend方法通過不同的引數實現了幾種不同的繼承方法 1.extend src 將src物件的屬性和方法逐一複製給jquery或jquery物件 2.extend dest,src1,src2,src3.srcn 將 src1 src2.物件的屬性...
jquery中的extend 方法
通常我們使用jquery的extend 方法時,大都是為了實現預設欄位的覆蓋,即若傳入某個欄位的值,則使用傳入值,否則使用預設值。function getopt option extend default,option return default getopt getopt getopt exte...