手寫簡易前端框架：Vdom 渲染和 jsx 編譯
作為前端工程師，前端框架幾乎每天都要用到，需要好好掌握，而對某項(xiàng)技術(shù)的掌握程度可以根據(jù)是否能實(shí)現(xiàn)一個(gè)來判斷。手寫一個(gè)前端框架對更好的掌握它是很有幫助的事情。
現(xiàn)代前端框架經(jīng)過多年的迭代都已經(jīng)變得很復(fù)雜，理清它們的實(shí)現(xiàn)原理變得困難重重。所以我想寫一個(gè)最簡單版本的前端框架來幫助大家理清思路。
一個(gè)完整的前端框架涉及到的內(nèi)容還是比較多的，我們一步步的來，這篇文章來實(shí)現(xiàn)下 vdom 的渲染。
vdom 的渲染
vdom 全稱 virtual dom，用來聲明式的描述頁面，現(xiàn)代前端框架很多都基于 vdom。前端框架負(fù)責(zé)把 vdom 轉(zhuǎn)為對真實(shí) dom 的增刪改，也就是 vdom 的渲染。
那么 vdom 是什么樣的?又是怎么渲染的呢?
dom 主要是元素、屬性、文本，vdom 也是一樣，其中元素是 {type、props、children} 的結(jié)構(gòu)，文本就是字符串、數(shù)字。
比如這樣一段 vdom：
{
type: 'ul',
props: {
className: 'list'
},
children: [
{
type: 'li',
props: {
className: 'item',
style: {
background: 'blue',
color: '#fff'
},
onClick: function() {
alert(1);
}
},
children: [
'aaaa'
]
},
{
type: 'li',
props: {
className: 'item'
},
children: [
'bbbbddd'
]
},
{
type: 'li',
props: {
className: 'item'
},
children: [
'cccc'
]
}
]
}不難看出，它描述的是一個(gè) ul 的元素、它有三個(gè) li 子元素，其中第一個(gè)子元素有 style 的樣式、還有 onClick 的事件。
前端框架就是通過這樣的對象結(jié)構(gòu)來描述界面的，然后把它渲染到 dom。
這樣的對象結(jié)構(gòu)怎么渲染呢?
明顯要用遞歸，對不同的類型做不同的處理。
- 如果是文本類型，那么就要用 document.createTextNode 來創(chuàng)建文本節(jié)點(diǎn)。
- 如果是元素類型，那么就要用 document.createElement來創(chuàng)建元素節(jié)點(diǎn)，元素節(jié)點(diǎn)還有屬性要處理，并且要遞歸的渲染子節(jié)點(diǎn)。
所以，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;
}文本的判斷就是字符串和數(shù)字：
function isTextVdom(vdom) {
return typeof vdom == 'string' || typeof vdom == 'number';
}元素的判斷就是對象，并且 type 為標(biāo)簽名的字符串：
function isElementVdom(vdom) {
return typeof vdom == 'object' && typeof vdom.type == 'string';
}元素創(chuàng)建出來之后如果有父節(jié)點(diǎn)要掛載到父節(jié)點(diǎn)，組裝成 dom 樹：
const mount = parent ? (el => parent.appendChild(el)) : (el => el);
所以，完整的 render 函數(shù)就是這樣的：
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 還要設(shè)置屬性，比如上面 vdom 里有 style 和 onClick 的屬性要設(shè)置。
style 屬性是樣式，支持對象，要把對象合并之后設(shè)置到 style，而 onClick 屬性是事件監(jiān)聽器，用 addEventListener 設(shè)置，其余的屬性都用 setAttribute 來設(shè)置。
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 的渲染成功!
小結(jié)一下：
「vdom 會遞歸的進(jìn)行渲染，根據(jù)類型的不同，元素、文本會分別用 createTextNode、createElement 來遞歸創(chuàng)建 dom 并組裝到一起，其中元素還要設(shè)置屬性，style、事件監(jiān)聽器和其他屬性分別用 addEventListener、setAttribute 等 api 進(jìn)行設(shè)置?！?/p>
「通過不同的 api 創(chuàng)建 dom 和設(shè)置屬性，這就是 vdom 的渲染流程?！?/p>
但是，vdom 寫起來也太麻煩了，沒人會直接寫 vdom，一般是通過更友好的 DSL(領(lǐng)域特定語言) 來寫，然后編譯成 vdom，比如 jsx 和 template。
這里我們使用 jsx 的方式，因?yàn)榭梢灾苯佑?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'
}
]
]
}編譯產(chǎn)物是這樣的：
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，而是一些函數(shù)呢?
因?yàn)檫@樣會有一次執(zhí)行的過程，可以放入一些動(dòng)態(tài)邏輯，
比如從 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，它執(zhí)行的返回值就是 vdom。
這個(gè) render function 名字之所以是 createElement，是因?yàn)槲覀兩厦?babel 配置里指定了 pragma 為 createElement。
render function 就是生成 vdom 的，所以實(shí)現(xiàn)很簡單：
const createElement = (type, props, ...children) => {
return {
type,
props,
children
};
};我們來測試下改為 jsx 之后的渲染：
渲染成功!
我們在 vdom 的基礎(chǔ)上更進(jìn)了一步，通過 jsx 來寫一些動(dòng)態(tài)邏輯，然后編譯成 render function，執(zhí)行之后產(chǎn)生 vdom。
這樣比直接寫 vdom 更簡單，可以做更靈活的 vdom 生成邏輯。
代碼上傳到了 github：https://github.com/QuarkGluonPlasma/frontend-framework-exercize
總結(jié)
手寫前端框架是更好的掌握它的最直接的方式，我們會逐步實(shí)現(xiàn)一個(gè)功能完整的前端框架。
本文我們實(shí)現(xiàn)了 vdom 的渲染。vdom 是描述界面的對象，它的渲染就是通過 createElement、createTextNode 等 api 來遞歸創(chuàng)建和組裝元素、文本等 dom 的過程，其中元素節(jié)點(diǎn)還需要設(shè)置屬性，style、event listener 等屬性會用不同的 api 設(shè)置。
雖然最終是 vdom 的渲染，但是開發(fā)時(shí)不會直接寫 vdom，而是通過 jsx 來描述頁面，然后編譯成 render function，執(zhí)行后產(chǎn)生 vdom。這樣寫起來更簡潔，而且支持動(dòng)態(tài)邏輯。(jsx 的編譯使用 babel，可以指定 render function 的名字)
vdom 渲染和 jsx 是前端框架的基礎(chǔ)，其他的功能比如組件是在這個(gè)基礎(chǔ)之上實(shí)現(xiàn)的，下篇文章我們就來實(shí)現(xiàn)組件的渲染。
