手写简易前端框架：vdom 渲染和 jsx 编译

Posted 2022-01-27 前端真好玩

作为前端工程师，前端框架几乎每天都要用到，需要好好掌握，而对某项技术的掌握程度可以根据是否能实现一个来判断。手写一个前端框架对更好的掌握它是很有帮助的事情。

现代前端框架经过多年的迭代都已经变得很复杂，理清它们的实现原理变得困难重重。所以我想写一个最简单版本的前端框架来帮助大家理清思路。

一个完整的前端框架涉及到的内容还是比较多的，我们一步步的来，这篇文章来实现下 vdom 的渲染。

来创建文本节点。

如果是元素类型，那么就要用 document.createElement来创建元素节点，元素节点还有属性要处理，并且要递归的渲染子节点。

所以，vdom 的 render 逻辑就是这样的：

if (isTextVdom(vdom)) 
    return mount(document.createTextNode(vdom));
 else if (isElementVdom(vdom)) 
    const dom = mount(document.createElement(vdom.type));
    for (const child of vdom.children) 
        render(child, dom);
    
    for (const prop in vdom.props) 
        setAttribute(dom, prop, vdom.props[prop]);
    
    return dom;

文本的判断就是字符串和数字：

function isTextVdom(vdom) 
    return typeof vdom == \'string\' || typeof vdom == \'number\';

元素的判断就是对象，并且 type 为标签名的字符串：

function isElementVdom(vdom) 
   return typeof vdom == \'object\' && typeof vdom.type == \'string\';

元素创建出来之后如果有父节点要挂载到父节点，组装成 dom 树：

const mount = parent ? (el => parent.appendChild(el)) : (el => el);

所以，完整的 render 函数就是这样的：

const render = (vdom, parent = null) => 
    const mount = parent ? (el => parent.appendChild(el)) : (el => el);
    if (isTextVdom(vdom)) 
        return mount(document.createTextNode(vdom));
     else if (isElementVdom(vdom)) 
        const dom = mount(document.createElement(vdom.type));
        for (const child of vdom.children) 
            render(child, dom);
        
        for (const prop in vdom.props) 
            setAttribute(dom, prop, vdom.props[prop]);
        
        return dom;
    
;

其中，元素的 dom 还要设置属性，比如上面 vdom 里有 style 和 onClick 的属性要设置。

style 属性是样式，支持对象，要把对象合并之后设置到 style，而 onClick 属性是事件监听器，用 addEventListener 设置，其余的属性都用 setAttribute 来设置。

const setAttribute = (dom, key, value) => 
    if (typeof value == \'function\' && key.startsWith(\'on\')) 
        const eventType = key.slice(2).toLowerCase();
        dom.addEventListener(eventType, value);
     else if (key == \'style\' && typeof value == \'object\') 
        Object.assign(dom.style, value);
     else if (typeof value != \'object\' && typeof value != \'function\') 
        dom.setAttribute(key, value);
    

就这样，vdom 的渲染逻辑就完成了。

用上面那段 vdom 渲染试下效果：

render(vdom, document.getElementById(\'root\'));

vdom 的渲染成功！

小结一下：

「vdom 会递归的进行渲染，根据类型的不同，元素、文本会分别用 createTextNode、createElement 来递归创建 dom 并组装到一起，其中元素还要设置属性，style、事件监听器和其他属性分别用 addEventListener、setAttribute 等 api 进行设置。」

「通过不同的 api 创建 dom 和设置属性，这就是 vdom 的渲染流程。」

但是，vdom 写起来也太麻烦了，没人会直接写 vdom，一般是通过更友好的 DSL（领域特定语言） 来写，然后编译成 vdom，比如 jsx 和 template。

这里我们使用 jsx 的方式，因为可以直接用 babel 编译。

jsx 编译成 vdom

上面的 vdom 改为 jsx 来写就是这样的：

const jsx = <ul className="list">
    <li className="item" style= background: \'blue\', color: \'pink\'  onClick=() => alert(2)>aaa</li>
    <li className="item">bbbb</li>
    <li className="item">cccc</li>
</ul>

render(jsx, document.getElementById(\'root\'));

明显比直接写 vdom 紧凑了不少，但是需要做一次编译。

配置下 babel 来编译 jsx：

module.exports = 
    presets: [
        [
            \'@babel/preset-react\',
            
                pragma: \'createElement\'
            
        ]
    ]

编译产物是这样的：

const jsx = createElement("ul", 
  className: "list"
, createElement("li", 
  className: "item",
  style: 
    background: \'blue\',
    color: \'pink\'
  ,
  onClick: () => alert(2)
, "aaa"), createElement("li", 
  className: "item"
, "bbbb"), createElement("li", 
  className: "item"
, "cccc"));
render(jsx, document.getElementById(\'root\'));

为啥不直接是 vdom，而是一些函数呢？

因为这样会有一次执行的过程，可以放入一些动态逻辑，

比如从 data 取值：

const data = 
    item1: \'bbb\',
    item2: \'ddd\'

const jsx = <ul className="list">
    <li className="item" style= background: \'blue\', color: \'pink\'  onClick=() => alert(2)>aaa</li>
    <li className="item">data.item1</li>
    <li className="item">data.item2</li>
</ul>

会编译成：

const data = 
  item1: \'bbb\',
  item2: \'ddd\'
;
const jsx = createElement("ul", 
  className: "list"
, createElement("li", 
  className: "item",
  style: 
    background: \'blue\',
    color: \'pink\'
  ,
  onClick: () => alert(2)
, "aaa"), createElement("li", 
  className: "item"
, data.item1), createElement("li", 
  className: "item"
, data.item2));

这叫做 render function，它执行的返回值就是 vdom。

这个 render function 名字之所以是 createElement，是因为我们上面 babel 配置里指定了 pragma 为 createElement。

render function 就是生成 vdom 的，所以实现很简单：

const createElement = (type, props, ...children) => 
  return 
    type,
    props,
    children
  ;
;

我们来测试下改为 jsx 之后的渲染：

渲染成功！

我们在 vdom 的基础上更进了一步，通过 jsx 来写一些动态逻辑，然后编译成 render function，执行之后产生 vdom。

这样比直接写 vdom 更简单，可以做更灵活的 vdom 生成逻辑。

代码上传到了 github：https://github.com/QuarkGluonPlasma/frontend-framework-exercize

总结

手写前端框架是更好的掌握它的最直接的方式，我们会逐步实现一个功能完整的前端框架。

本文我们实现了 vdom 的渲染。vdom 是描述界面的对象，它的渲染就是通过 createElement、createTextNode 等 api 来递归创建和组装元素、文本等 dom 的过程，其中元素节点还需要设置属性，style、event listener 等属性会用不同的 api 设置。

虽然最终是 vdom 的渲染，但是开发时不会直接写 vdom，而是通过 jsx 来描述页面，然后编译成 render function，执行后产生 vdom。这样写起来更简洁，而且支持动态逻辑。（jsx 的编译使用 babel，可以指定 render function 的名字）

vdom 渲染和 jsx 是前端框架的基础，其他的功能比如组件是在这个基础之上实现的，下篇文章我们就来实现组件的渲染。