数组方法

定义

var emptyArray = []
concat = emptyArray.concat
filter = emptyArray.filter
slice = emptyArray.slice

zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concatfilterslice 方法

compact

function compact(array) {
return filter.call(array, function(item) {
return item != null
})
}

删除数组中的 nullundefined

这里用的是数组的 filter 方法,过滤出 item != null 的元素,组成新的数组。这里删除掉 null 很容易理解,为什么还可以删除 undefined 呢?这是因为这里用了 != ,而不是用 !== ,用 != 时, nullundefined 都会先转换成 false 再进行比较。

关于 nullundefined 推荐看看这篇文章: 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 的。

这里比较巧妙的是利用了 applyapply 会将 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 ,也就是 nullundefined,返回的是字符串 nullundefined

否则调用 Object.prototype.toStringtoString = 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 属性,每个属性值都有对应的常量。documentnodeType 值为 9 ,常量为 DOCUMENT_NODE

具体见:MDN文档:Node.nodeType

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 为 arraylength === 0 的认为是类数组。type 为 array 比较容易理解,length === 0 其实就是将其看作为空数组。

最后一种情况必须要满足三个条件:

  1. length 必须为数字
  2. length 必须大于 0 ,表示有元素存在于类数组中
  3. key length - 1 必须存在于 obj 中。我们都知道,数组最后的 index 值为 length -1 ,这里也是检查最后一个 key 是否存在。

系列文章

  1. 读Zepto源码之代码结构

参考

读 Zepto 源码之内部方法的更多相关文章

  1. 读Zepto源码之内部方法

    数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray ...

  2. 读 zepto 源码之工具函数

    Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性.目标对象的同名属性会被源对象的 ...

  3. 读 Zepto 源码之神奇的 $

    经过前面三章的铺垫,这篇终于写到了戏肉.在用 zepto 时,肯定离不开这个神奇的 $ 符号,这篇文章将会看看 zepto 是如何实现 $ 的. 读Zepto源码系列文章已经放到了github上,欢迎 ...

  4. 读Zepto源码之集合操作

    接下来几个篇章,都会解读 zepto 中的跟 dom 相关的方法,也即源码 $.fn 对象中的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码 ...

  5. 读 Zepto 源码之集合元素查找

    这篇依然是跟 dom 相关的方法,侧重点是跟集合元素查找相关的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zept ...

  6. 读Zepto源码之操作DOM

    这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...

  7. 读Zepto源码之样式操作

    这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2. ...

  8. 读Zepto源码之属性操作

    这篇依然是跟 dom 相关的方法,侧重点是操作属性的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2. ...

  9. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

随机推荐

  1. windows service宿主web api使用"依赖注入"和“控制反转”的技术实践

    前言 自从几年前抛弃wcf,使用web api 来做服务器端开发之后,就不再迷惑了.但是因为本来从事传统行业管理软件开发,一般都以分布式应用开发为主.纯BS还是比较少,于是比较喜欢用windows s ...

  2. 撸基础篇系列,JAVA的NIO部分

    前言:撸基础篇系列,避免每次都要从头开始看,写个自己的知识体系树 NIO 核心就是异步, 比如,复制文件,让操作系统去处理,等通知 BIO核心类 一,BIO NIO基本操作类 Bytebuffer 构 ...

  3. php弱类型语言中的类型判断

    1.php一个数字和一个字符串进行比较或者进行运算时,PHP会把字符串转换成数字再进行比较.PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0. 例如:123abc转换后 ...

  4. homebrew常用命令

    安装 ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/Go/install)" 搜索 brew sea ...

  5. KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-body-res

    koahub body res Format koa's respond json. Installation $ npm install koahub-body-res Use with koa v ...

  6. 1640: [Usaco2007 Nov]Best Cow Line 队列变换

    1640: [Usaco2007 Nov]Best Cow Line 队列变换 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 543  Solved: 2 ...

  7. Archlinux中卸载 Slim

    Slim 是图形登录器.最近停止更新了,据说在systemd中有兼容性问题. 卸载Slim的原因是某计算机使用的是AMD显卡的Catalyst驱动,图形驱动一旦出问题,Slim就无法启动,给维护造成困 ...

  8. [Spark] - SparkCore程序优化总结

    http://spark.apache.org/docs/1.6.1/tuning.html1) 代码优化 a. 对于多次使用的RDD,进行数据持久化操作(eg: cache.persist) b. ...

  9. 关于xml中有特珠字符而导致XmlDocument无法Load的处理

    这是个小事故导致的... 我们线上有个节目里名称里(`F`H9)MSTJXCX0B3J69,虽然我们看到是(`F`H9)MSTJXCX0B3J69,但百思不得其解,发现每次在XmlDocument.L ...

  10. 跨平台的.NET邮件协议MailKit组件解析

    发起的.NET Core开源组织号召,进展的速度是我自己也没有想到的,很多园友都积极参与(虽然有些人诚心砸场子,要是以我以前的宝脾气,这会应该被我打住院了吧,不过幸好是少数,做一件事总有人说好,也有人 ...