这些Zepto中实用的方法集

原创 我的小苹果 随笔 Zepto源码分析 182阅读 2018-03-19 23:51:17 举报

前言

时间过得可真快,转眼间2017年已去大半有余,你就说吓不吓人,这一年你成长了多少,是否荒度了很多时光,亦或者天天向上,收获满满。今天主要写一些看Zepto基础模块时,比较实用的部分内部方法,在我们日常工作或者学习中也会用的到。

源码仓库
原文链接

<!-- more -->

1. 将数组铺平(flatten)

面试或者工作中经常遇到要将多维数组铺平成一维数组。例如将[1, 2, [3], [4], [5]]最后变成[1, 2, 3, 4, 5]

这里先将$.fn.concat理解成原生数组的concat方法,我们会发现,其实他只能铺平一层。例如

那怎样才能将多层嵌套的数组完全铺平为一层呢?这里介绍两种方式。

方式1

测试

方式2

同样和上面得到的结果一致

2. 数组去重(uniq)

数组去重可谓是老生常谈的话题了,方式有非常多。好久之前写过一篇关于去重的文章,欢迎查看。

结合数组的filter方法,查看数组的某项出现的索引是不是与idx相等,不相等,肯定出现过2次以上,即将其过滤掉。其实结合es6中的Set数据结构,可以很方便的做到数组去重。

测试



3. 连字符转驼峰(camelize)

这个方法挺实用的,可以将a-b-c这种形式转换成aBC,当然下划线的数量可以是多个,a---b-----c => aBC

4. 判断是否为document对象(isDocument)。

通过dom元素的nodeType属性可以知道其属于哪种元素类型。结合下面这张表(developer.mozilla.org/en-US/docs/Web/API/Node/nodeType),其实不仅仅可以写出判断是否为document对象,还可以判断是否为元素对象等。

5. 判断obj是否为类数组(likeArray)

什么是类数组对象呢?

类数组对象:

  1. 含有指向对象元素的数字索引下标以及length属性标志属性的个数
  2. 不含有数组的push、concat等方法

常见的类数组对象有auguments,document.getElementsByClassName等api获取的dom集合,符合上述条件的对象等。

代码上了注释,主要我们来对比一下underscore中是如何判断是否为类数组的。

underscore中判断类数组比较宽松一些,MAX_ARRAY_INDEX是JavaScript 中能精确表示的最大数字,主要判断对象的length属性是否为数字类型,并且是否大于0且在MAX_ARRAY_INDEX范围内。

zepto中类数组判断就比较严格了,因为window和函数其实都有length属性,这里把他们给过滤掉了。

6. 判断是否为window对象

window对象的window属性指向其本身,我们来直接看下mdn上的解释。

但实际上下面的代码也会被认为是window对象。

7. 判断数据类型

利用Object.prototype.toString方法来做数据类型的判断。

最后class2type会变成

接着就是type函数的定义了

首先如果传入的obj是null或者undefined,则用String函数返货null或者undefined,而toString.call(obj)返回的正是形如[object Array],所以再结合上面的class2type变量,正好就可以得到例如。

8. 判断是够为纯粹的对象(isPlainObject)

有时候我们想要符合这样条件的对象。但是js中没有直接给到能够判断是否为纯粹的对象的方法。

zepto中是如何判断的呢?

Object.getPrototypeOf() 方法返回指定对象的原型(即, 内部[[Prototype]]属性的值),如果没有继承属性,则返回 null 。

9. 判断是否为空对象(isEmptyObject)

主要是通过走一遍for循环,来确定,所以会将以下数据也认为是空对象。

  1. null
  2. undefined
  3. []
  4. ''
  5. 1024(数字)
  6. true or false
  7. {}
  8. new Person() // 自定义的构造函数

所以这里判断空对象的初衷到底是不是只为了判断形如{},new Object()

结尾

暂时就更新这些,后续在阅读源码的过程中会陆续补充

参考资料

读Zepto源码之内部方法

jQuery.isPlainObject

对jQuery.isPlainObject()的理解

Object.getPrototypeOf()

文章记录

  1. 原来你是这样的jsonp(原理与具体实现细节)
  2. 谁说你只是"会用"jQuery?
  3. 向zepto.js学习如何手动触发DOM事件
  4. mouseenter与mouseover为何这般纠缠不清?
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复