关于javascript:Vuejs设计与实现第三章

渲染器

虚构 DOM: 应用 Javascript 对象形容实在的 DOM 构造. 例如:

  const vNode = {
    // 标签名
    tag: 'div',
    // 标签属性
    prop: {onClick () {alert('点击')
      }
    },
    // 子节点
    children: [
      {
        tag: 'span',
        children: 'hello world'
      }
    ]
  }

应用渲染器将虚构 DOM 变成实在 DOM 并渲染到浏览器页面中, 并寻找并且只更新变动的内容, 如图 1:

因而须要编写一个渲染器, 将下面的虚构 DOM 渲染为实在 DOM:

  function Render(vNode, root) {
    // 应用 vNode.tag 作为标签名创立 DOM 对象
    const el = document.createElement(vNode.tag)
    // 遍历 vNode.props 将属性, 事件增加到 DOM 对象
    for (const key in vNode.props) {if (/^on/.test(key)) {
        // 如果 key 以 on 卡头, 阐明它是个事件, 注册相应事件
        el.addEventListener(key.substr(2).toLocaleLowerCase(), vNode.props[key])
      }
    }

    // 解决 children
    if (typeof vNode.children == 'string') {
      // 为字符串阐明它是元素的文本子节点
      let text = document.createTextNode(vNode.children)
      el.appendChild(text)
    } else if (Array.isArray(vNode.children)) {
      // 递归调用 Render 函数渲染子节点, 应用以后元素 el 作为挂载点
      for (let item of vNode.children) {Render(item, el)
      }
    }
    // 元素增加到挂载点下
    root.appendChild(el)
  }

渲染器 Render 实现思路, 总体为三步:

1. 创立元素: 把 vNode.tag 作为标签名创立 DOM 元素
2. 为元素增加属性和事件: 遍历 vNode.props 对象, 如果 key 以 on 字符结尾, 阐明它是一个事件, 把字符 on 截取后再调用 addEventListener 绑定事件处理函数
3. 解决 children: 如果 children 是一个数组, 就用递归调动 Render 持续渲染, 留神此时要把刚刚创立的元素作为挂载点 (父节点); 如果 children 是字符串, 则应用 createTextNode 函数创立一个文本节点, 并将其增加到新创建的元素内

组件

组件实质就是一组 DOM 元素的封装, 能够定义一个函数代表组件 (也能够应用对象, 该对象增加一个函数返回值为虚构 DOM 即可), 函数的返回值是组件要渲染的内容

const MyComponent = function () {
    return {
        tag: 'div',
        props: {onClick: () => alert('组件')
        },
        children: 'click me'
    }
}

因而就能够应用虚构 DOM 形容组件:

const vNode = {tag: MyComponent}

因而在渲染器渲染时就须要判断 tag 的类型:

  function Render (vNode, container) {if (typeof vNode.tag === 'string') {
    // 阐明 vNode 形容的是标签元素
      mountElement(vNode, container)
    } else if (typeof vNode.tag === 'function') {
      // 阐明 vNode 形容的是组件
      mountComponent(vNode, container)
    }
  }

若为字符串就能够应用 mountElement 函数进行渲染, 内容与上文的 Render 函数一样

  function mountElement(vNode, root) {
    // 应用 vNode.tag 作为标签名创立 DOM 对象
    const el = document.createElement(vNode.tag)
    // 遍历 vNode.props 将属性, 事件增加到 DOM 对象
    for (const key in vNode.props) {if (/^on/.test(key)) {
        // 如果 key 以 on 卡头, 阐明它是个事件, 注册相应事件
        el.addEventListener(key.substr(2).toLocaleLowerCase(), vNode.props[key])
      }
    }

    // 解决 children
    if (typeof vNode.children == 'string') {
      // 为字符串阐明它是元素的文本子节点
      let text = document.createTextNode(vNode.children)
      el.appendChild(text)
    } else if (Array.isArray(vNode.children)) {
      // 递归调用 Render 函数渲染子节点, 应用以后元素 el 作为挂载点
      for (let item of vNode.children) {
        // 进行递归时, 仍然须要判断 tag 的类型, 因而是调用 Render
        Render(item, el)
      }
    }
    // 元素增加到挂载点下
    root.appendChild(el)
  }

若为函数则应用 mountComponent 函数渲染:

  function mountComponent (vNode, container) {// 调用组件函数, 获取组件要渲染的内容 ( 虚构 DOM)
  const subtree = vNode.tag()
  // 递归调用 Render 渲染 subtrss
  Render(subtree, container)
}