zoukankan      html  css  js  c++  java
  • 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

    待续~~

  • 相关阅读:
    2. Add Two Numbers
    1. Two Sum
    22. Generate Parentheses (backTracking)
    21. Merge Two Sorted Lists
    20. Valid Parentheses (Stack)
    19. Remove Nth Node From End of List
    18. 4Sum (通用算法 nSum)
    17. Letter Combinations of a Phone Number (backtracking)
    LeetCode SQL: Combine Two Tables
    LeetCode SQL:Employees Earning More Than Their Managers
  • 原文地址:https://www.cnblogs.com/zhng/p/2374633.html
Copyright © 2011-2022 走看看