Zepto這樣操作元素屬性

謙龍發表於2019-02-28

前言

使用Zepto的時候，我們經常會要去操作一些DOM的屬性，或元素本身的固有屬性或自定義屬性等。比如常見的有attr(),removeAttr(),prop(),removeProp(),data()等。接下來我們挨個整明白他們是如何實現的...點選zepto模組原始碼註釋檢視這篇文章對應的解析。

原文連結

原始碼倉庫

attr()

讀取或設定dom的屬性。

如果沒有給定value引數，則讀取物件集合中第一個元素的屬性值。

當給定了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引數傳入的是否是物件進行兩個分支的操作。

如果name是個物件，那對物件進行遍歷，再挨個呼叫setAttribute方法，進行屬性設定操作。
不是物件的話，接下來的這行程式碼，讓第二個引數既可以傳入普通的字串，也可以傳入回撥函式。

看個實際使用的例子

$('.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引數時，返回物件集合中第一個元素的innerHtml。當給定content引數時，用其替換物件集合中每個元素的內容。content可以是append中描述的所有型別zeptojs_api/#html

原始碼分析


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


複製程式碼

如果html傳了，就遍歷通過append函式設定html，沒傳就是獲取（即返回當前集合的第一個元素的innerHTML）注意：這裡的html引數可以是個函式,接收的引數是當前元素的索引和html。

text()

獲取或者設定所有物件集合中元素的文字內容。

當沒有給定content引數時，返回當前物件集合中第一個元素的文字內容（包含子節點中的文字內容）。

當給定content引數時，使用它替換物件集合中所有元素的文字內容。它有待點似 html，與它不同的是它不能用來獲取或設定 HTMLtext

text() ⇒ string
text(content) ⇒ self
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，innerHTML的區別在哪呢？可以檢視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

val() ⇒ string
val(value) ⇒ self
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,text和val方法對待取值和設定值的套路基本都是一樣的，判斷有沒有傳入第一個引數，有則認為是設定，沒有就是讀取。

先看讀取部分


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


複製程式碼

假設this[0](也就是元素集合中第一個元素存在)我們把它拆成兩個部分來學習

獲取多選下拉選單的value
普通表單元素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

data(name) ⇒ value
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方法原始碼分為三個部分

將傳入的name屬性轉化為data-開頭的連字元
通過attr方法設定或者獲取屬性
對attr方法的返回值再做一層對映處理

我們分別一一解釋一下這幾個部分

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

複製程式碼

將小駝峰書寫形式轉換成以data-開頭的連字元形式，例如zeptoAnalysis => data-zepto-analysis

第二部分呼叫attr方法去設定後者獲取元素的屬性

第三部分挺有意思的，讀取屬性值時，會有下列轉換：

“true”, “false”, and “null” 被轉換為相應的型別；
數字值轉換為實際的數字型別；
JSON值將會被解析，如果它是有效的JSON；
其它的一切作為字串返回。

來看一下這些轉轉操作是如何通過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
  }
}

複製程式碼