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

 
zepto的extend_第1张图片
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); 
 
zepto的extend_第2张图片
4

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

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

 

 
zepto的extend_第3张图片
5

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

回到 $.extend函数,这里在内部使用arguments,所以该函数是不限参数的,如果想深度扩展,只需要把首个参数设为true。首先是简单扩展的:

 

var test2 = $.extend(test1,{name:"a",item:{name:"b",item:{name:"c"}}},{name:"d"}); console.log(test2); 
 
zepto的extend_第5张图片
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

转载于:https://www.cnblogs.com/ckAng/p/10521972.html

你可能感兴趣的:(zepto的extend)