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

头像
前端胖头鱼
    阅读 8 分钟
    2

    前言

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

    源码仓库
    原文链接

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

    1. $.camelCase

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

    $.camelCase = camelize

    2. $.contains

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

    举例

    
<ul class="list">
  <li class="item">1</li>
  <li>2</li>
</ul>
<div class="test"></div>

    
let oList = document.querySelector('.list')
let oItem = document.querySelector('.item')
let oTest = document.querySelector('.test')

console.log($.contains(oList, oItem)) // true 父子节点
console.log($.contains(oList, oList)) // false 同一节点
console.log($.contains(oList, oTest)) // false 兄弟节点

    源码

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

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

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

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

    3. $.each

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

    举例

    
let testArr = ['qianlongo', 'fe', 'juejin']
let testObj = {
  name: 'qianlongo',
  sex: 'boy'
}

$.each(testArr, function (i, val) {
  console.log(i, val)
})

// 0 "qianlongo"
// 1 "fe"
// 2 "juejin"

$.each(testObj, function (key, val) {
  console.log(key, val)
})

// name qianlongo
// sex boy

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

    源码实现

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

  return elements
}

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

    4. $.extend

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

    源码实现

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

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

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

    function extend(target, source, deep) {
  // 对源对象source进行for in遍历
  for (key in source)
    // 如果source[key]是纯对象或者数组，并且指定为深复制
    if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
      // 如果source[key]为纯对象，但是target[key]不是纯对象，则将目标对象的key设置为空对象
      if (isPlainObject(source[key]) && !isPlainObject(target[key]))
        target[key] = {}
      // 如果  如果source[key]为数组，但是target[key]不是数组，则将目标对象的key设置为数组
      if (isArray(source[key]) && !isArray(target[key]))
        target[key] = []
      // 递归调用extend函数  
      extend(target[key], source[key], deep)
    }
    // 浅复制或者source[key]不为undefined，便进行赋值
    else if (source[key] !== undefined) target[key] = source[key]
}

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

    5. $.grep

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

    直接看源码实现

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

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

    6. $.inArray

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

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

    举例

    let testArr = [1, 2, 3, 4]

console.log($.inArray(1, testArr)) // 0
console.log($.inArray(4, testArr)) // 3
console.log($.inArray(-10, testArr)) // -1
console.log($.inArray(1, testArr, 2)) // -1

    源码实现

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

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

    7. $.isArray

    判断obj是否为数组。

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

    // 1. es5中的isArray

console.log(Array.isArray([])) // true

// 2. 利用instanceof判断

console.log([] instanceof Array) // true

// 3. 最好的方式 toString
console.log(Object.prototype.toString.call([]) === '[object Array]') // true

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

    
var isArray = Array.isArray || function (object) {     return object instanceof Array
}

$.isArray = isArray

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

    8. $.isFunction

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

    源码实现

    function isFunction(value) { 
  return type(value) == "function" 
}

$.isFunction = isFunction

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

    9. $.isNumeric

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

    举例

    $.isNumeric(null) // false
$.isNumeric(undefined) // false
$.isNumeric(true) // false
$.isNumeric(false) // false
$.isNumeric(0) // true
$.isNumeric('0') // true
$.isNumeric('') // false
$.isNumeric(NaN) // false
$.isNumeric(Infinity) // false
$.isNumeric(-Infinity) // false

    源码

    $.isNumeric = function (val) {
  var num = Number(val), type = typeof val
  return val != null && type != 'boolean' &&
    (type != 'string' || val.length) &&
    !isNaN(num) && isFinite(num) || false
}

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

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

    Number转化规则

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

    1. 如果输入的是数字例如1,1.3那转化后的还是数字，
    2. 如果输入的是字符串数字类型例如'123', '12.3'那转化后的也是数字
    3. 如果输入的是空字符串''那转化后得到的是0
    4. 如果输入是类似字符串'123aaa'，那转化后得到的是NaN

    所以再结合下面的判断

    1. 通过val != null排除掉null和undefined
    2. 通过type != 'boolean'排除掉，true和false
    3. 通过isFinite(num)限定必须是一个有限数值
    4. 通过!isNaN(num)排除掉被Number(val)转化为NaN的值
    5. (type != 'string' || val.length), val为字符串，并且字符串的长度大于0，排除''空字符串的场景。

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

    9. $.isPlainObject

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

    10. $.isWindow

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

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

    11. $.map

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

    我们先看几个例子

    let testArr = [1, 2, null, undefined]
let resultArr1 = $.map(testArr, (val, i) => {
  return val
})
let resultArr2 = $.map(testArr, (val, i) => {
  return [val, [val]]
})

// 再来看看原生的map的表现
let resultArr3 = testArr.map((val, i) => {
  return val
})
let resultArr4 = testArr.map((val, i) => {
  return [val, [val]]
})

    运行结果如下

    可以看出

    1. resultArr1和resultArr3的区别是$.map把undefined和null给过滤掉了。
    2. resultArr2与resultArr4的区别是$.map把回调函数的返回值给铺平了。

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

    
 $.map = function (elements, callback) {
  var value, values = [], i, key
  // 如果是类数组，则用for循环
  if (likeArray(elements))
    for (i = 0; i < elements.length; i++) {
      value = callback(elements[i], i)
      // 如果callback的返回值不为null或者undefined，就push进values
      if (value != null) values.push(value)
    }
  else
    // 对象走这个逻辑
    for (key in elements) {
      value = callback(elements[key], key)
      if (value != null) values.push(value)
    }
  // 最后返回的是只能铺平一层数组 
  return flatten(values)
}

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

    12. $.noop

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

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

    
let doSomeThing = () => {}
let doSomeThingElse = () => {}

    如果直接这样

    
let doSomeThing = $.noop
let doSomeThingElse = $.noop

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

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

    
if (xxx === $.noop()) {
  // xxx
}

    13. $.parseJSON

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

    源码实现

    $.parseJSON = JSON.parse

    14. $.trim

    删除字符串首尾的空白符,如果传入null或undefined返回空字符串

    源码实现

    $.trim = function (str) {
  return str == null ? "" : String.prototype.trim.call(str)
}

    15. $.type

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

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

    $.type = type

    结尾

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

    参考资料

    读zepto源码之工具函数

    MDN trim

    MDN typeof

    MDN isNaN

    MDN Number

    MDN Node.contains

    文章记录

    1. 原来你是这样的jsonp(原理与具体实现细节)
    2. 谁说你只是"会用"jQuery?
    3. 向zepto.js学习如何手动触发DOM事件
    4. mouseenter与mouseover为何这般纠缠不清？
    5. 这些Zepto中实用的方法集
    zepto.jsjqueryjavascripthtmlhtml5
    前端胖头鱼
    3.7k 声望6.2k 粉丝
    « 上一篇
    这些Zepto中实用的方法集
    下一篇 »
    zepto源码分析之form模块

    引用和评论

    推荐阅读
    头像
    😠 就因为这道题，面字节差点儿就寄了...

    前端胖头鱼赞 1阅读 1k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.7k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.2k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新