正文

总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼容。

类型判断

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函数,这个在内部使用的函数有三个参数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);



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

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



现在扩展对象时就不会修改原对象中不对应的值。

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



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

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

深度扩展:

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

jQuery.extend 和jQuery.fn.extend

看jQuery的扩展,得益jQuery返回的是一个真实的jQuery对象,其内部使用jQuery.fn来划分了作用域,所以扩展上,因为this的不同,如果扩展jQuery对象,extend是直接扩展在jQuery本身上的,而fn.extend是扩展在jQuery.prototype原型对象上。而实现函数其实是一样的。

在jQuery中使用扩展时,如果除了第一个参数的boolean值之外,参数的长度等于内部定义的长度,都会扩展到jQuery自身,而zepto想要扩展到自身,可以将zepto对象设为第一个参数



jQuery在循环里加入了if ((options = arguments[i]) != null)所以当给null或undefined赋值时,直接返回扩展对象,而且因为上面的arguments长度判断,不会扩展到jQuery上去。而zepto则直接报错target[key] = source[key]

zepto:





jQuery:



jQuery中的extend语法与上面的zepto相同,在zepto里,最后对如果没有proto做了兼容:

在jQuery中$.extend()与$.fn.extend()是不同也相同的,在上面的源码里我们也看到了,jQuery.extend = jQuery.fn.extend,只是因为两个函数的this值指向不同,所以能够使用的场景也不同,可以大致分为动态和静态。在使用jQuery的过程中,jQuery的最外层匿名函数里会执行,返回一个jQuery对象,并与$一起绑在window上,所以引入文件之后已经存在,而动态指的是jQuery.fn.init(selector,context);所以需要先初始化再使用相应方法。

小结

这里将一些琐碎的知识点归纳了一下,事实上,zepto的扩展与jQuery的扩展在使用的方法上看起来一样,但jQuery更细。了解两者的区别能够在需要兼容zepto和jQuery时不会犯未知错误,也对扩展插件有更好的帮助。本文使用demo(有源码注释):jQuery与zepto的extend

jquery和zepto的扩展方法extend的更多相关文章

  1. 在jQuery定义自己的扩展方法函数

    今早复习昨天的练习jQuery的DropDownList联动功能,如果想看回<jQuery实现DropDownList(MVC)>http://www.cnblogs.com/insus/ ...

  2. jQuery对象扩展方法(Extend)深度解析

    1.这几天在写自己的Js工具类库,所以在编写对象扩展方法,参考了jQuery的对象扩展方法,在编写该方法前,需要掌握js深拷贝和浅拷贝的相关知识,下面是jQuery3.2.1版本对象扩展方法的源码: ...

  3. jquery源码解析:jQuery扩展方法extend的详解

    jQuery中要扩展方法或者属性都是通过extend方法实现的.所谓的jQuery插件也是通过extend方法实现的. jQuery.extend扩展的是工具方法,也就是静态方法.jQuery.fn. ...

  4. jquery validate验证插件扩展方法(转)

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  5. jquery中方法扩展 ($.fn & $.extend) 学习笔记

    A.$.fn 1.$.fn.method() 函数为jQuery对象扩展一个属性和方法(主要用于扩展方法) :method 为自定义方法名 ($.fn 等效 $.prototype) $.fn.bor ...

  6. JQuery的extend扩展方法

    jQuery.extend 函数使用详解   JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去 ...

  7. Jquery 扩展方法

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...

  8. jquery扩展方法

    jquery插件的开发包括两种:一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jquery类本身添加方法. jquery的全局函数就是属于jquery命名空间的函数,另一种是对象级 ...

  9. jQuery扩展方法笔记

    一.方式列表: 1.jQuery.extend(Object); // jQuery 本身的扩展方法 2.jQuery.fn.extend(Object); // jQuery 所选对象扩展方法 二. ...

随机推荐

  1. 最大半连通子图 bzoj 1093

    最大半连通子图 (1.5s 128MB) semi [问题描述] 一个有向图G = (V,E)称为半连通的(Semi-Connected),如果满足:∀ u, v ∈V,满足u->v 或 v - ...

  2. 通过Java代码实现对数据库的数据进行操作:增删改查

    在写代码之前,依然是引用mysql数据库的jar包文件:右键项目-构建路径-设置构建路径-库-添加外部JAR 在数据库中我们已经建立好一个表xs :分别有xuehao  xingming    xue ...

  3. php mail 函数发送邮件

    当然你可以通过php ,在自己的站点制作一个反馈表单, 我这次的需求是用email 的形式发送数据报表,结构比较简单 // 收件人地址(此处只可以写一个地址,写多个地址,只有最后一个地址生效) $to ...

  4. mysql binlog_row_image的选择

    其含义为 The default value is full. In MySQL 5.5 and earlier, full row images are always used for both b ...

  5. 今天思考一个问题,PHP const和static的区别

    static关键字在类中是,描述一个成员是静态的,static能够限制外部的访问,因为static后的成员是属于类的,是不属于任何对象实例,其他类是无法访问的,只对类的实例共享,能一定程序对该成员尽心 ...

  6. iOS xml文件的解析方式 XMLDictionary,GDataXMLNode,NSXMLParser

    iOS9之后,默认网络请求是https,所有我们要设置一下网络安全,具体设置如下 1.第三方类库 XMLDictionary 下载地址: https://github.com/nicklockwood ...

  7. javascript 设置input框只读属性 获取disabled后的值并传给后台

    input只读属性   有两种方式可以实现input的只读效果:disabled 和 readonly. 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同. Disabled说明该input ...

  8. SQL中Round(),Floor(),Ceiling()函数的浅析

    项目中的一个功能模块上用到了标量值函数,函数中又有ceiling()函数的用法,自己找了一些资料,对SQL中这几个函数做一个简单的记录,方便自己学习.有不足之处欢迎拍砖补充 1.round()函数遵循 ...

  9. JS二分查找

    二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法.查找过程可以分为以下步骤:(1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否 ...

  10. 如何监控ORACLE索引使用与否

    在数据库管理与维护中,我们总会遇到一个问题:我们创建的索引是否会被某些SQL语句使用呢?换个通俗表达方式:我创建的索引是否是未使用的索引(unused Indexes),是否有价值呢?如果创建的某个索 ...