读 Zepto 源码之内部方法
数组方法
定义
var emptyArray = []
concat = emptyArray.concat
filter = emptyArray.filter
slice = emptyArray.slice
zepto 一开始就定义了一个空数组 emptyArray
,定义这个空数组是为了取得数组的 concat
、filter
、slice
方法
compact
function compact(array) {
return filter.call(array, function(item) {
return item != null
})
}
删除数组中的 null
和 undefined
这里用的是数组的 filter
方法,过滤出 item != null
的元素,组成新的数组。这里删除掉 null
很容易理解,为什么还可以删除 undefined
呢?这是因为这里用了 !=
,而不是用 !==
,用 !=
时, null
各 undefined
都会先转换成 false
再进行比较。
关于 null
和 undefined
推荐看看这篇文章: undefined与null的区别
flatten
function flatten(array) {
return array.length > 0 ? $.fn.concat.apply([], array) : array
}
将数组扁平化,例如将数组 [1,[2,3],[4,5],6,[7,[89]]
变成 [1,2,3,4,5,6,7,[8,9]]
,这个方法只能展开一层,多层嵌套也只能展开一层。
这里,我们先把 $.fn.concat
等价于数组的原生方法 concat
,后面的章节也会分析 $.fn.concat
的。
这里比较巧妙的是利用了 apply
,apply
会将 array
中的 item
当成参数,concat.apply([], [1,2,3,[4,5]])
相当于 [].concat(1,2,3,[4,5])
,这样数组就扁平化了。
uniq
uniq = function(array) {
return filter.call(array, function(item, idx) {
return array.indexOf(item) == idx
})
}
数组去重。
数组去重的原理是检测 item
在数组中第一次出现的位置是否和 item
所处的位置相等,如果不相等,则证明不是第一次出现,将其过滤掉。
字符串方法
camelize
camelize = function(str) {
return str.replace(/-+(.)?/g, function(match, chr) {
return chr ? chr.toUpperCase() : ''
})
}
将 word-word
的形式的字符串转换成 wordWord
的形式, -
可以为一个或多个。
正则表达式匹配了一个或多个 -
,捕获组是捕获 -
号后的第一个字母,并将字母变成大写。
dasherize
function dasherize(str) {
return str.replace(/::/g, '/')
.replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
.replace(/([a-z\d])([A-Z])/g, '$1_$2')
.replace(/_/g, '-')
.toLowerCase()
}
将驼峰式的写法转换成连字符 -
的写法。
例如 a = A6DExample::Before
第一个正则表达式是将字符串中的 ::
替换成 /
。a
变成 A6DExample/Before
第二个正则是在出现一次或多次大写字母和出现一次大写字母和连续一次或多次小写字母之间加入 _
。a
变成 A6D_Example/Before
第三个正则是将出现一次小写字母或数字和出现一次大写字母之间加上 _
。a
变成A6_D_Example/Before
第四个正则表达式是将 _
替换成 -
。a
变成A6-D-Example/Before
最后是将所有的大写字母转换成小写字母。a
变成 a6-d-example/before
我对正则不太熟悉,正则解释部分参考自:zepto源码--compact、flatten、camelize、dasherize、uniq--学习笔记
数据类型检测
定义
class2type = {},
toString = class2type.toString,
// Populate the class2type map
$.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type["[object " + name + "]"] = name.toLowerCase()
})
$.each 函数后面的文章会讲到,这段代码是将基本类型挂到 class2type
对象上。class2type
将会是如下的形式:
class2type = {
"[object Boolean]": "boolean",
"[object Number]": "number"
...
}
type
function type(obj) {
return obj == null ? String(obj) :
class2type[toString.call(obj)] || "object"
}
type
函数返回的是数据的类型。
如果 obj == null
,也就是 null
和 undefined
,返回的是字符串 null
或 undefined
否则调用 Object.prototype.toString
(toString = class2type.toString
)方法,将返回的结果作为 class2type
的 key 取值。Object.prototype.toString
对不同的数据类型会返回形如 [object Boolean]
的结果。
如果都不是以上情况,默认返回 object
类型。
isFunction & isObject
function isFunction(value) {
return type(value) === 'function'
}
function isObject(obj) {
return type(obj) == 'object'
}
调用 type
函数,判断返回的类型字符串,就知道是什么数据类型了
isWindow
function isWindow(obj) {
return obj != null && obj == obj.window
}
判断是否为浏览器的 window
对象
要为 window
对象首先要满足的条件是不能为 null
或者 undefined
, 并且 obj.window
为自身的引用。
isDocument
function isDocument(obj) {
return obj != null && obj.nodeType == obj.DOCUMENT_NODE
}
判断是否为 document
对象
节点上有 nodeType
属性,每个属性值都有对应的常量。document
的 nodeType
值为 9
,常量为 DOCUMENT_NODE
。
isPlainObject
function isPlainObject(obj) {
return isObject(obj) && !isWindow(obj) && Object.getPrototypeof(obj) == Object.prototype
}
判断是否为纯粹的对象
纯粹对象首先必须是对象 isObject(obj)
并且不是 window
对象 !isWindow(obj)
并且原型要和 Object
的原型相等
isArray
isArray = Array.isArray ||
function(object) { return object instanceof Array}
这个方法来用判断是否为数组类型。
如果浏览器支持数组的 isArray
原生方法,就采用原生方法,否则检测数据是否为 Array
的实例。
我们都知道,instanceof
的检测的原理是查找实例的 prototype
是否在构造函数的原型链上,如果在,则返回 true
。 所以用 instanceof
可能会得到不太准确的结果。例如:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
var fwindow = window.framePage.contentWindow // frame 页面的window对象
var fArray = fwindow.Array // frame 页面的Array
var fdata = fwindow.data // frame 页面的 data [1,2,3]
console.log(fdata instanceof fArray) // true
console.log(fdata instanceof Array) // false
}
</script>
<title>Document</title>
</head>
<body>
<iframe id="framePage" src="frame.html" frameborder="0"></iframe>
</body>
</html>
frame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.data = [1,2,3]
</script>
</head>
<body>
<p>frame page</p>
</body>
</html>
由于 iframe
是在独立的环境中运行的,所以 fdata instanceof Array
返回的 false
。
在 MDN 上看到,可以用这样的 ployfill 来使用 isArray
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]'
}
}
也就是说,isArray
可以修改成这样:
isArray = Array.isArray ||
function(object) { return Object.prototype.toString.call(object) === '[object Array]'}
为什么 zepto 不这样写呢?知道的可以留言告知下。
likeArray
function likeArray(obj) {
var length = !!obj && // obj必须存在
'length' in obj && // obj 中必须存在 length 属性
obj.length, // 返回 length的值
type = $.type(obj) // 调用 type 函数,返回 obj 的数据类型。这里我有点不太明白,为什么要覆盖掉上面定义的 type 函数呢?再定义多一个变量,直接调用 type 函数不好吗?
return 'function' != type && // 不为function类型
!isWindow(obj) && // 并且不为window类型
(
'array' == type || length === 0 || // 如果为 array 类型或者length 的值为 0,返回true
(typeof length == 'number' && length > 0 && (length - 1) in obj) // 或者 length 为数字,并且 length的值大于零,并且 length - 1 为 obj 的 key
)
}
判断是否为数据是否为类数组。
类数组的形式如下:
likeArrayData = {
'0': 0,
'1': 1,
"2": 2
length: 3
}
可以看到,类数组都有 length
属性,并且 key
为按0,1,2,3
顺序的数字。
代码已经有注释了,这里再简单总结下
首先将 function
类型和 window
对象排除
再将 type 为 array
和 length === 0
的认为是类数组。type 为 array
比较容易理解,length === 0
其实就是将其看作为空数组。
最后一种情况必须要满足三个条件:
length
必须为数字length
必须大于0
,表示有元素存在于类数组中- key
length - 1
必须存在于obj
中。我们都知道,数组最后的index
值为length -1
,这里也是检查最后一个key
是否存在。
系列文章
参考
- MDN文档:Array.isArray()
- MDN文档:Function.prototype.apply()
- MDN文档:Node.nodeType
- undefined与null的区别
- zepto源码--compact、flatten、camelize、dasherize、uniq--学习笔记
读 Zepto 源码之内部方法的更多相关文章
- 读Zepto源码之内部方法
数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray ...
- 读 zepto 源码之工具函数
Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性.目标对象的同名属性会被源对象的 ...
- 读 Zepto 源码之神奇的 $
经过前面三章的铺垫,这篇终于写到了戏肉.在用 zepto 时,肯定离不开这个神奇的 $ 符号,这篇文章将会看看 zepto 是如何实现 $ 的. 读Zepto源码系列文章已经放到了github上,欢迎 ...
- 读Zepto源码之集合操作
接下来几个篇章,都会解读 zepto 中的跟 dom 相关的方法,也即源码 $.fn 对象中的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码 ...
- 读 Zepto 源码之集合元素查找
这篇依然是跟 dom 相关的方法,侧重点是跟集合元素查找相关的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zept ...
- 读Zepto源码之操作DOM
这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...
- 读Zepto源码之样式操作
这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2. ...
- 读Zepto源码之属性操作
这篇依然是跟 dom 相关的方法,侧重点是操作属性的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2. ...
- 读Zepto源码之Event模块
Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...
随机推荐
- Angular2 路由问题修复 、求解
Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题.为了说明今天的问题,我特地新建了一个测试工程.欢迎交流. 首先介 ...
- 快速排序OC、Swift版源码
前言: 你要问我学学算法在工作当中有什么用,说实话,当达不到那个地步的时候,可能我们不能直接的感觉到它的用处!你就抱着这样一个心态,当一些APP中涉及到算法的时候我不想给其他人画界面!公司的项目也是暂 ...
- ES6-01:常量与变量的声明
首先,我们声明一个变量: //定义一个变量num,并赋值为10: let num = 10; //进行打印 console.log(num); let与var有所不同: 语法特点1:let变量只能在当 ...
- Python字典详解
转载请注明出处 Python字典(dict)是一个很常用的复合类型,其它常用符合类型有:数组(array).元组(touple)和集合(set).字典是一个key/value的集合,key可以是任意可 ...
- 简单总结在51cto平台的两日学习
许久未曾静下心写东西,希望这会是一个好习惯的开始. 一次偶然的机会,大概是160415在Applestore邂逅51cto,看了点评果断下载,着实是一款优秀的学习软件. 由于最近正在用python写自 ...
- mac air 上的Linux命令训练(1)
1.cat命令 作用: 读取一个文件的全部内容,并将它输出,如果将它输出到一个目标文件,目标文件将会被替换掉. 参数: -n : 加上行号输出 -b:加上行号,但是不加空白行,输出 -s:当遇到多行空 ...
- app 评分
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #822e0e } p.p2 { margin: 0.0px 0. ...
- POJ 2182 解题报告
Lost Cows Time Limit: 1000 MS Memory Limit: 65536 KB Description N (2 <= N <= 8,000) cows have ...
- 【原创】有关Buffer使用,让你的日志类库解决IO高并发写
[本人原创],欢迎交流和分享技术,转载请附上如下内容: 作者:itshare [转自]http://www.cnblogs.com/itshare/ 通常我们知道,当一个日志借口被外部程序多个线程请求 ...
- RabbitMQ-从基础到实战(4)— 消息的交换(下)
0.目录 RabbitMQ-从基础到实战(1)- Hello RabbitMQ RabbitMQ-从基础到实战(2)- 防止消息丢失 RabbitMQ-从基础到实战(3)- 消息的交换(上) 1.简介 ...