jQuery 原理的類比代碼 -4 重要的擴充函數 extend

來源:互聯網
上載者:User

在上兩篇文章中,我們看到每次要通過 jQuery 的原型增加共用方法的時候,都需要通過 jQuery.fn 一個個進行擴充,非常麻煩,jQuery.fn.extend 提供了一個擴充機制,可以方便我們通過一個或者多個樣本對象來擴充某個對象。如果沒有指定被擴充的對象,那麼將擴充到自己身上。

 

jQuery.extend 也可以通過 jQuery.fn.extend 使用, 在 jQuery 中使用很多,用來為一個目標對象擴充成員,擴充的成員來自於一系列參考對象。

 

這樣,如果我們需要為 jQuery.fn 擴充成員 removeData,就可以這樣進行。

jQuery.fn.extend(
  {
          removeData: function( key ) {
               return this.each(function() {
                   jQuery.removeData( this, key );
               });
          }
  }
);

 

 extend 的源碼如下,因為比較簡單,所以沒有做太多的精簡。

 

 1 /// <reference path="jQuery-core.js" />
 2 
 3
 4 jQuery.extend = jQuery.fn.extend = function () {
 5     // copy reference to target object
 6     var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
 7 
 8     // 深拷貝情況,第一個參數為 boolean 類型,那麼,表示深拷貝,第二個參數為目標對象
 9     if (typeof target === "boolean") {
10         deep = target;
11         target = arguments[1] || {};
12         // skip the boolean and the target
13         i = 2;
14     }
15 
16     // 如果目標不是對象也不是函數
17     if (typeof target !== "object" && !jQuery.isFunction(target)) {
18         target = {};
19     }
20 
21     // 如果只有一個參數就是擴充自己
22     if (length === i) {
23         target = this;
24         --i;
25     }
26 
27     // 遍曆所有的參考對象,擴充到目標對象上
28     for (; i < length; i++) {
29         // Only deal with non-null/undefined values
30         if ((options = arguments[i]) != null) {
31             // Extend the base object
32             for (name in options) {
33                 src = target[name];
34                 copy = options[name];
35 
36                 // Prevent never-ending loop
37                 if (target === copy) {
38                     continue;
39                 }
40 
41                 // Recurse if we're merging object literal values or arrays
42                 if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {
43                     var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src
44                         : jQuery.isArray(copy) ? [] : {};
45 
46                     // Never move original objects, clone them
47                     target[name] = jQuery.extend(deep, clone, copy);
48 
49                     // Don't bring in undefined values
50                 } else if (copy !== undefined) {
51                     target[name] = copy;
52                 }
53             }
54         }
55     }
56 
57     // Return the modified object
58     return target;
59 };

 

 jQuery 原理的類比代碼 -0 目錄

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.