Appearance

Return to top
On this page

运行时和编译时 ❤️❤️

设计框架的选择

当我们设计框架的时候 我们有三种选择， 纯运行时， 纯编译时， 编译时 + 运行时

比如我们设计了一个框架 它提供了一个render函数 用户提供数据对象 然后使用Render函数递归 将数据渲染成dom元素 规定的数据结构如下

ts
const obj = {
  tag: 'div',
  children: [
    tag: 'span', children: 'hello erkelost'
  ]
}

function Render(obj, root) {
  const el = document.createElement(obj.tag)
  if (typeof obj.children === 'string') {
    const text = document.createTextNode(obj.children)
    el.appendChild(text)
  } else if (obj.children) {
    obj.children.forEach(item => Render(item, el))
  }
  root.appendChild(el)
}

如果有了这个函数 我们就可以这么使用他

ts
const obj = {
  tag: 'div',
  children: [
    { tag: 'span', children: '666'}
  ]
}
Render(obj, document.body)

我们编写的这种 render函数 就是一个纯运行时框架， 但是为了满足用户需求 如果给用户提供可以使用html字符串的写法，那么我们这个就不行了 我们可以编写一个compiler程序 作用是把html字符串 先转成dom结构的数据对象 再去Render（）

这样我们的代码就变成了 运行时 + 编译时 用户可以提供html片段进行编译 准确的说是运行时编译

纯编译时框架 我们可以直接把html字符串编译成数据对象 也可以直接编译成命令式代码 只需要一个compile 连 Render 都不需要了

在github 上编辑文档