类型判断

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

zepto的extend的更多相关文章

  1. jquery和zepto的扩展方法extend

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

  2. 从JS的深拷贝与浅拷贝到jq的$.extend()方法

    一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型 ...

  3. 移动端HTML5实现文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术 ...

  4. 前端开发之旅- 移动端HTML5实现文件上传

    一. 在一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  5. (jQuery||Zepto).extend 的一个小问题

    最近一直在搞移动端,也由于自己对jQuery比较熟悉,再加上Zepto提供了跟jQuery一样的API,所以就选择了Zepto作为开发框架. 由于是移动端开发,所以也应用了一些ES5新增的API,比如 ...

  6. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  7. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  8. [原创]zepto打造一款移动端划屏插件

    最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...

  9. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

随机推荐

  1. mysql 数据库基础命令

    数据库命令: 进入 mysql 库; use mysql; 查看用户权限 select * from user where user='root' \G; 创建数据库 create database ...

  2. UVA10817-Headmaster's Headache(动态规划基础)

    Problem UVA10817-Headmaster's Headache Time Limit: 4500 mSec Problem Description Input The input con ...

  3. docker 1 为什么要使用docker

    一款产品从开发到上线,从操作系统,到运行环境,再到应用配置.做为开发+运维之间的协作,我们需要关心很多东西,这也就是很多互联网公司都不得不面对的问题,特别是各种版本的迭代后,不同版本环境的兼容,对运维 ...

  4. Sharding-JDBC实践(一)简介

    转载自:ShardingSphere官网 目录 一.介绍 1. Sharding-JDBC 2. Sharding-Proxy 3. Sharding-Sidecar(TBD) 4. 混合架构 二.功 ...

  5. [MicroPython]STM32F407开发板DIY声光控开关

    1.实验目的 1. 学习在PC机系统中扩展简单I/O 接口的方法. 2. 进一步学习编制数据输出程序的设计方法. 3. 学习光敏模块的工作原理. 4. 学习声音的工作原理. 5. 学习F40 7Mic ...

  6. HyperLedger Fabric 1.0的Transaction处理流程

    如果把区块链比作一个只能读写,不能删改的分布式数据库的话,那么事务和查询就是对这个数据库进行的最重要的操作.以比特币来说,我们通过钱包或者Blockchain.info进行区块链的查询操作,而转账行为 ...

  7. Python学习总结 13 Scrapy

    当前环境是 Win8 64位的,使用的Python 3.5 版本. 一 安装Scrapy 1,安装 lxml pip install lxml -i https://pypi.douban.com/s ...

  8. 【转】强化学习(一)Deep Q-Network

    原文地址:https://www.hhyz.me/2018/08/05/2018-08-05-RL/ 1. 前言 虽然将深度学习和增强学习结合的想法在几年前就有人尝试,但真正成功的开端就是DeepMi ...

  9. CAP理论与分布式事务解决方案

    微服务系统所设计的系统是分布式系统.分布式系统有一个著名的CAP理论,即同时满足"一致性""可用性"和"分区容错"是一件不可能的事.CAP理 ...

  10. Python股票分析系列——基础股票数据操作(二).p4

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第4部分.在本教程中,我们将基于Adj Close列创建烛台/ OHLC图,这将允许我介绍重新采 ...