再?gòu)?fù)雜的框架，核心也只有這兩步

　　還在為“虛擬DOM”“協(xié)調(diào)”“Fiber”這些詞發(fā)怵？打開任何一個(gè)現(xiàn)代框架的文檔，撲面而來(lái)的術(shù)語(yǔ)足以讓你覺得，自己這輩子也搞不懂前端框架了。實(shí)際上，把這些唬人的概念剝干凈，下面藏著的不過(guò)是個(gè)穿著大衣的小想法。今天我們就一起手寫一個(gè)最小框架，保證幫你把這些迷霧徹底驅(qū)散。

　　第一步：把界面從HTML請(qǐng)進(jìn)JavaScript。瀏覽器天生認(rèn)HTML，比如這樣：

　　Hello World!。但我們偏要用最普通的JavaScript數(shù)據(jù)把它描述出來(lái)。為什么？因?yàn)橐坏┙缑孀兂闪似胀〝?shù)據(jù)，就可以用純代碼去生成它、改寫它、比對(duì)差異，根本無(wú)需模板語(yǔ)言。

　　描述方式很多，對(duì)象、函數(shù)、數(shù)組、JSX……隨便選。我們就用最直白的對(duì)象，因?yàn)閷?duì)象在控制臺(tái)里戳起來(lái)方便，也一目了然：

　　const ourUI = {tag: "h1",attributes: {},children: ["Hello World!"],

　　就三個(gè)字段，每個(gè)都直指瀏覽器關(guān)心的東西。tag是要?jiǎng)?chuàng)建的元素類型，這里是 h1；attributes是掛在元素上的東西，這里空著；children是它里面的內(nèi)容，也就是一段文字。嵌套也很自然，因?yàn)樽釉乇旧硪部梢允峭瑯拥膶?duì)象：

　　const ourUI = {tag: "main",attributes: { id: "welcome" },children: [{ tag: "h1", attributes: {}, children: ["Hello World!"] },{ tag: "p", attributes: {}, children: ["我們正在建造一個(gè)框架。"] },],

　　注意，這時(shí)頁(yè)面上還沒任何東西。它只是一個(gè)躺在內(nèi)存里的UI描述，不是真正的界面。這個(gè)區(qū)分是整個(gè)游戲的命門，務(wù)必記牢。接下來(lái)，就是要把這紙面描述，變成瀏覽器能渲染的真實(shí)DOM。

　　第二步：把數(shù)據(jù)變成界面。先從最小的情況入手。假設(shè)手里有這樣一個(gè)描述對(duì)象：

　　const description = {tag: "h1",attributes: {},children: ["Hello World!"],

　　先按標(biāo)簽名創(chuàng)建一個(gè)真正的元素：
const element = document.createElement(description.tag);

　　這樣我們就有了一個(gè)空的

　　節(jié)點(diǎn)。接著處理內(nèi)容。唯一的子元素是字符串，而瀏覽器里元素里頭的文本是以文本節(jié)點(diǎn)形式存在的。于是創(chuàng)建一個(gè)文本節(jié)點(diǎn)，再掛到元素上：

　　const text = document.createTextNode("Hello World!");element.appendChild(text);

　　到此，我們從零拼出了一個(gè)

　　Hello World!。剛才這波操作——輸入一份描述，輸出一個(gè)真實(shí)的DOM節(jié)點(diǎn)——就是整個(gè)框架唯一的核心動(dòng)作。一次描述進(jìn)，一個(gè)節(jié)點(diǎn)出?，F(xiàn)在，我們要把這個(gè)動(dòng)作封成一個(gè)可復(fù)用的函數(shù)，叫它construct()。它接收一個(gè)UI描述對(duì)象，返回一個(gè)活脫脫的DOM節(jié)點(diǎn)。剩下的所謂“渲染引擎”、“組件模型”，其實(shí)不過(guò)是在這個(gè)基礎(chǔ)邏輯上頭搭積木。

　　看完這兩步，下次再捧起任何框架的學(xué)習(xí)資料，就不容易迷了?！鞍。讓硬贿^(guò)是一堆描述變DOM，加上了優(yōu)化和自動(dòng)化而已。” 這就是前端框架的起點(diǎn)，干凈得讓人有點(diǎn)失望，不是嗎？