资讯专栏INFORMATION COLUMN

Zepto核心模块之工具方法拾遗

Alex / 975人阅读

摘要:举例需要注意的是,此时回调函数中的指向的就是数组或者对象的某一项。中提供的拷贝方法,默认为浅拷贝,如果第一个参数为布尔值则表示深拷贝。

前言

</>复制代码

  1. 平时开发过程中经常会用类似eachmapforEach之类的方法,Zepto本身也把这些方法挂载到$函数身上,作为静态方法存在,既可以给Zepto的实例使用,也能给普通的js对象使用。今天我们主要针对其提供的这些api做一些源码实现分析。

源码仓库
原文链接

具体各个api如何使用可以参照英文文档Zepto.js 中文文档Zepto.js

1. $.camelCase

</>复制代码

  1. 该方法主要是将连字符转化成驼峰命名法。例如可以将a-b-c这种形式转换成aBC,当然连字符的数量可以是多个,a---b-----c => aBC,具体实现已经在这些Zepto中实用的方法集说过了,可以点击查看。而其代码也只是将camelize函数赋值给了$.camelCase

</>复制代码

  1. $.camelCase = camelize
2. $.contains

</>复制代码

  1. $.contains(parent, node) ⇒ boolean该方法主要用来检测parent是否包含给定的node节点。如果parent和node为同一节点,则返回false

举例

</>复制代码

    • 1
    • 2

</>复制代码

  1. let oList = document.querySelector(".list")
  2. let oItem = document.querySelector(".item")
  3. let oTest = document.querySelector(".test")
  4. console.log($.contains(oList, oItem)) // true 父子节点
  5. console.log($.contains(oList, oList)) // false 同一节点
  6. console.log($.contains(oList, oTest)) // false 兄弟节点

源码

</>复制代码

  1. $.contains = document.documentElement.contains ?
  2. function (parent, node) {
  3. // 防止parent和node传相同的节点,故先parent !== node
  4. // 接着就是调用原生的contains方法判断了
  5. return parent !== node && parent.contains(node)
  6. } :
  7. function (parent, node) {
  8. // 当node节点存在,就把node的父节点赋值给node
  9. while (node && (node = node.parentNode))
  10. // 如果node的父节点和parent相等就返回true,否则继续向上查找
  11. // 其实有一个疑问,为什么开头不先排查node === parent的情况呢
  12. // 不然经过循环最后却得到false,非常的浪费
  13. if (node === parent) return true
  14. return false
  15. }

用了document.documentElement.contains做判断,如果浏览器支持该方法,就用node.contains重新包了一层得到一个函数,差别就在于如果传入的两个节点相同,那么原生的node.contains返回true,具体用法可以查看MDN Node.contains但是$.contains返回false

如果原生不支持就需要我们自己写一个方法了。主要逻辑还是通过一个while循环,判断传入的node节点的父节点是否为parent,如果一个循环下来,还不是最后才返回false

其实这里应该是可以做一个优化的,一进来的时候就先判断两个节点是否为同一节点,不是再进行后续的判断

3. $.each

</>复制代码

  1. 用来遍历数组或者对象,类似原生的forEach但是不同的是,可以中断循环的执行,并且服务对象不局限于数组。

举例

</>复制代码

  1. let testArr = ["qianlongo", "fe", "juejin"]
  2. let testObj = {
  3. name: "qianlongo",
  4. sex: "boy"
  5. }
  6. $.each(testArr, function (i, val) {
  7. console.log(i, val)
  8. })
  9. // 0 "qianlongo"
  10. // 1 "fe"
  11. // 2 "juejin"
  12. $.each(testObj, function (key, val) {
  13. console.log(key, val)
  14. })
  15. // name qianlongo
  16. // sex boy

需要注意的是,此时回调函数中的this指向的就是数组或者对象的某一项。这样主要是方便内部的一些其他方法在遍历dom节点的时候,this很方便地就指向了对应的dom

源码实现

</>复制代码

  1. $.each = function (elements, callback) {
  2. var i, key
  3. // 如果是类数组就走这个if
  4. if (likeArray(elements)) {
  5. for (i = 0; i < elements.length; i++)
  6. // 可以看到用.call去执行了callback,并且第一个参数是数组中的item
  7. // 如果用来遍历dom,那么内部的this,指的就是当前这个元素本身
  8. // 判断callback执行的结果,如果是false,就中断遍历
  9. // 中断遍历这就是和原生forEach不同的地方
  10. // 2017-8-16添加,原生的forEach内部的this指向的是数组本身,但是这里指向的是数组的项
  11. // 2017-8-16添加,原生的forEach回调函数的参数是val, i...,这里反过来
  12. if (callback.call(elements[i], i, elements[i]) === false) return elements
  13. } else {
  14. // 否则回去走for in循环,逻辑与上面差不多
  15. for (key in elements)
  16. if (callback.call(elements[key], key, elements[key]) === false) return elements
  17. }
  18. return elements
  19. }

likeArray已经在这些Zepto中实用的方法集说过了,可以点击查看。

4. $.extend

</>复制代码

  1. Zepto中提供的拷贝方法,默认为浅拷贝,如果第一个参数为布尔值则表示深拷贝。

源码实现

</>复制代码

  1. $.extend = function (target) {
  2. // 将第一个参数之外的参数变成一个数组
  3. var deep, args = slice.call(arguments, 1)
  4. // 处理第一个参数是boolean值的情况,默认是浅复制,深复制第一个参数传true
  5. if (typeof target == "boolean") {
  6. deep = target
  7. target = args.shift()
  8. }
  9. // $.extend(true, {}, source1, source2, source3)
  10. // 有可能有多个source,遍历调用内部extend方法,实现复制
  11. args.forEach(function (arg) { extend(target, arg, deep) })
  12. return target
  13. }

可以看到首先对第一个参数是否为布尔值进行判断,有意思的是,只要是布尔值都表示深拷贝,你传true或者false都是一个意思。接着就是对多个source参数进行遍历调用内部方法extend

接下来我们主要来看内部方法extend

</>复制代码

  1. function extend(target, source, deep) {
  2. // 对源对象source进行for in遍历
  3. for (key in source)
  4. // 如果source[key]是纯对象或者数组,并且指定为深复制
  5. if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
  6. // 如果source[key]为纯对象,但是target[key]不是纯对象,则将目标对象的key设置为空对象
  7. if (isPlainObject(source[key]) && !isPlainObject(target[key]))
  8. target[key] = {}
  9. // 如果 如果source[key]为数组,但是target[key]不是数组,则将目标对象的key设置为数组
  10. if (isArray(source[key]) && !isArray(target[key]))
  11. target[key] = []
  12. // 递归调用extend函数
  13. extend(target[key], source[key], deep)
  14. }
  15. // 浅复制或者source[key]不为undefined,便进行赋值
  16. else if (source[key] !== undefined) target[key] = source[key]
  17. }

整体实现其实还挺简单的,主要是遇到对象或者数组的时候,并且指定为深赋值,则递归调用extend本身,从而完成复制过程。

5. $.grep

</>复制代码

  1. 其实就是数组的原生方法filter,最终结果得到的是一个数组,并且只包含回调函数中返回 true 的数组项

直接看源码实现

</>复制代码

  1. $.grep = function (elements, callback) {
  2. return filter.call(elements, callback)
  3. }

通过call形式去调用原生的数组方法 filter,过滤出符合条件的数据项。

6. $.inArray

</>复制代码

  1. 返回数组中指定元素的索引值,没有找到该元素则返回-1,fromIndex是一个可选的参数,表示从哪个地方开始往后进行查找。

$.inArray(element, array, [fromIndex]) ⇒ number

举例

</>复制代码

  1. let testArr = [1, 2, 3, 4]
  2. console.log($.inArray(1, testArr)) // 0
  3. console.log($.inArray(4, testArr)) // 3
  4. console.log($.inArray(-10, testArr)) // -1
  5. console.log($.inArray(1, testArr, 2)) // -1

源码实现

</>复制代码

  1. $.inArray = function (elem, array, i) {
  2. return emptyArray.indexOf.call(array, elem, i)
  3. }

可见其内部也是调用的原生indexOf方法。

7. $.isArray

</>复制代码

  1. 判断obj是否为数组。

我们知道判断一个值是否为对象,方式其实挺多的,比如下面的这几种方式

</>复制代码

  1. // 1. es5中的isArray
  2. console.log(Array.isArray([])) // true
  3. // 2. 利用instanceof判断
  4. console.log([] instanceof Array) // true
  5. // 3. 最好的方式 toString
  6. console.log(Object.prototype.toString.call([]) === "[object Array]") // true

而Zepto中就是采用的第二种方式

</>复制代码

  1. var isArray = Array.isArray || function (object) { return object instanceof Array
  2. }
  3. $.isArray = isArray

如果支持isArray方法就用原生支持的,否则通过instanceof判断,其实不太清楚为什么第二种方式,我们都知道这是有缺陷的,在有iframe场景下,就会出现判断不准确的情况.

8. $.isFunction

</>复制代码

  1. 判断一个值是否为函数类型

源码实现

</>复制代码

  1. function isFunction(value) {
  2. return type(value) == "function"
  3. }
  4. $.isFunction = isFunction

主要还是通过内部方法type来实现的,详情可以点击这些Zepto中实用的方法集查看。

9. $.isNumeric

</>复制代码

  1. 如果传入的值为有限数值或一个字符串表示的数字,则返回ture。

举例

</>复制代码

  1. $.isNumeric(null) // false
  2. $.isNumeric(undefined) // false
  3. $.isNumeric(true) // false
  4. $.isNumeric(false) // false
  5. $.isNumeric(0) // true
  6. $.isNumeric("0") // true
  7. $.isNumeric("") // false
  8. $.isNumeric(NaN) // false
  9. $.isNumeric(Infinity) // false
  10. $.isNumeric(-Infinity) // false

源码

</>复制代码

  1. $.isNumeric = function (val) {
  2. var num = Number(val), type = typeof val
  3. return val != null && type != "boolean" &&
  4. (type != "string" || val.length) &&
  5. !isNaN(num) && isFinite(num) || false
  6. }

首先val经过Number函数转化,得到num,然后获取val的类型得到type

我们来回顾一下Number(val)的转化规则,这里截取一张图。

看起来转化规则非常复杂,但是有几点我们可以确定,

如果输入的是数字例如1,1.3那转化后的还是数字,

如果输入的是字符串数字类型例如"123", "12.3"那转化后的也是数字

如果输入的是空字符串""那转化后得到的是0

如果输入是类似字符串"123aaa",那转化后得到的是NaN

所以再结合下面的判断

通过val != null排除掉nullundefined

通过type != "boolean"排除掉,truefalse

通过isFinite(num)限定必须是一个有限数值

通过!isNaN(num)排除掉被Number(val)转化为NaN的值

(type != "string" || val.length), val为字符串,并且字符串的长度大于0,排除""空字符串的场景。

以上各种判断下来基本就满足了这个函数原来的初衷要求。

9. $.isPlainObject

</>复制代码

  1. 测试对象是否是“纯粹”的对象,这个对象是通过 对象常量("{}") 或者 new Object 创建的,如果是,则返回true

10. $.isWindow

</>复制代码

  1. 如果object参数为一个window对象,那么返回true

该两个方法在这些Zepto中实用的方法集也聊过了,可以点击查看一下。

11. $.map

</>复制代码

  1. 和原生的map比较相似,但是又有不同的地方,比如这里的map得到的记过有可能不是一一映射的,也就是可能得到比原来数组项数更多的数组,以及这里的map是可以用来遍历对象的。

我们先看几个例子

</>复制代码

  1. let testArr = [1, 2, null, undefined]
  2. let resultArr1 = $.map(testArr, (val, i) => {
  3. return val
  4. })
  5. let resultArr2 = $.map(testArr, (val, i) => {
  6. return [val, [val]]
  7. })
  8. // 再来看看原生的map的表现
  9. let resultArr3 = testArr.map((val, i) => {
  10. return val
  11. })
  12. let resultArr4 = testArr.map((val, i) => {
  13. return [val, [val]]
  14. })

运行结果如下

可以看出

resultArr1resultArr3的区别是$.mapundefinednull给过滤掉了。

resultArr2resultArr4的区别是$.map把回调函数的返回值给铺平了。

接下来看看源码是怎么实现的。

</>复制代码

  1. $.map = function (elements, callback) {
  2. var value, values = [], i, key
  3. // 如果是类数组,则用for循环
  4. if (likeArray(elements))
  5. for (i = 0; i < elements.length; i++) {
  6. value = callback(elements[i], i)
  7. // 如果callback的返回值不为null或者undefined,就push进values
  8. if (value != null) values.push(value)
  9. }
  10. else
  11. // 对象走这个逻辑
  12. for (key in elements) {
  13. value = callback(elements[key], key)
  14. if (value != null) values.push(value)
  15. }
  16. // 最后返回的是只能铺平一层数组
  17. return flatten(values)
  18. }

从源码实现上可以看出因为value != null以及flatten(values)造成了上述差异。

12. $.noop

</>复制代码

  1. 其实就是引用一个空的函数,什么都不处理,那它到底有啥用呢?

比如。我们定义了几个变量,他未来是作为函数使用的。

</>复制代码

  1. let doSomeThing = () => {}
  2. let doSomeThingElse = () => {}

如果直接这样

</>复制代码

  1. let doSomeThing = $.noop
  2. let doSomeThingElse = $.noop

宿主环境就不必为我们创建多个匿名函数了。

其实还有一种可能用的不多的场景,在判断一个变量是否是undefined的时候,可以用到。因为函数没有返回值,默认返回undefined,也就是排除了那些老式浏览器undefined可以被修改的情况

</>复制代码

  1. if (xxx === $.noop()) {
  2. // xxx
  3. }
13. $.parseJSON

</>复制代码

  1. 原生JSON.parse方法的别名,接收的是一个字符串对象,返回一个对象。

源码实现

</>复制代码

  1. $.parseJSON = JSON.parse
14. $.trim

</>复制代码

  1. 删除字符串首尾的空白符,如果传入nullundefined返回空字符串

源码实现

</>复制代码

  1. $.trim = function (str) {
  2. return str == null ? "" : String.prototype.trim.call(str)
  3. }
15. $.type

</>复制代码

  1. 获取JavaScript 对象的类型。可能的类型有: null undefined boolean number string function array date regexp object error.

该方法内部实现其实就是内部的type函数,并且已经在这些Zepto中实用的方法集聊过了,可以点击查看。

</>复制代码

  1. $.type = type
结尾

</>复制代码

  1. Zepto大部分工具方法或者说静态方法就是这些了,欢迎大家指正其中的错误和问题。

参考资料

读zepto源码之工具函数

MDN trim

MDN typeof

MDN isNaN

MDN Number

MDN Node.contains

文章记录

原来你是这样的jsonp(原理与具体实现细节)

谁说你只是"会用"jQuery?

向zepto.js学习如何手动触发DOM事件

mouseenter与mouseover为何这般纠缠不清?

这些Zepto中实用的方法集

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85103.html

相关文章

  • Zepto核心模块工具方法拾遗

    摘要:举例需要注意的是,此时回调函数中的指向的就是数组或者对象的某一项。中提供的拷贝方法,默认为浅拷贝,如果第一个参数为布尔值则表示深拷贝。 前言 平时开发过程中经常会用类似each、map、forEach之类的方法,Zepto本身也把这些方法挂载到$函数身上,作为静态方法存在,既可以给Zepto的实例使用,也能给普通的js对象使用。今天我们主要针对其提供的这些api做一些源码实现分析。 源...

    lcodecorex 评论0 收藏0
  • zepto源码分析form模块

    摘要:形如源代码在的原型上添加了相关方法。类似源代码每个表单的和都通过编码最后通过符号分割有了的基础,就是将相应的和都通过编码,然后用符号进行分割,也就达到了我们要的结果。 前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍zepto中form模块关于表单处理的几个方法,serialize、serializeArray、sub...

    Muninn 评论0 收藏0
  • Zepto中数据缓存原理与实现

    摘要:有一个模块,专门用来做数据缓存,允许我们存放任何与相关的数据。在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。确定元素是否有与之相关的数据。 前言 以前我们使用Zepto进行开发的时候,会把一些自定义的数据存到dom节点上,好处是非常直观和便捷,但是也带来了例如直接将数据暴露出来会出现安全问题,数据以html自定义属性标签存在,对于浏览器本身来说...

    macg0406 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<