擴充jQuery靜態方法:extend(dest,src1,src2,src3...srcN)

來源:互聯網
上載者:User

文章簡介:Jquery的擴充方法extend是我們在寫外掛程式的過程中常用的方法,該方法有一些重載原型,在此,我們一起去瞭解瞭解。

Jquery的擴充方法extend是我們在寫外掛程式的過程中常用的方法,該方法有一些重載原型,在此,我們一起去瞭解瞭解。

1. extend(src), 擴充jQuery靜態方法.

也就是說,將src對象的屬性和方法逐一複製給jQuery

Java代碼
  1. $.extend({
  2. test:function(){alert('test函數')}
  3. })
2. extend(dest,src1,src2,src3...srcN) ,合并多個對象.

為jQuery.extend(css1,css2)為例,css1,css2各有一些屬性(方法照樣會如此處理,這裡只講屬性).
extend函數會把css2有而css2沒有的屬性加到css1中,如果css2的某個屬性與css1的某個屬性名稱享用,就會用css2的屬性去覆蓋css1的同名屬性。css1就是最後的整和對象。或者也可以用:

var newcss = jquery.extend(css1,css2) newcss就是合并的新對象。

var newcss = jquery.extend({},css1,css2) newcss就是合并的新對象.而且沒有破壞css1的結構。

Java代碼
  1. //用法: jQuery.extend(obj1,obj2,obj3,..)
  2. ar Css1={size: "10px",style:"oblique"}
  3. var Css2={size: "12px",style:"oblique",weight:"bolder"}
  4. $.jQuery.extend(Css1,Css2)
  5. //結果:Css1的size屬性被覆蓋,而且繼承了Css2的weight屬性
  6. // Css1 = {size: "12px",style: "oblique",weight: "bolder"}7
3. extend(boolean,dest,src1,src2...),深度鑲套對象

新的extend()允許你更深度的合并鑲套對象。下面的例子是一個很好的證明。

Java代碼
  1. // 以前的 .extend()
  2. jQuery.extend(
  3. { name: “John”, location: { city: “Boston” } },
  4. { last: “Resig”, location: { state: “MA” } }
  5. );
  6. // 結果:
  7. // => { name: “John”, last: “Resig”, location: { state: “MA” } }
  8. // 新的更深入的 .extend()
  9. jQuery.extend( true,
  10. { name: “John”, location: { city: “Boston” } },
  11. { last: “Resig”, location: { state: “MA” } }
  12. );
  13. // 結果
  14. // => { name: “John”, last: “Resig”,
  15. // location: { city: “Boston”, state: “MA” } } 1617

與其他的類庫不同的是,jQuery的extend方法提供了“深層拷貝”的功能,如果你傳入的第一個參數為boolean型變數,則該變數為深層拷貝的標誌,第二個參數為extend方法的目標對象,其餘參數為需要進行繼承的“父類”。如果第一個參數的值為true(深層拷貝),並且dest和 src元素都包括相同名稱的對象屬性,則對該對象屬性的方法和屬性再進行一次複製。

* 最後我們來通過分析原始碼,來加深對該繼承機制的理解:

jQuery.extend = jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] {}, i = 1, length = arguments.length, deep = false, options;

// Handle a deep copy situation
if ( target.constructor == 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" && typeof target != "function" )
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 ( var name in options ) {
var src = target[ name ], copy = options[ name ];

// Prevent never-ending loop
if ( target === copy )
continue;

// Recurse if we're merging object values
if ( deep && copy && typeof copy == "object" && !copy.nodeType )
target[ name ] = jQuery.extend( deep,
// Never move original objects, clone them
src ( copy.length != null ? [ ] : { } )
, 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.prototype賦值給jQuery.fn了,所以在後面的調用中會出現 jQuery.extend()和jQuery.fn.extend()的不同調用,這兩個方法調用產生的結果也不一樣,jQuery.extend() 的調用並不會把方法擴充到對象的執行個體上,引用它的方法也需要通過jQuery類來實現,如jQuery.init(),而 jQuery.fn.extend()的調用把方法擴充到了對象的prototype上,所以執行個體化一個jQuery對象的時候,它就具有了這些方法,這是很重要的,在jQuery.js中到處體現這一點



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。