专栏首页IMWeb前端团队Zepto这样操作元素属性

Zepto这样操作元素属性

本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载

前言

使用Zepto的时候,我们经常会要去操作一些DOM的属性,或元素本身的固有属性或自定义属性等。比如常见的有attr(),removeAttr(),prop(),removeProp(),data()等。接下来我们挨个整明白他们是如何实现的...点击zepto模块源码注释查看这篇文章对应的解析。

原文链接

源码仓库

<!-- more -->

attr()

  1. 读取或设置dom的属性。
  2. 如果没有给定value参数,则读取对象集合中第一个元素的属性值。
  3. 当给定了value参数。则设置对象集合中所有元素的该属性的值。当value参数为null,那么这个属性将被移除(类似removeAttr),多个属性可以通过对象键值对的方式进行设置。zeptojs_api/#attr

示例

// 获取name属性
attr(name)   
// 设置name属性        
attr(name, value)
// 设置name属性,不同的是使用回调函数的形式
attr(name, function(index, oldValue){ ... })
// 设置多个属性值
attr({ name: value, name2: value2, ... })

已经知道了如何使用attr方法,在开始分析attr实现源码之前,我们先了解一下这几个函数。

setAttribute

function setAttribute(node, name, value) {
  value == null ? node.removeAttribute(name) : node.setAttribute(name, value)
}

它的主要作用就是设置或者删除node节点的属性。当value为null或者undefined的时候,调用removeAttribute方法移除name属性,否则调用setAttribute方法设置name属性。

funcArg

function funcArg(context, arg, idx, payload) {
  return isFunction(arg) ? arg.call(context, idx, payload) : arg
}

funcArg函数在多个地方都有使用到,主要为类似attr,prop,val等方法中第二个参数可以是函数或其他类型提供可能和便捷。

如果传入的arg参数是函数类型,那么用context作为arg函数的执行上下文,以及将idx和payload作为参数去执行。否则直接返回arg参数。

好啦接下来开始看attr的源码实现了

attr: function (name, value) {
  var result
  return (typeof name == 'string' && !(1 in arguments)) ?
    // 获取属性
    (0 in this && this[0].nodeType == 1 && (result = this[0].getAttribute(name)) != null ? result : undefined) :
    // 设置属性
    this.each(function (idx) {
      if (this.nodeType !== 1) return
      // 设置多个属性值
      if (isObject(name)) for (key in name) setAttribute(this, key, name[key])
      // 设置一个属性值
      else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name)))
    })
}

代码分为两部分,获取与设置属性。先看

获取部分

typeof name == 'string' && !(1 in arguments)) ?
    // 获取属性
    (0 in this && this[0].nodeType == 1 && (result = this[0].getAttribute(name)) != null ? result : undefined) : '设置代码逻辑代码块'

当name参数是string类型,并且没有传入value参数时候,意味着是读取属性的情况。紧接着再看当前选中的元素集合中第一个元素是否存在并且节点类型是否为element类型,如果是,再调用getAttribute获取name属性,结果不为null或者undefined的话直接返回,否则统一返回undefined。

设置部分

this.each(function (idx) {
  if (this.nodeType !== 1) return
  // 设置多个属性值
  if (isObject(name)) for (key in name) setAttribute(this, key, name[key])
  // 设置一个属性值
  else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name)))
})

调用each方法,对当前的元素集合进行遍历操作,遍历过程中,如果当前的元素不是element类型,直接return掉。否则根据name参数传入的是否是对象进行两个分支的操作。

  1. 如果name是个对象,那对对象进行遍历,再挨个调用setAttribute方法,进行属性设置操作。
  2. 不是对象的话,接下来的这行代码,让第二个参数既可以传入普通的字符串,也可以传入回调函数。

看个实际使用的例子

$('.box').attr('name', 'qianlongo')

$('.box').attr('name', function (idx, oldVal) {
  return oldVal + 'qianlongo'
})

可以看到如果传入的是回调函数,那回调函数可以接收到元素的索引,以及要设置的属性的之前的值。

removeAttr()

移除当前对象集合中所有元素的指定属性,理论上讲attr也可以做到removeAttr的功能。只要将要移除的name属性设置为null或者undefined即可。

removeAttr: function (name) {
  return this.each(function () {
  // 通过将name分割,再将需要移除的属性进行遍历删除
  this.nodeType === 1 && name.split(' ').forEach(function (attribute) {
    setAttribute(this, attribute)
  }, this)
  })
}

代码本身很简单,对当前选中的元素集合进行遍历操作,然后对name参数进行空格分割(这样对于name传入类似'name sex age'就可以批量删除了),最后还是调用的setAttribute方法进行属性删除操作。

prop()

读取或设置dom元素的属性值,简写或小写名称,比如for, class, readonly及类似的属性,将被映射到实际的属性上,比如htmlFor, className, readOnly, 等等。

直接看源码实现

prop: function (name, value) {
  name = propMap[name] || name
  return (1 in arguments) ?
    this.each(function (idx) {
      this[name] = funcArg(this, value, idx, this[name])
    }) :
    (this[0] && this[0][name])
}

通过1 in arguments作为设置与获取元素属性的判断标志,value传了,则对当前选中的元素集合进行遍历操作,同样用到了funcArg函数,让value既可以传入函数,也可以传入其他值。与attr方法不同的是,因为是设置和获取元素的固有属性,所以直接向元素设置和读取值就可以了。

需要注意的是当你传入class,for等属性的时候需要被映射到className,htmlFor等,下面是映射列表

var propMap = {
  'tabindex': 'tabIndex',
  'readonly': 'readOnly',
  'for': 'htmlFor',
  'class': 'className',
  'maxlength': 'maxLength',
  'cellspacing': 'cellSpacing',
  'cellpadding': 'cellPadding',
  'rowspan': 'rowSpan',
  'colspan': 'colSpan',
  'usemap': 'useMap',
  'frameborder': 'frameBorder',
  'contenteditable': 'contentEditable'
}

removeProp()

从集合的每个DOM节点中删除一个属性

removeProp: function (name) {
  name = propMap[name] || name
  return this.each(function () { delete this[name] })
}

直接通过delete去删除,但是如果尝试删除DOM的一些内置属性,如className或maxLength,将不会有任何效果,因为浏览器禁止删除这些属性。

html()

获取或设置对象集合中元素的HTML内容。当没有给定content参数时,返回对象集合中第一个元素。当给定content参数时,用其替换对象集合中每个元素的内容。content可以是append中描述的所有类型zeptojs_api/#html

源码分析

html: function (html) {
  return 0 in arguments ?
    this.each(function (idx) {
      var originHtml = this
      $(this).empty().append(funcArg(this, html, idx, originHtml))
    }) :
    (0 in this ? this[0] : null)
}

如果html传了,就遍历通过append函数设置html,没传就是获取(即返回当前集合的第一个元素)注意:这里的html参数可以是个函数,接收的参数是当前元素的索引和html。

text()

获取或者设置所有对象集合中元素的文本内容。 当没有给定content参数时,返回当前对象集合中第一个元素的文本内容(包含子节点中的文本内容)。 当给定content参数时,使用它替换对象集合中所有元素的文本内容。它有待点似 html,与它不同的是它不能用来获取或设置 HTMLtext

  1. text() ? string
  2. text(content) ? self
  3. text(function(index, oldText){ ... }) ? self

源码分析

text: function (text) {
  return 0 in arguments ?
    this.each(function (idx) {
      var newText = funcArg(this, text, idx, this.textContent)
      this.textContent = newText == null ? '' : '' + newText
    }) :
    (0 in this ? this.pluck('textContent').join("") : null)
}

同样包括设置和获取两部分,判断的边界则是是否传入了第一个参数。先看获取部分。

获取text

(0 in this ? this.pluck('textContent').join("") : null)

0 in this 当前是否选中了元素,没有直接返回null,有则通过this.pluck('textContent').join("")获取,我们先来看一下pluck做了些什么

plunck

// `pluck` is borrowed from Prototype.js
pluck: function (property) {
  return $.map(this, function (el) { return el[property] })
},

pluck也是挂在原型上的方法之一,通过使用map方法遍历当前的元素集合,返回结果是一个数组,数组的每一项则是元素的property属性。所以上面才通过join方法再次转成了字符串。

还有一点需要注意的是text方法设置或者获取都是在操作元素的textContent属性,那它和innerText的区别在哪呢?可以查看MDN

设置text

this.each(function (idx) {
  var newText = funcArg(this, text, idx, this.textContent)
  this.textContent = newText == null ? '' : '' + newText
})

设置与html的设置部分比较类似,既支持直接传入普通的字符串也支持传入回调函数。如果得到的newText为null或者undefined,会统一转成空字符串再进行设置。

val

获取或设置匹配元素的值。当没有给定value参数,返回第一个元素的值。如果是<select multiple>标签,则返回一个数组。当给定value参数,那么将设置所有元素的值。val

  1. val() ? string
  2. val(value) ? self
  3. val(function(index, oldValue){ ... }) ? self

以上是基本用法

源码分析

val: function (value) {
  if (0 in arguments) {
    if (value == null) value = ""
    return this.each(function (idx) {
      this.value = funcArg(this, value, idx, this.value)
    })
  } else {
    return this[0] && (this[0].multiple ?
      $(this[0]).find('option').filter(function () { return this.selected }).pluck('value') :
      this[0].value)
  }
}

html,textval方法对待取值和设置值的套路基本都是一样的,判断有没有传入第一个参数,有则认为是设置,没有就是读取。

先看读取部分

return this[0] && (this[0].multiple ?
  $(this[0]).find('option').filter(function () { return this.selected }).pluck('value') :
  this[0].value)

假设this[0](也就是元素集合中第一个元素存在)我们把它拆成两个部分来学习

  1. 获取多选下拉列表的value
  2. 普通表单元素value
this[0].multiple ? '获取多选下拉列表的value' : '普通表单元素value'

针对第一种情况首先会通过find函数取查找子元素option集合,然后再过this.selected过滤出已经选中的option元素数组,最后还是通过调用pluck函数返回该option元素集合中的value数组。

第二种情况则是直接读取元素的value属性即可。

接下来我们回去继续看设置部分

if (value == null) value = ""
  return this.each(function (idx) {
    this.value = funcArg(this, value, idx, this.value)
  })

与html,text等方法类似,通过调用funcArg方法使得既支持普通字符串设置,也支持传入回调函数返回值设置值。

data

读取或写入dom的 data-* 属性。行为有点像 attr ,但是属性名称前面加上 data-。#data

  1. data(name) ? value
  2. data(name, value) ? self

注意:data方法本质上也是借用attr方法去实现的,不同之处在于data设置或者读取的属性为data-打头。

源码分析

data: function (name, value) {
  var attrName = 'data-' + name.replace(capitalRE, '-$1').toLowerCase()

  var data = (1 in arguments) ?
    this.attr(attrName, value) :
    this.attr(attrName)

  return data !== null ? deserializeValue(data) : undefined
},

data方法源码分为三个部分

  1. 将传入的name属性转化为data-开头的连字符
  2. 通过attr方法设置或者获取属性
  3. 对attr方法的返回值再做一层映射处理

我们分别一一解释一下这几个部分

var capitalRE = /([A-Z])/g
var attrName = 'data-' + name.replace(capitalRE, '-$1').toLowerCase()

将小驼峰书写形式转换成以data-开头的连字符形式,例如zeptoAnalysis => data-zepto-analysis

第二部分调用attr方法去设置后者获取元素的属性

第三部分挺有意思的,读取属性值时,会有下列转换:

  1. “true”, “false”, and “null” 被转换为相应的类型;
  2. 数字值转换为实际的数字类型;
  3. JSON值将会被解析,如果它是有效的JSON;
  4. 其它的一切作为字符串返回。

来看一下这些转转操作是如何通过deserializeValue方法完成的。

function deserializeValue(value) {
  try {
    return value ?
      value == "true" ||
      (value == "false" ? false :
        value == "null" ? null :
          +value + "" == value ? +value :
            /^[\[\{]/.test(value) ? $.parseJSON(value) :
              value)
      : value
  } catch (e) {
    return value
  }
}

这个函数用的三元表达式比较复杂,一步步解析如下

  1. 如果value存在,则进行第2步,否则直接返回value
  2. 当value为字符串”true“时,返回true,否则进行第3步
  3. 当value为字符串“false”时,返回false,否则进行第4步
  4. 当value为字符串“null”时,返回null,否则进行第5步
  5. 当value为类似“12”这种类型字符串时,返回12(注意:+'12' => 12, +'01' => 1),否则进行第6步
  6. 当value以{或者[为开头时,使用parseJSON解析(但是有点不严格,因为以{[开头不一定就是对象字符串),否则直接返回value

最后还有一个问题,不知道大家有没有注意到zepto模块中的data方法和data模块中的data方法都是挂载到原型下面的,那他们之间到底有什么关系呢?可以查看之前写的一篇文章Zepto中数据缓存原理与实现 ,应该可以找到答案

结尾

以上是Zepto中常见的操作元素属性的方法(attr、removeAttr、prop、removeProp、html、text、val、data)解析。欢迎指正其中的问题。

参考

  1. 读Zepto源码之属性操作
  2. textContent mdn
  3. multiple
  4. zepto.js 源码解析

文章记录

ie模块

  1. Zepto源码分析之ie模块(2017-11-03)

data模块

  1. Zepto中数据缓存原理与实现(2017-10-03)

form模块

  1. zepto源码分析之form模块(2017-10-01)

zepto模块

  1. 这些Zepto中实用的方法集(2017-08-26)
  2. Zepto核心模块之工具方法拾遗 (2017-08-30)
  3. 看zepto如何实现增删改查DOM (2017-10-2)
  4. Zepto这样操作元素属性(2017-11-13)

event模块

  1. mouseenter与mouseover为何这般纠缠不清?(2017-06-05)
  2. 向zepto.js学习如何手动触发DOM事件(2017-06-07)
  3. 谁说你只是"会用"jQuery?(2017-06-08)

ajax模块

  1. 原来你是这样的jsonp(原理与具体实现细节)(2017-06-11)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    我是一名创业者,我的公司(深圳市友浩达科技有限公司)在2018年8月8日开始运营,现在还属于微型公司。这个春节假期,我一直十分关注疫情动向,也非常关心其对公司带来的影响。

    TVP官方团队
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • 数据中台,概念炒作还是另有奇效? | TVP思享

    作者简介:史凯,花名凯哥,腾讯云最具价值专家TVP,ThoughtWorks数据智能业务总经理。投身于企业数字化转型工作近20年。2000年初,在IBM 研发企业级中间件,接着加入埃森哲,为大型企业提供信息化架构规划,设计,ERP,云平台,数据仓库构建等技术咨询实施服务,随后在EMC负责企业应用转型业务,为企业提供云迁移,应用现代化服务。现在专注于企业智能化转型领域,是数据驱动的数字化转型的行业布道者,数据中台的推广者,精益数据创新体系的创始人,2019年荣获全球Data IQ 100人的数据赋能者称号,创业邦卓越生态聚合赋能官TOP 5。2019年度数字化转型专家奖。打造了行业第一个数据创新的数字化转型卡牌和工作坊。创建了精益数据创新方法论体系构建数据驱动的智能企业,并在多个企业验证成功,正在向国内外推广。

    TVP官方团队
    大数据数据分析企业
  • 扩展 Kubernetes 之 CRI

    使用 cri-containerd 的调用流程更为简洁, 省去了上面的调用流程的 1,2 两步

    王磊-AI基础
    Kubernetes
  • 扩展 Kubernetes 之 Kubectl Plugin

    kubectl 功能非常强大, 常见的命令使用方式可以参考 kubectl --help,或者这篇文章

    王磊-AI基础
    Kubernetes
  • 多种登录方式定量性能测试方案

    最近接到到一个测试任务,某服务提供了两种登录方式:1、账号密码登录;2、手机号+验证码登录。要对这两种登录按照一定的比例进行压测。

    八音弦
    测试服务 WeTest
  • 线程安全类在性能测试中应用

    首先验证接口参数签名是否正确,然后加锁去判断订单信息和状态,处理用户增添VIP时间事务,成功之后释放锁。锁是针对用户和订单的分布式锁,使用方案是用的redis。

    八音弦
    安全编程算法
  • 使用CDN(jsdelivr) 优化博客访问速度

    PS: 此篇文章适用于 使用 Github pages 或者 coding pages 的朋友,其他博客也类似.

    IFONLY@CUIT
    CDNGitGitHub开源
  • 扩展 Kubernetes 之 CNI

    Network Configuration 是 CNI 输入参数中最重要当部分, 可以存储在磁盘上

    王磊-AI基础
    Kubernetes
  • 聚焦【技术应变力】云加社区沙龙online重磅上线!

    云加社区结合特殊时期热点,挑选备受关注的音视频流量暴增、线下业务快速转线上、紧急上线防疫IoT应用等话题,邀请众多业界专家,为大家提供连续十一天的干货分享。从视野、预判、应对等多角度,帮助大家全面提升「技术应变力」!

    腾小云
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
    渲染JavaScripthttps网络安全缓存

扫码关注云+社区

领取腾讯云代金券