jQuery源代码学习jQuery对象扩展

//源代码地址 https://github.com/zhwq/node_j1/blob/master/nodeStepby/web/$_source/jq_test01_extend.html

1.整体认识

  1.1 jQuery中的 extend采用拷贝属性(一般拷贝、深度拷贝,不影响原对象)的方式进行对象的扩展。

  1.2 jQuery.extend(...),jQuery.fn.extend(...)分别给jQuery变量和jQuery原型对象扩展属性

  1.3常用方式

    1.3.1 $.extend({}, obj1, obj2);//合并obj1,obj2并返回新的对象(数组) 在jQuery插件中常用语扩展参数用

    1.3.2 $.extend(obj);//扩展$ 外部很少使用

    1.3.3 $.fn.extend();//常用jQuery插件的构建方式

2.jQuery源代码查看(最好是自己走一遍过程)

View Code
 1 //class2type 使用Object原型的toString方法构建常用类型映射-->判断变量类型
2 //Boolean Number String Function Array Date RegExp Object
3 //不在映射表中的数据类型统一为object
4 //空值null 返回 String(null);
5 //====================extend core
6 //作用: 增强this或者传入的参数
7 //TODO:常用的调用方式和结果
8 jQuery.extend = jQuery.fn.extend = function() {
9 var options,
10 name,
11 src,
12 copy,
13 copyIsArray,
14 clone,
15 target = arguments[0] || {},//初始化返回的对象
16 i = 1,
17 length = arguments.length,
18 deep = false;
19
20 /**深度拷贝参数 Handle a deep copy situation
21 //游标移动
22 //配置深度拷贝参数
23 //变更返回对象
24 */
25 if (typeof target === "boolean") {
26 deep = target;
27 target = arguments[1] || {};
28 // skip the boolean and the target//for in循环中会拷贝属性
29 i = 2;//0 1--->2
30 }
31
32 // Handle case when target is a string or something (possible in deep copy)
33 //返回值target不是对象类型或者不是函数时, 初始化为空对象(primitive object)
34 if (typeof target !== "object" && !jQuery.isFunction(target)) {
35 target = {};
36 }
37
38 // extend jQuery itself if only one argument is passed
39 //i == 2 则第一个为深度拷贝配置
40 //i == 1 则此时不是深度拷贝场景
41 //此时 length 1;2时;传入的参数构不成被增强对象和待增强的属性对象;
42 //此时 也及时增强extend的父对象;this的指向
43 if (length === i) {
44 target = this;
45 --i;
46 }//'游标'为深度拷贝参数后的第一个参数的下标
47
48 //增强之前一些参数的值
49 //deep 深度拷贝参数值
50 //i 第一个非深度拷贝参数的下标
51 //target 第一个非深度拷贝参数的引用;this对象;空对象(通常没有用,测试具体的场景);
52 for (; i < length; i++) {
53 // Only deal with non-null/undefined values
54 if ((options = arguments[ i ]) != null) {
55 // Extend the base object
56 for (name in options) {
57 src = target[ name ];//返回对象中对应key的值
58 copy = options[ name ];//增强的值
59
60 // Prevent never-ending loop
61 if (target === copy) {//此时 target为传入的参数的'某个'
62 continue;
63 }
64
65 // Recurse if we're merging plain objects or arrays
66 if (deep && //深度拷贝
67 copy && //有需要增强的属性
68 ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) )//待增强的是普通对象变量(不是dom节点或者window head object)或者数组
69 ) {
70 if (copyIsArray) {//如果为合并数组
71 copyIsArray = false;
72 //如果被增强对象中存在该项值+该项值为数组
73 // 返回数组对象
74 clone = src && jQuery.isArray(src) ? src : [];
75
76 } else {
77 //如果被增强对象中存在该项值+该项值为普通对象
78 // 返回对象
79 clone = src && jQuery.isPlainObject(src) ? src : {};
80 }
81
82 // Never move original objects, clone them
83 // 永不使用原始对象 克隆他们copy---> clone return clone;-->增强target
84 target[ name ] = jQuery.extend(deep, clone, copy);
85
86 // Don't bring in undefined values
87 //非深度拷贝情景中 拷贝非空值
88 } else if (copy !== undefined) {
89 target[ name ] = copy;
90 }
91 }
92 }
93 }
94
95 // Return the modified object
96 return target;
97 };
98 //====================extend core

待续~~

原文地址:https://www.cnblogs.com/zhng/p/2374633.html