ranuts 0.1.0-alpha.1 → 0.1.0-alpha.2

package/src/vnode/init.ts

@@ -1,429 +0,0 @@
-// 虚拟dom
-import type { VNode } from './vnode'
-import { vnode } from './vnode'
-// 引入操作的dom api的相关方法
-import type { DOMAPI } from './htmlDomApi'
-import { htmlDomApi } from './htmlDomApi'
-// 类型判断
-import * as is from './is'
-// 导入模块
-import type { ModuleHook } from './modules';
-import { modules } from './modules'
-
-type NonUndefined<T> = T extends undefined ? never : T
-
-type KeyToIndexMap = { [key: string]: number }
-
-interface Cbs {
-  [key: string]: ModuleHook[]
-  create: Array<ModuleHook>
-  update: Array<ModuleHook>
-  destroy: Array<(oldVnode: VNode, vnode?: VNode) => void>
-}
-
-// 如果2个VNode节点的key和sel属性都相同，我们就认为它们是相同的VNode节点
-function sameVnode(vnode1: VNode, vnode2: VNode): boolean {
-  return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel
-}
-
-// 判断是否为Vnode
-function isVnode(vnode: any): vnode is VNode {
-  return vnode.sel !== undefined
-}
-
-// 根据children item的key属性，创建Key Map
-function createKeyToOldIdx(
-  children: VNode[],
-  beginIdx: number,
-  endIdx: number,
-): KeyToIndexMap {
-  const map: KeyToIndexMap = {}
-  for (let i = beginIdx; i <= endIdx; ++i) {
-    const key = children[i]?.key
-    if (key !== undefined) {
-      map[key] = i
-    }
-  }
-  return map
-}
-
-// 创建一个空白VNode,用于createElm中触发create钩子函数时调用
-const emptyNode = vnode('', {}, [], undefined, undefined)
-
-export function init(): (oldVnode: VNode | Element, vnode: VNode) => VNode {
-  // 获取操作html dom的api
-  const api: DOMAPI = htmlDomApi
-
-  // 用于缓存各个模块的钩子函数
-  const cbs: Cbs = {
-    create: [],
-    update: [],
-    destroy: [],
-  }
-  // 遍历cbs
-  for (const key of Object.keys(cbs)) {
-    // 初始化为数组
-    cbs[key] = []
-    // 遍历modules
-    for (const module of Object.keys(modules)) {
-      // 获取模块中对应的生命周期
-      const hook = modules[module][key]
-      // 如果生命周期有值
-      if (hook !== undefined) {
-        // 将其加入cbs对应的属性中
-        cbs[key].push(hook)
-      }
-    }
-  }
-
-  // 创建一个只有标签名和选择器的空白VNode
-  function emptyNodeAt(elm: Element) {
-    const id = elm.id ? '#' + elm.id : ''
-    const c = elm.className ? '.' + elm.className.split(' ').join('.') : ''
-    return vnode(
-      api.tagName(elm).toLowerCase() + id + c,
-      {},
-      [],
-      undefined,
-      elm,
-    )
-  }
-
-  // 判断是否为undefined
-  function isUndef(s: unknown): boolean {
-    return s === undefined
-  }
-
-  // 判断是否为defined
-  function isDef<A>(s: A): s is NonUndefined<A> {
-    return s !== undefined
-  }
-
-  // 根据VNode创建dom
-  function createElm(vnode: VNode): Node {
-    // 缓存循环children中的index
-    let i: number
-    // 缓存VNode的children
-    const children = vnode.children
-    // 缓存VNode的选择器
-    const sel = vnode.sel
-    // 把 vnode 转化成真实DOM对象（没有渲染到页面）
-    if (sel === '!') {
-      // 如果选择器是！，创建注释节点
-      if (isUndef(vnode.text)) {
-        vnode.text = ''
-      }
-      vnode.elm = api.createComment(`${vnode.text!}`)
-    } else if (sel !== undefined) {
-      // 如果选择器不为空，解析选择器
-      // 缓存id
-      const hashIdx = sel.indexOf('#')
-      // 缓存class
-      const dotIdx = sel.indexOf('.', hashIdx)
-      // 缓存 # 的位置
-      const hash = hashIdx > 0 ? hashIdx : sel.length
-      // 缓存 . 的位置
-      const dot = dotIdx > 0 ? dotIdx : sel.length
-      // 缓存标签
-      const tag =
-        hashIdx !== -1 || dotIdx !== -1
-          ? sel.slice(0, Math.min(hash, dot))
-          : sel
-      // 创建dom
-      const elm = (vnode.elm = api.createElement(tag))
-      // dom设置id
-      if (hash < dot) elm.setAttribute('id', sel.slice(hash + 1, dot))
-      // dom设置class
-      if (dotIdx > 0)
-        elm.setAttribute('class', sel.slice(dot + 1).replace(/\./g, ' '))
-      // 触发各个模块的create钩子函数
-      for (i = 0; i < cbs.create.length; ++i) {
-        cbs.create[i](emptyNode, vnode)
-      }
-      // 如果vnode中有子节点，创建子vnode对应的DOM元素并追加到DOM树上
-      if (is.array(children)) {
-        for (i = 0; i < children.length; ++i) {
-          const ch = children[i]
-          if (ch != null) {
-            api.appendChild(elm, createElm(ch as VNode))
-          }
-        }
-      } else if (is.primitive(vnode.text)) {
-        // 如果有子文本节点，也创建并追加到DOM树上
-        api.appendChild(elm, api.createTextNode(`${vnode.text!}`))
-      }
-    } else {
-      // 如果选择器为空，创建文本节点
-      vnode.elm = api.createTextNode(`${vnode.text!}`)
-    }
-    // 返回新创建的DOM
-    return vnode.elm
-  }
-
-  // 根据VNode新增dom
-  function addVnodes(
-    parentElm: Node,
-    before: Node | null,
-    vnodes: VNode[],
-    startIdx: number,
-    endIdx: number,
-  ) {
-    // 遍历传入的VNode数组，创建对应的dom，再将dom插入到指定的dom元素之前
-    for (; startIdx <= endIdx; ++startIdx) {
-      const ch = vnodes[startIdx]
-      if (ch != null) {
-        api.insertBefore(parentElm, createElm(ch), before)
-      }
-    }
-  }
-
-  // 触发destroy钩子函数
-  function invokeDestroyHook(vnode: VNode) {
-    // 获取VNode的data属性
-    const data = vnode.data
-    // 当data不为空时
-    if (data !== undefined) {
-      // 触发各个模块的destroy钩子函数
-      for (let i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode)
-      // 当VNode有子节点，且子节点不为字符串或数字，触发子节点VNode的destroy钩子函数
-      if (vnode.children !== undefined) {
-        for (let j = 0; j < vnode.children.length; ++j) {
-          const child = vnode.children[j]
-          if (
-            child != null &&
-            typeof child !== 'string' &&
-            typeof child !== 'number'
-          ) {
-            invokeDestroyHook(child)
-          }
-        }
-      }
-    }
-  }
-
-  // 创建删除子节点dom的方法
-  function createRmCb(childElm: Node) {
-    return function rmCb() {
-      // 这里是一个闭包将需要删除的dom节点缓存起来,方便之后调用rmCb方法删除
-      const parent = api.parentNode(childElm) as Node
-      api.removeChild(parent, childElm)
-    }
-  }
-
-  // 删除VNode对应dom
-  function removeVnodes(
-    parentElm: Node,
-    vnodes: VNode[],
-    startIdx: number,
-    endIdx: number,
-  ): void {
-    for (; startIdx <= endIdx; ++startIdx) {
-      // 用于缓存删除dom的方法
-      let rm: () => void
-      // 获取当前要删除节点
-      const ch = vnodes[startIdx]
-      if (ch != null) {
-        if (isDef(ch.sel)) {
-          // 触发destroy钩子函数
-          invokeDestroyHook(ch)
-          /*
-           * 在dom中这里需要判断remove钩子函数是否全部调用,而我们dom没有remove钩子函数,所以
-           * 不需要判断
-           */
-          rm = createRmCb(ch.elm!)
-          // 删除子节点
-          rm()
-        } else {
-          // 删除文本节点
-          api.removeChild(parentElm, ch.elm!)
-        }
-      }
-    }
-  }
-
-  // 更新children
-  function updateChildren(parentElm: Node, oldCh: VNode[], newCh: VNode[]) {
-    // 旧VNode的children头索引
-    let oldStartIdx = 0
-    // 新VNode的children头索引
-    let newStartIdx = 0
-    // 旧VNode的children尾索引
-    let oldEndIdx = oldCh.length - 1
-    // 新VNode的children尾索引
-    let newEndIdx = newCh.length - 1
-    // 旧VNode的children的头VNode
-    let oldStartVnode = oldCh[0]
-    // 旧VNode的children的尾VNode
-    let oldEndVnode = oldCh[oldEndIdx]
-    // 新VNode的children的头VNode
-    let newStartVnode = newCh[0]
-    // 新VNode的children的尾VNode
-    let newEndVnode = newCh[newEndIdx]
-    // 旧VNode的children的Key Map
-    let oldKeyToIdx: KeyToIndexMap | undefined
-    // 用于缓存key相同的新旧VNode
-    let idxInOld: number
-    // 用于缓存将要移动的旧VNode
-    let elmToMove: VNode
-    // 用于缓存将要插入新增VNode的位置之前的VNode
-    let before: any
-
-    // 遍历新旧children数组，直到其中之一遍历完
-    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-      // 我们之后可能会对oldStartVnode、oldEndVnode、newStartVnode、newEndVnode重新赋值，可能会出现等于null的情况
-      if (oldStartVnode == null) {
-        oldStartVnode = oldCh[++oldStartIdx]
-      } else if (oldEndVnode == null) {
-        oldEndVnode = oldCh[--oldEndIdx]
-      } else if (newStartVnode == null) {
-        newStartVnode = newCh[++newStartIdx]
-      } else if (newEndVnode == null) {
-        newEndVnode = newCh[--newEndIdx]
-        // key 和 sel 相同，则就是相同节点
-      } else if (sameVnode(oldStartVnode, newStartVnode)) {
-        // 当旧头VNode和新头VNode是相同VNode时，将新头VNode差异更新到旧头VNode上，同时将新旧头索引后移
-        // 对比两个节点，如果newVnode有vnodeData，
-        // 执行update钩子，更新oldNode上的模块的内容
-        // 更新加载过的模块里的内容
-        // 判断节点的类型，文本节点直接替换，如果不是文本节点
-        // 判断是否有子元素，更新子元素
-        patchVnode(oldStartVnode, newStartVnode)
-        oldStartVnode = oldCh[++oldStartIdx]
-        newStartVnode = newCh[++newStartIdx]
-      } else if (sameVnode(oldEndVnode, newEndVnode)) {
-        // 当旧尾VNode和新尾VNode是相同VNode时，将新尾VNode差异更新到旧尾VNode上，同时将新旧尾索引前移
-        patchVnode(oldEndVnode, newEndVnode)
-        oldEndVnode = oldCh[--oldEndIdx]
-        newEndVnode = newCh[--newEndIdx]
-      } else if (sameVnode(oldStartVnode, newEndVnode)) {
-        /**
-         * 当旧头VNode和新尾VNode是相同节点时，将新尾VNode差异更新到旧头VNode上，然后将旧头VNode插入到旧尾VNode后
-         * 最后将旧头索引后移，新尾索引前移
-         */
-        patchVnode(oldStartVnode, newEndVnode)
-        api.insertBefore(parentElm,oldStartVnode.elm!,api.nextSibling(oldEndVnode.elm!))
-        oldStartVnode = oldCh[++oldStartIdx]
-        newEndVnode = newCh[--newEndIdx]
-      } else if (sameVnode(oldEndVnode, newStartVnode)) {
-        /**
-         * 当旧尾VNode和新头VNode是相同节点时，将新头VNode差异更新到旧尾VNode上，然后将旧尾VNode插入到旧头VNode前
-         * 最后将旧尾索引前移，新头索引后移
-         */
-        patchVnode(oldEndVnode, newStartVnode)
-        api.insertBefore(parentElm, oldEndVnode.elm!, oldStartVnode.elm!)
-        oldEndVnode = oldCh[--oldEndIdx]
-        newStartVnode = newCh[++newStartIdx]
-      } else {
-        // 如果没有Key Map则创建Key Map，用于根据key来更新VNode
-        if (oldKeyToIdx === undefined) {
-          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
-        }
-        // 根据Key Map获取当前新头VNode的对应的旧VNode的index
-        idxInOld = oldKeyToIdx[newStartVnode.key as string]
-
-        if (isUndef(idxInOld)) {
-          // 如果没有设置key属性，直接根据新头VNode创建dom元素，插入到旧头VNode对应dom之前
-          api.insertBefore(
-            parentElm,
-            createElm(newStartVnode),
-            oldStartVnode.elm!,
-          )
-        } else {
-          // 如果设置key属性，获取到key对应的旧VNode
-          elmToMove = oldCh[idxInOld]
-          if (elmToMove.sel !== newStartVnode.sel) {
-            // 如果旧VNode和新VNode的sel属性不同，则直接创建新VNode对应的dom，插入到旧头VNode对应dom之前
-            api.insertBefore(
-              parentElm,
-              createElm(newStartVnode),
-              oldStartVnode.elm!,
-            )
-          } else {
-            // 如果sel属性相同，则将新VNode数据更新到旧VNode上
-            patchVnode(elmToMove, newStartVnode)
-            // 删除旧children对应的VNode，代表已经更新过
-            oldCh[idxInOld] = undefined as any
-            // 创建VNode对应的dom，插入到旧头VNode对应dom之前
-            api.insertBefore(parentElm, elmToMove.elm!, oldStartVnode.elm!)
-          }
-        }
-        // 将新头VNode设置为新children数组中新头索引后一位
-        newStartVnode = newCh[++newStartIdx]
-      }
-    }
-    // 循环完成后，当旧头索引小于等于旧尾索引，或新头索引大于等于新尾索引时，说明新旧children其中之一已经遍历完成
-    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-      // 如果存在旧头索引大于旧尾索引情况，说明新children中新增了VNode
-      if (oldStartIdx > oldEndIdx) {
-        // 获取新增VNode后一位的VNode对应的dom
-        before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm
-        // 将新增VNode对应dom插入对应dom树位置
-        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
-      } else {
-        // 删除多余dom节点
-        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
-      }
-    }
-  }
-
-  // 对比新旧vnode差异,将差异更新到旧VNode上。
-  function patchVnode(oldVnode: VNode, vnode: VNode) {
-    // 当VNode的data属性存在时,触发update钩子函数
-    if (vnode.data !== undefined) {
-      for (let i = 0; i < cbs.update.length; ++i) {
-        cbs.update[i](oldVnode, vnode)
-      }
-    }
-
-    // 由于是相同的VNode节点，使用新旧VNode的真实dom元素相同
-    const elm = (vnode.elm = oldVnode.elm!)
-    // 获取旧VNode的children
-    const oldCh = oldVnode.children as VNode[]
-    // 获取新VNode的children
-    const ch = vnode.children as VNode[]
-
-    // 如果新旧节点完全相同，直接返回
-    if (oldVnode === vnode) return
-    // 判断VNode是否为文本节点
-    if (isUndef(vnode.text)) {
-      // 如果不是文本节点，判断新旧VNode是否同时有children
-      if (isDef(oldCh) && isDef(ch)) {
-        // 如果同时有children属性，且children属性不相同就更新children
-        if (oldCh !== ch) {
-          updateChildren(elm, oldCh, ch)
-        }
-      }
-    }
-  }
-
-  return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {
-    // 缓存dom节点和父dom节点
-    let elm: Node, parent: Node
-
-    // 当oldVnode不是VNode时，说明是初次加载，创建一个空白VNode
-    if (!isVnode(oldVnode)) {
-      oldVnode = emptyNodeAt(oldVnode)
-    }
-
-    // 判断是否为相同VNode节点
-    if (sameVnode(oldVnode, vnode)) {
-      // 更新VNode节点差异
-      patchVnode(oldVnode, vnode)
-    } else {
-      // 获取旧VNode的dom
-      elm = oldVnode.elm!
-      // 获取父节点dom
-      parent = api.parentNode(elm) as Node
-      // 创建dom元素
-      createElm(vnode)
-      // 当父节点不为空时
-      if (parent != null) {
-        // 将新创建的dom插入dom树
-        api.insertBefore(parent, vnode.elm!, api.nextSibling(elm))
-        // 删除旧VNode节点
-        removeVnodes(parent, [oldVnode], 0, 0)
-      }
-    }
-    return vnode
-  }
-}

package/src/vnode/is.ts

@@ -1,17 +0,0 @@
-import type { VNode } from './vnode'
-
-// 判断是否为数组
-export const array = Array.isArray
-
-export const isStr = (str: unknown): str is string => {
-  return typeof str === 'string'
-}
-// 判断是否为字符串或数字
-export function primitive(s: unknown): s is string | number {
-  return typeof s === 'string' || typeof s === 'number'
-}
-// 判断是否为vnode
-export function isVnode(s: any): s is VNode {
-  return !!s?.sel
-}
-

package/src/vnode/modules/attributes.ts

@@ -1,70 +0,0 @@
-import type { VNode, VNodeData } from '../vnode'
-
-export type Attrs = Record<string, string | number | boolean>
-
-const xlinkNS = 'http://www.w3.org/1999/xlink'
-const xmlNS = 'http://www.w3.org/XML/1998/namespace'
-const colonChar = 58
-const xChar = 120
-
-function updateAttrs(oldVnode: VNode, vnode: VNode): void {
-  // 用于缓存attrs的name
-  let key: string
-  // 用于缓存Vnode的dom
-  const elm: Element = vnode.elm as Element
-  // 用于缓存旧VNode的attrs
-  let oldAttrs = oldVnode.data && oldVnode.data.attrs
-  // 用于缓存新VNode的attrs
-  let attrs = vnode.data && vnode.data.attrs
-
-  // 如果新旧VNode都没有attrs属性，直接返回
-  if (!oldAttrs && !attrs) return
-  // 如果新旧VNode的attrs属性相同，直接返回
-  if (oldAttrs === attrs) return
-  //  如果旧VNode没有attrs，将其设置为空对象
-  oldAttrs = oldAttrs || {}
-  //  如果新VNode没有attrs，将其设置为空对象
-  attrs = attrs || {}
-
-  // 遍历新VNode的attrs
-  for (key in attrs) {
-    // 获取当前attrs的值
-    const cur = attrs[key]
-    // 获取旧VNode对应的attrs的值
-    const old = oldAttrs[key]
-    // 如果新旧VNode的attrs值不相同
-    if (old !== cur) {
-      // 如果新VNode的attrs值为true
-      if (cur === true) {
-        // 通过setAttribute设置为空字符串
-        elm.setAttribute(key, '')
-      } else if (cur === false) {
-        // 如果新VNode的attrs值为false，则删除key
-        elm.removeAttribute(key)
-      } else {
-        // 设置svg的属性
-        if (key.charCodeAt(0) !== xChar) {
-          elm.setAttribute(key, cur as any)
-        } else if (key.charCodeAt(3) === colonChar) {
-          // Assume xml namespace
-          elm.setAttributeNS(xmlNS, key, cur as any)
-        } else if (key.charCodeAt(5) === colonChar) {
-          // Assume xlink namespace
-          elm.setAttributeNS(xlinkNS, key, cur as any)
-        } else {
-          // 通过setAttribute设置值
-          elm.setAttribute(key, `${cur}`)
-        }
-      }
-    }
-  }
-  // 遍历旧VNode的attrs
-  for (key in oldAttrs) {
-    // 如果新VNode的attrs中没有相同的key，则直接删除该attrs属性
-    if (!(key in attrs)) {
-      elm.removeAttribute(key)
-    }
-  }
-}
-
-export const attributesModule = { create: updateAttrs, update: updateAttrs }

package/src/vnode/modules/class.ts

@@ -1,46 +0,0 @@
-import type { VNode, VNodeData } from '../vnode'
-
-export type Classes = Record<string, boolean>
-
-function updateClass(oldVnode: VNode, vnode: VNode): void {
-  // 用于缓存遍历中当前class属性的值
-  let cur: any
-  // 用于缓存遍历中当前class的name
-  let name: string
-  // 获取新VNode的dom元素
-  const elm: Element = vnode.elm as Element
-  // 获取旧VNode的class数据
-  let oldClass = oldVnode.data && oldVnode.data.class
-  // 获取新VNode的class数据
-  let className = vnode.data && vnode.data.class
-
-  // 如果新旧VNode都没有class，直接返回
-  if (!oldClass && !className) return
-  // 如果新旧VNode完全相同，直接返回
-  if (oldClass === className) return
-  // 如果旧VNode没有class，将其设置为空对象
-  oldClass = oldClass || {}
-  // 如果新VNode没有class，将其设置为空对象
-  className = className || {}
-
-  // 遍历旧VNode的class
-  for (name in oldClass) {
-    // 如果当前class旧VNode上有但新VNode没有，则删除该VNode
-    if (
-      oldClass[name] &&
-      !Object.prototype.hasOwnProperty.call(className, name)
-    ) {
-      elm.classList.remove(name)
-    }
-  }
-  // 遍历新Vnodde的class
-  for (name in className) {
-    // 如果新旧VNode的class值不同，则根据新VNode的class值是true or false来判断是新增还是删除class
-    cur = className[name]
-    if (cur !== oldClass[name]) {
-      (elm.classList as any)[cur ? 'add' : 'remove'](name)
-    }
-  }
-}
-
-export const classModule = { create: updateClass, update: updateClass }

package/src/vnode/modules/listeners.ts

@@ -1,123 +0,0 @@
-import type { VNode, VNodeData } from '../vnode'
-
-const isFunction = (handler: unknown): handler is Function => {
-  return typeof handler === 'function'
-}
-
-type Listener<T> = (this: VNode, ev: T, vnode: VNode) => void
-
-export type On = {
-  [N in keyof HTMLElementEventMap]?:
-    | Listener<HTMLElementEventMap[N]>
-    | Array<Listener<HTMLElementEventMap[N]>>
-} & {
-  [event: string]: Listener<any> | Array<Listener<any>>
-}
-
-type SomeListener<N extends keyof HTMLElementEventMap> =
-  | Listener<HTMLElementEventMap[N]>
-  | Listener<any>
-
-function invokeHandler<N extends keyof HTMLElementEventMap>(
-  handler: SomeListener<N> | Array<SomeListener<N>>,
-  vnode: VNode,
-  event?: Event,
-): void {
-  if (isFunction(handler)) {
-    // 如果类型是function，说明只有一个事件监听，将this指向vnode调用
-    (handler as Function).call(vnode, event, vnode)
-  } else if (typeof handler === 'object') {
-    // 如果类型是对象，说明有多个事件监听，遍历依次调用
-    for (let i = 0; i < handler.length; i++) {
-      invokeHandler(handler[i], vnode, event)
-    }
-  }
-}
-
-function handleEvent(event: Event, vnode: VNode) {
-  const name = event.type
-  const on = vnode.data && vnode.data.on
-
-  // 如果on中存在事件监听，则进行运行
-  if (on && on[name]) {
-    invokeHandler(on[name], vnode, event)
-  }
-}
-
-// 创建一个事件监听的闭包，这样可以确保每次创建的都是一个独立的事件监听
-function createListener() {
-  return function handler(event: Event) {
-    handleEvent(event, (handler as any).vnode)
-  }
-}
-
-function updateEventListeners(oldVnode: VNode, vnode?: VNode): void {
-  // 获取旧VNode中监听的事件
-  const oldOn = oldVnode?.data?.on
-  // 获取旧VNode中已经创建的监听事件
-  const oldListener = oldVnode?.listener
-  // 获取旧VNode的dom
-  const oldElm: Element = oldVnode.elm as Element
-  // 获取新VNode中监听的事件
-  const on = vnode?.data?.on
-  // 获取新VNode中已经创建的监听事件
-  const elm: Element = (vnode && vnode.elm) as Element
-  // 缓存遍历中当前事件的名称
-  let name: string
-
-  // 如果新旧VNode监听事件完全一样，直接返回
-  if (oldOn === on) {
-    return
-  }
-
-  // 如果旧VNode中有已经创建的事件监听
-  if (oldOn && oldListener) {
-    // 如果新VNode中没有事件监听
-    if (!on) {
-      for (name in oldOn) {
-        // 删除旧VNode中的事件监听
-        oldElm.removeEventListener(name, oldListener, false)
-      }
-    } else {
-      // 如果新VNode中有事件监听，则遍历旧VNode
-      for (name in oldOn) {
-        // 如果新VNode中没有当前的事件监听，则删除该事件监听
-        if (!on[name]) {
-          oldElm.removeEventListener(name, oldListener, false)
-        }
-      }
-    }
-  }
-
-  // 如果新VNode有事件监听
-  if (on) {
-    // 如果新VNode上已经存在事件监听，则直接继承，如果没有则创建一个新事件监听
-    const listener = vnode.listener = oldVnode.listener || createListener()
-    // 更新listener上的vnode
-    // listener.vnode = vnode
-
-    // 如果旧VNode没有事件监听
-    if (!oldOn) {
-      // 遍历新VNode上的事件监听
-      for (name in on) {
-        // 将其添加到dom上
-        elm.addEventListener(name, listener, false)
-      }
-    } else {
-      // 如果旧VNode有事件监听
-      // 遍历新VNode上的事件监听
-      for (name in on) {
-        // 将旧VNode上没有的事件监听添加到dom上
-        if (!oldOn[name]) {
-          elm.addEventListener(name, listener, false)
-        }
-      }
-    }
-  }
-}
-
-export const eventListenersModule = {
-  create: updateEventListeners,
-  update: updateEventListeners,
-  destroy: updateEventListeners,
-}