WEEX H5 Render 解读（12）之vdom续3

这节我们阅读vdom中有关样式和事件的代码。

Element.prototype.setAttr = function (key, value, silent) {
  if (this.attr[key] === value) {
    return
  }
  this.attr[key] = value
  if (!silent && this.docId) {
    const listener = instanceMap[this.docId].listener
    listener.setAttr(this.ref, key, value)
  }
}

Element.prototype.setStyle = function (key, value, silent) {
  if (this.style[key] === value) {
    return
  }
  this.style[key] = value
  if (!silent && this.docId) {
    const listener = instanceMap[this.docId].listener
    listener.setStyle(this.ref, key, value)
  }
}

Element.prototype.setClassStyle = function (classStyle) {
  this.classStyle = classStyle
  if (this.docId) {
    const listener = instanceMap[this.docId].listener
    listener.setStyles(this.ref, this.toStyle())
  }
}

代码并没有什么难懂的，我们需要注意的是，对于属性和样式，并没有删除的函数。当我们需要删除某些样式时，只需把这些样式的值设为初始值就可以了。

Element.prototype.addEvent = function (type, handler) {
  if (!this.event[type]) {
    this.event[type] = handler
    if (this.docId) {
      const listener = instanceMap[this.docId].listener
      listener.addEvent(this.ref, type)
    }
  }
}

Element.prototype.removeEvent = function (type) {
  if (this.event[type]) {
    delete this.event[type]
    if (this.docId) {
      const listener = instanceMap[this.docId].listener
      listener.removeEvent(this.ref, type)
    }
  }
}

Element.prototype.fireEvent = function (type, e) {
  const handler = this.event[type]
  if (handler) {
    return handler.call(this, e)
  }
}

这里面的handler直接对应于原生的函数。对于h5来说，对应于同一目录下的listener.js.

下次将分析vdom原理