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
![](http://upload-images.jianshu.io/upload_images/2963329-5ccc2a0dfe1c601f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/488/format/webp)
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);
![](http://upload-images.jianshu.io/upload_images/2963329-8955bc2c8acc3f98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/415/format/webp)
可以看到,在没有使用deep时,会直接扩展对象的第一层属性,并直接覆盖。但如果使用了deep:
//深度扩展
extend(test1,{name:"a",item:{name:"b",item:{name:"c"}}},true);
console.log(test1);
![](http://upload-images.jianshu.io/upload_images/2963329-a37b1f8385be3dbd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/309/format/webp)
现在扩展对象时就不会修改原对象中不对应的值。
然后是$.extend,这个是可以在外部使用的扩展函数,直接在$对象上定义的,zepto的插件扩展可以不需要通过$.extend扩展到zepto对象里,因为zepto的dom.__proto__ = $.fn,zepto.Z.prototype = $.fn
,且返回的是$。所以我们可以看见在zepto其他的模块里,给zepto添加动态方法时,是这样直接扩展的:
![](http://upload-images.jianshu.io/upload_images/2963329-3b3930a27efd14ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/755/format/webp)
回到$.extend函数,这里在内部使用arguments,所以该函数是不限参数的,如果想深度扩展,只需要把首个参数设为true。首先是简单扩展的:
var test2 = $.extend(test1,{name:"a",item:{name:"b",item:{name:"c"}}},{name:"d"});
console.log(test2);
![](http://upload-images.jianshu.io/upload_images/2963329-36f171c09b69053f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/326/format/webp)
深度扩展:
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
zepto的extend的更多相关文章
- jquery和zepto的扩展方法extend
jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...
- 从JS的深拷贝与浅拷贝到jq的$.extend()方法
一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型 ...
- 移动端HTML5实现文件上传
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术 ...
- 前端开发之旅- 移动端HTML5实现文件上传
一. 在一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...
- (jQuery||Zepto).extend 的一个小问题
最近一直在搞移动端,也由于自己对jQuery比较熟悉,再加上Zepto提供了跟jQuery一样的API,所以就选择了Zepto作为开发框架. 由于是移动端开发,所以也应用了一些ES5新增的API,比如 ...
- TypeScript为Zepto编写LazyLoad插件
平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- [原创]zepto打造一款移动端划屏插件
最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
随机推荐
- 详解区块链P2P网络
根据前一篇文章<从微观到宏观理解区块链>我们已经了解到,微观上,区块链本质就是一种不可篡改且可追踪溯源的哈希链条:宏观上,还具备了另外三个基本特征:分布式存储.P2P 网络和共识机制.分布 ...
- html面页与JAVA通过webSocket 通讯
(原) 往常前后端通讯基本都是以ajax请求或是表单做数据交互的,这是一种无状态的http协议,如果要做tcp协议的数据交互,能想到的技术也就socket了,可如果后端是JAVA,前端如何做socke ...
- centos7下如何隐藏nginx的版本号
我们在访问nginx的时候会暴露nginx的版本号,如何将这些版本号隐藏呢? 其实隐藏版本号非常简单 在nginx的配置文件中添加一个server——tokens off:参数就可以了,下面进行操作 ...
- 对tomcat7模拟并发请求及相关配置参数的含义
这里的并不是真正的并发请求,因为for循环是间隔10毫秒,并且线程初始化也需要时间的,到真正执行http请求的时刻是不确定的. tomcat 的运行状态可以在webapps下的manage项目查看, ...
- [HEOI2016/TJOI2016]字符串
嘟嘟嘟 今天复习一下SAM. lcp固然不好做,干脆直接翻过来变成后缀.首先答案一定满足单调性,所以我们二分lcp的长度\(mid\),然后判断\(s[d \ldots d + mid - 1]\)是 ...
- rabbitmq官方的六种工作模式
1.RabbitMq1.1介绍RabbitMQ是一个消息代理:它接受并转发消息.你可以把它当成一个邮局:当你想邮寄信件的时候,你会把信件放在投递箱中,并确信邮递员最终会将信件送到收件人的手里.在这个例 ...
- hyperledger中文文档学习-4-构建第一个fabric网络
接下来的操作都将在hyperledge环境安装构建的虚拟机的环境下进行 参考https://hyperledgercn.github.io/hyperledgerDocs/build_network_ ...
- day25 Python
一.day24复习 class school: x=1 #__init__初始化函数,用来帮类实例化一个具体的对象 def __init__(self,name,addr): #前面的Name是一个需 ...
- Node.js读取某个目录下的所有文件夹名字并将其写入到json文件
针对解决的问题是,有些时候我们需要读取某个文件并将其写入到对应的json文件(xml文件也行,不过目前用json很多,json是主流). 源码如下:index.js var fs = require( ...
- 论文笔记---Deblurring Shaken and Partially Saturated Images
抖动和部分饱和图像去模糊 摘要 我们解决了由相机抖动造成的模糊和饱和或过度曝光像素导致的图像去模糊的问题.饱和像素对于现有的非盲去模糊算法是一个问题,因为它们不符合图像形成过程是线性的这一假设,并且经 ...