在上兩篇文章中,我們看到每次要通過 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 目錄