zoukankan      html  css  js  c++  java
  • zepto的extend

    类型判断

    var class2type = {},toString = class2type.toString,$={};
    //判断类型
    function type(obj) {
      return obj == null ? String(obj) : class2type[toString.call(obj)] || "object"
    }
    //对象
    function isObject(obj) {
      return type(obj) == "object"
    }
    //字面量对象
    function isPlainObject(obj) {
      return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype
    }
    function isArray(arr){
      return Array.isArray(arr) || arr instanceof Array
    }
    

    zepto.extend

     
    3

    zepto中的扩展,我们可以看到,首先是定义了一个extend函数,这个在内部使用的函数有三个参数target,source,deep。target是将被扩展的对象,source是扩展的对象,deep代表是否深度扩展。那么就直接看第三个参数了。
    我们可以看到,在extend函数中,即使使用了深度扩展,也会通过递归函数来重新扩展,最后都会是targte[key]=source[key],而区别是:

    //test1
    var test1 = {
      name:"a",
      item:{
        name:"b",
        nickname:"c"
      }
    };
    
    //简单扩展
    extend(test1,{name:"a",item:{name:"b",item:{name:"c"}}});
    console.log(test1);
    
     
    4

    可以看到,在没有使用deep时,会直接扩展对象的第一层属性,并直接覆盖。但如果使用了deep:

    //深度扩展
    extend(test1,{name:"a",item:{name:"b",item:{name:"c"}}},true);
    console.log(test1);
    
     
    5

    现在扩展对象时就不会修改原对象中不对应的值。
    然后是$.extend,这个是可以在外部使用的扩展函数,直接在$对象上定义的,zepto的插件扩展可以不需要通过$.extend扩展到zepto对象里,因为zepto的dom.__proto__ = $.fn,zepto.Z.prototype = $.fn,且返回的是$。所以我们可以看见在zepto其他的模块里,给zepto添加动态方法时,是这样直接扩展的:
     
    6

    回到$.extend函数,这里在内部使用arguments,所以该函数是不限参数的,如果想深度扩展,只需要把首个参数设为true。首先是简单扩展的:
    var test2 = $.extend(test1,{name:"a",item:{name:"b",item:{name:"c"}}},{name:"d"});
    console.log(test2);
    
     
    7

    深度扩展:

    var test2 = $.extend(true,test1,{name:"a",item:{name:"b",item:{name:"c"}}},{name:"d",item:{name:"e"}});
    console.log(test2);
    
     




    链接:https://www.jianshu.com/p/bdffa1468ed3

  • 相关阅读:
    前端基础之BOM和DOM
    JavaScript
    css-属性、样式调节
    计算机操作系统
    计算机组成原理
    计算机基础之编程
    css-选择器
    HTML-标签
    python打印有色字体
    mysql 数据库语法详解
  • 原文地址:https://www.cnblogs.com/ckAng/p/10521972.html
Copyright © 2011-2022 走看看