extend 方法在js框架中的設計

今天來分析下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)

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

} 技巧（extend方法的妙用）：

1）實現元件引數的靈活配置，我們在寫元件的時候，可以使用一些預設的配置引數，但是如果使用者想定製一些特殊的樣式的話，可以使用extend方法

例如在寫jq外掛程式的時候

(function($) ,

c: false,

b: false

};var params = $.extend({}, defaults, options || {});

})(jquery)

2）實現類方法的拷貝。

extend 方法在js框架中的設計

extend 方法在js框架中的設計

jQuery中的extend方法

jquery中的extend 方法

extend 方法在js框架中的設計

extend 方法在js框架中的設計

jQuery中的extend方法

jquery中的extend 方法

相關推薦