读 Zepto 源码之内部方法

原文链接  juejin.im


数组方法

定义


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。


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


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


length 必须为数字

length 必须大于 0 ,表示有元素存在于类数组中

key length - 1 必须存在于 obj 中。我们都知道,数组最后的 index 值为 length -1 ,这里也是检查最后一个 key 是否存在。

系列文章


读Zepto源码之代码结构

参考


MDN文档:Array.isArray()

MDN文档:Function.prototype.apply()

MDN文档:Node.nodeType

undefined与null的区别

zepto源码--compact、flatten、camelize、dasherize、uniq--学习笔记

最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容