在我的日常工作中，我致力于一個 JavaScript 框架（LWC）。盡管我已經(jīng)在這個項目上工作了將近三年，但我仍然覺得自己是一個業(yè)余愛好者。當我閱讀有關更大的框架世界的信息時，常常因為不了解的事情太多而感到不知所措。

然而，學習事物的最佳方法之一是親自動手構建。而且，我們要繼續(xù)保持那些 “距上一個 JavaScript 框架的天數(shù)” 模因的持續(xù)。因此，讓我們來編寫我們自己的現(xiàn)代 JavaScript 框架吧！

什么是“現(xiàn)代 JavaScript 框架”？

React 是一個出色的框架，我不是來貶低它的。但在這篇文章中，“現(xiàn)代 JavaScript 框架”指的是“React 時代后的框架” - 即 Lit、Solid、Svelte、Vue 等。

由于 React 在前端領域占據(jù)主導地位已久，每個更新的框架都在其陰影下成長。這些框架都受到了 React 的很大啟發(fā)，但它們在演進中以出奇的相似方式遠離了 React。盡管 React 本身一直在創(chuàng)新，但我發(fā)現(xiàn)后來的框架在現(xiàn)今更類似于彼此，而不是 React。

為了保持簡單，我還將避免討論像 Astro、Marko 和 Qwik 這樣以服務器為先的框架。這些框架在其自身的領域表現(xiàn)出色，但與以客戶端為重點的框架相比，它們來自稍微不同的思維傳統(tǒng)。因此，在本文中，我們只討論客戶端渲染。

現(xiàn)代框架有哪些特點？

從我的角度來看，React 時代后的框架都集中在相同的基本理念上：

1. 使用響應性（例如 signals）進行 DOM 更新。
2. 使用克隆的模板進行 DOM 渲染。
3. 使用像 <template> 和 Proxy 這樣的現(xiàn)代 Web API，使上述所有工作更容易。

需要明確的是，這些框架在微觀層面上差異很大，它們在處理諸如 Web 組件、編譯和用戶界面 API 等方面的方式也不同。并非所有的框架都使用 Proxy。但總體來說，大多數(shù)框架作者似乎在上述理念上達成了共識，或者正在朝著這個方向發(fā)展。

因此，對于我們自己的框架，讓我們試著實現(xiàn)這些理念的最基本部分，首先從響應性開始。

響應性

人們常說 “?React 不是響應式的”。這意味著 React 具有更多基于拉取而不是推送的模型。簡單來說，在最糟糕的情況下，React 假設整個虛擬 DOM 樹都需要從頭開始重建，防止這些更新的唯一方法是實現(xiàn) React.memo（或在舊時代，shouldComponentUpdate）。

虛擬 DOM 緩解了“摧毀一切，從頭開始”的策略的一些成本，但并未完全解決它。要求開發(fā)人員編寫正確的 memo 代碼是一場失敗的戰(zhàn)斗（請查看 ?React Forget，這是一個持續(xù)嘗試解決此問題的項目）。

相反，現(xiàn)代框架使用了一種推送式的響應模型。在這種模型中，組件樹的各個部分訂閱狀態(tài)更新，并僅在相關狀態(tài)更改時更新 DOM。這更注重“默認情況下高性能”的設計，以換取一些前期記賬（bookkeeping）成本（特別是在內(nèi)存方面），以跟蹤哪些狀態(tài)部分與 UI 的哪些部分相關。

需要注意的是，這種技術不一定與虛擬 DOM 方法不兼容：Preact Signals 和 Million 這樣的工具表明你可以有一個混合系統(tǒng)。如果你的目標是保留現(xiàn)有的虛擬 DOM 框架（例如 React），但對于性能敏感的情況有選擇地應用推送模型，則這是有用的。

在這篇文章中，我不打算詳細討論信號本身的細節(jié)，或者像細粒度響應等更微妙的主題，但我會假設我們將使用一種響應系統(tǒng)。

注意：在討論什么算是 “響應式” 時有很多細微差別。我的目標是在這里對比 React 和 React 時代后的框架，尤其是 Solid、Svelte v5 的“runes”模式和 Vue Vapor。

克隆 DOM 樹

很長一段時間以來，在 JavaScript 框架的共同智慧中，渲染 DOM 的最快方法被認為是逐個創(chuàng)建和掛載每個 DOM 節(jié)點。換句話說，您使用諸如 createElement、setAttribute 和 textContent 這樣的 API 逐步構建 DOM：

const div = document.createElement('div')
div.setAttribute('class', 'blue')
div.textContent = 'Blue!'

另一種選擇是將一個龐大的 HTML 字符串直接插入 innerHTML，讓瀏覽器為您解析它：

const container = document.createElement('div')
container.innerHTML = `
  <div class="blue">Blue!</div>
`

這種天真的方法有一個很大的缺點：如果您的 HTML 中有任何動態(tài)內(nèi)容（例如，紅色而不是藍色），那么您將需要一遍又一遍地解析 HTML 字符串。此外，您會在每次更新時清除 DOM，這將重置諸如 <input> 的值之類的狀態(tài)。

注意：使用 innerHTML 也涉及到 ?安全性問題。但在本文的目的中，讓我們假設 HTML 內(nèi)容是可信任的。

然而，有一天人們發(fā)現(xiàn)，解析一次 HTML，然后對整個內(nèi)容調(diào)用 cloneNode(true) 是相當快的：

const template = document.createElement('template')
template.innerHTML = `
  <div class="blue">Blue!</div>
`
template.content.cloneNode(true) // this is fast!

在這里，我使用了 <template> 標簽，它的優(yōu)勢在于創(chuàng)建 “不活動”（inert）的 DOM。換句話說，諸如 <img> 或 <video autoplay> 這樣的元素不會自動開始下載任何內(nèi)容。

與手動使用 DOM API 相比，這種克隆技術有多快呢？為了演示，這里有一個?小型基準測試。Tachometer 報告稱，在 Chrome 中，克隆技術大約快 50%，在 Firefox 中快 15%，在 Safari 中快 10%（這將根據(jù) DOM 大小和迭代次數(shù)而變化，但您能夠理解主要趨勢）。

有趣的是，<template> 是一個較新的瀏覽器 API，在 IE11 中不可用，最初設計用于 Web 組件。有些諷刺的是，這種技術現(xiàn)在被用于各種 JavaScript 框架，無論它們是否使用 Web 組件。

注：供參考，這里是在 Solid、Vue Vapor 和 Svelte v5 中對 <template> 使用 cloneNode 的方式。

這種技術有一個主要挑戰(zhàn)，即如何在不重置 DOM 狀態(tài)的情況下高效更新動態(tài)內(nèi)容。在構建我們的玩具框架時，我們將在后面詳細介紹這一點。

現(xiàn)代 JavaScript API

我們已經(jīng)接觸到了一個在很大程度上很有幫助的新 API，那就是 <template>。另一個穩(wěn)步獲得關注的是 ?Proxy，它可以使構建響應系統(tǒng)變得更加簡單。

在構建我們的玩具示例時，我們還將使用帶標簽的模板文字（tagged template literals）創(chuàng)建一個像這樣的 API：

const dom = html`
  <div>Hello ${ name }!</div>
`

并非所有的框架都使用這個工具，但一些顯著的框架包括 Lit、HyperHTML 和 ArrowJS。帶標簽的模板文字可以在不需要編譯器的情況下更輕松地構建人體工學的 HTML 模板 API。

步驟 1：構建響應性

響應性是我們將構建框架的基礎。響應性將定義狀態(tài)的管理方式以及在狀態(tài)更改時 DOM 如何更新。

讓我們從一些“夢幻代碼”開始，以說明我們想要的：

const state = {}
 
state.a = 1
state.b = 2
 
createEffect(() => {
  state.sum = state.a + state.b
})

基本上，我們想要一個稱為 state 的“魔術對象”，有兩個屬性：a 和 b。每當這些屬性發(fā)生變化時，我們希望設置 sum 為這兩個屬性的和。

假設我們事先不知道屬性（或者沒有編譯器來確定它們），一個普通的對象將無法滿足這個要求。所以讓我們使用 Proxy，它可以在設置新值時作出反應：

const state = new Proxy({}, {
  get(obj, prop) {
    onGet(prop)
    return obj[prop]
  },
  set(obj, prop, value) {
    obj[prop] = value
    onSet(prop, value)
    return true
  }
})

目前，我們的 Proxy 沒有做任何有趣的事情，只是給我們提供了一些 onGet 和 onSet 鉤子。所以讓我們使其在微任務之后刷新更新：

let queued = false
 
function onSet(prop, value) {
  if (!queued) {
    queued = true
    queueMicrotask(() => {
      queued = false
      flush()
    })
  }
}

注意：如果您對 queueMicrotask 不熟悉，它是一個較新的 DOM API，基本上與 Promise.resolve().then(...) 相同，但輸入更少。

為什么要刷新更新呢？主要是因為我們不希望運行太多的計算。如果我們在 a 和 b 都改變時更新，那么我們將無用地計算兩次和。通過將刷新合并到一個微任務中，我們可以變得更加高效。

接下來，讓我們讓刷新更新 sum：

function flush() {
  state.sum = state.a + state.b
}

這很好，但它還不是我們的“夢幻代碼”。我們需要實現(xiàn) createEffect，以便僅在 a 和 b 更改時計算 sum（而不是在其他地方更改時）。

為此，讓我們使用一個對象來跟蹤哪些效果需要運行哪些屬性：

const propsToEffects = {}

接下來是至關重要的部分！我們需要確保我們的效果可以訂閱正確的屬性。為此，我們將運行效果，記錄它調(diào)用的任何 get 調(diào)用，并創(chuàng)建屬性與效果之間的映射。

為了解釋清楚，記住我們的“夢幻代碼”是：

createEffect(() => {
  state.sum = state.a + state.b
})

當這個函數(shù)運行時，它調(diào)用了兩個 getter：state.a 和 state.b。這些 getter 應該觸發(fā)響應系統(tǒng)注意到該函數(shù)依賴于這兩個屬性。

為了實現(xiàn)這一點，讓我們從一個簡單的全局變量開始，用于跟蹤“當前”效果：

let currentEffect

然后，createEffect 函數(shù)將在調(diào)用函數(shù)之前設置此全局變量：

function createEffect(effect) {
  currentEffect = effect
  effect()
  currentEffect = undefined
}

這里的重要之處在于，效果會立即被調(diào)用，同時全局的 currentEffect 在提前設置。這是我們跟蹤它可能調(diào)用的任何 getter 的方式。

現(xiàn)在，我們可以在我們的 Proxy 中實現(xiàn) onGet，它將設置全局 currentEffect 與屬性之間的映射：

function onGet(prop) {
  const effects = propsToEffects[prop] ??
      (propsToEffects[prop] = [])
  effects.push(currentEffect)
}

運行一次后，propsToEffects 應該如下所示：

{
  "a": [theEffect],
  "b": [theEffect]
}

這里的 theEffect 是我們想要運行的“sum”函數(shù)。

接下來，我們的 onSet 應該將需要運行的任何效果添加到一個 dirtyEffects 數(shù)組中：

const dirtyEffects = []
 
function onSet(prop, value) {
  if (propsToEffects[prop]) {
    dirtyEffects.push(...propsToEffects[prop])
    // ...
  }
}

此時，我們已經(jīng)有了所有的要素，使 flush 調(diào)用所有 dirtyEffects：

function flush() {
  while (dirtyEffects.length) {
    dirtyEffects.shift()()
  }
}

把它們結合在一起，我們現(xiàn)在有了一個完全功能的響應性系統(tǒng)！您可以自己嘗試在 DevTools 控制臺中設置 state.a 和 state.b - 只要其中一個發(fā)生更改，state.sum 就會更新。

現(xiàn)在，有很多高級情況我們在這里沒有涵蓋：

• 在效果拋出錯誤時使用 try/catch
• 避免運行相同的效果兩次
• 防止無限循環(huán)
• 在后續(xù)運行中訂閱效果到新的屬性（例如，如果某些 getter 僅在 if 塊中被調(diào)用）

然而，對于我們的玩具示例來說，這已經(jīng)足夠了。讓我們繼續(xù)進行 DOM 渲染。

步驟 2：DOM 渲染

我們現(xiàn)在有了一個功能完備的響應性系統(tǒng)，但它實質(zhì)上是“無頭”的。它可以跟蹤變化并計算效果，但僅此而已。

然而，在某個時候，我們的 JavaScript 框架實際上需要將一些 DOM 渲染到屏幕上（這其實是整個目的）。

在本節(jié)中，讓我們暫時忘記響應性，想象一下我們只是嘗試構建一個函數(shù)，它能夠 1）構建一個 DOM 樹，和 2）高效地更新它。

再次，讓我們從一些“夢幻代碼”開始：

function render(state) {
  return html`
    <div class="${state.color}">${state.text}</div>
  `
}

正如我提到的，我正在使用帶標簽的模板文字，就像 Lit 一樣，因為我發(fā)現(xiàn)它們是一種在不需要編譯器的情況下編寫 HTML 模板的好方法。（我們馬上會看到為什么我們實際上可能希望使用編譯器。）

我們從之前復用了我們的 state 對象，這次有一個 color 和 text 屬性。也許 state 是這樣的：

state.color = 'blue'
state.text = 'Blue!'

當我們將這個 state 傳遞給 render 時，它應該返回應用了 state 的 DOM 樹：

<div class="blue">Blue!</div>

然而，在我們繼續(xù)之前，我們需要簡要了解一下帶標簽的模板文字。我們的 html 標簽只是一個接收兩個參數(shù)的函數(shù)：tokens（靜態(tài) HTML 字符串的數(shù)組）和 expressions（評估的動態(tài)表達式）：

function html(tokens, ...expressions) {
}

在這種情況下，tokens 是（去掉空白）：

[
  "<div class=\"",
  "\">",
  "</div>"
]

和 expressions：

[
  "blue",
  "Blue!"
]

tokens 數(shù)組的長度始終比 expressions 數(shù)組長 1，因此我們可以簡單地將它們一起進行壓縮：

const allTokens = tokens
    .map((token, i) => (expressions[i - 1] ?? '') + token)

這將給我們一個字符串數(shù)組：

[
  "<div class=\"",
  "blue\">",
  "Blue!</div>"
]

我們可以將這些字符串連接在一起以生成我們的 HTML：

const htmlString = allTokens.join('');

然后，我們可以使用 innerHTML 將其解析為 <template>：

function parseTemplate(htmlString) {
  const template = document.createElement('template');
  template.innerHTML = htmlString;
  return template;
}

這個模板包含了我們的惰性 DOM（在技術上是 DocumentFragment），我們可以隨時克隆它：

const cloned = template.content.cloneNode(true);

當然，每次調(diào)用 html 函數(shù)時都解析完整的 HTML 對性能來說不是很好。幸運的是，帶標簽的模板文字具有一個內(nèi)建特性，將在這里非常有幫助。

對于帶標簽的模板文字的每個獨特用法，每當調(diào)用該函數(shù)時，tokens 數(shù)組始終相同 - 實際上，它是相同的對象！

例如，考慮這種情況：

function sayHello(name) {
  return html`<div>Hello ${name}</div>`;
}

每當調(diào)用 sayHello 時，tokens 數(shù)組將始終相同：

[
  "<div>Hello ",
  "</div>"
]

tokens 的唯一不同之處是對帶標簽模板的完全不同位置：

html`<div></div>`
html`<span></span>` // 與上述不同

我們可以利用這一點，通過使用 WeakMap 將 tokens 數(shù)組映射到生成的模板：

const tokensToTemplate = new WeakMap();

function html(tokens, ...expressions) {
  let template = tokensToTemplate.get(tokens);
  if (!template) {
    // ...
    template = parseTemplate(htmlString);
    tokensToTemplate.set(tokens, template);
  }
  return template;
}

這有點令人驚嘆的概念，但 tokens 數(shù)組的唯一性實際上意味著我們可以確保每次對 html 進行調(diào)用時只解析一次 HTML。

接下來，我們只需要一種方法來使用 expressions 數(shù)組（與 tokens 不同，它可能在每次調(diào)用時都不同）更新克隆的 DOM 節(jié)點。

為了簡單起見，讓我們只是用占位符替換 expressions 數(shù)組中的每個索引：

const stubs = expressions.map((_, i) => `__stub-${i}__`);

如果我們像以前一樣將其壓縮，它將創(chuàng)建這個 HTML：

<div class="__stub-0__">
  __stub-1__
</div>

我們可以編寫一個簡單的字符串替換函數(shù)來替換這些占位符：

function replaceStubs(string) {
  return string.replaceAll(/__stub-(\d+)__/g, (_, i) => (
    expressions[i]
  ));
}

現(xiàn)在每當調(diào)用 html 函數(shù)時，我們可以克隆模板并更新占位符：

const element = cloned.firstElementChild;
for (const { name, value } of element.attributes) {
  element.setAttribute(name, replaceStubs(value));
}
element.textContent = replaceStubs(element.textContent);

注意：我們使用 firstElementChild 來獲取模板中的第一個頂級元素。對于我們的玩具框架，我們假設只有一個。

現(xiàn)在，這仍然不是非常高效的 - 特別是，我們正在更新不一定需要更新的 textContent 和屬性。但對于我們的玩具框架來說，這已經(jīng)足夠好了。

我們可以通過使用不同的 state 進行渲染來測試它：

document.body.appendChild(render({ color: 'blue', text: 'Blue!' }));
document.body.appendChild(render({ color: 'red', text: 'Red!' }));

這樣就可以了！

步驟 3：結合響應性和 DOM 渲染

由于我們已經(jīng)有了上面渲染系統(tǒng)中的 createEffect，現(xiàn)在我們可以將兩者結合起來根據(jù)狀態(tài)更新 DOM：

const container = document.getElementById('container');
 
createEffect(() => {
  const dom = render(state);
  if (container.firstElementChild) {
    container.firstElementChild.replaceWith(dom);
  } else {
    container.appendChild(dom);
  }
});

這實際上是有效的！我們可以將這個與響應性部分的 “sum” 示例結合起來，只需創(chuàng)建另一個效果來設置文本：

createEffect(() => {
  state.text = `Sum is: ${state.sum}`;
});

這將呈現(xiàn) “Sum is 3”：

你可以嘗試操作這個玩具示例。如果你設置 state.a = 5，那么文本將自動更新為 “Sum is 7”。

下一步

有許多改進我們可以對這個系統(tǒng)進行，特別是 DOM 渲染部分。

最值得注意的是，我們?nèi)鄙僖环N更新深度 DOM 樹內(nèi)元素內(nèi)容的方法，例如：

<div class="${color}">
  <span>${text}</span>
</div>

為此，我們需要一種方法來唯一標識模板內(nèi)的每個元素。有很多方法可以做到這一點：

1. Lit 在解析 HTML 時使用一套正則表達式和字符匹配的系統(tǒng)，以確定占位符是否在屬性或文本內(nèi)容中，以及目標元素的索引（按深度優(yōu)先 TreeWalker 順序）。
2. Svelte 和 Solid 等框架在編譯期間有幸解析整個 HTML 模板，這提供了相同的信息。它們還生成調(diào)用 firstChild 和 nextSibling 遍歷 DOM 的代碼，以找到要更新的元素。

注意：使用 firstChild 和 nextSibling 進行遍歷類似于 TreeWalker 方法，但比 element.children 更高效。這是因為瀏覽器在內(nèi)部使用鏈表來表示 DOM。

無論我們決定采用 Lit 風格的客戶端解析還是 Svelte/Solid 風格的編譯時解析，我們想要的是類似于這樣的映射：

[
  {
    elementIndex: 0, // 上面的 <div>
    attributeName: 'class',
    stubIndex: 0 // 表達式數(shù)組中的索引
  },
  {
    elementIndex: 1 // 上面的 <span>
    textContent: true,
    stubIndex: 1 // 表達式數(shù)組中的索引
  }
]

這些綁定將告訴我們確切需要更新哪些元素，需要設置哪個屬性（或 textContent），以及在哪里找到替換占位符的表達式。

下一步是避免每次都克隆模板，而是直接基于表達式更新 DOM。換句話說，我們不僅想要一次解析 - 我們只想一次克隆和設置綁定。這將將每個后續(xù)更新減少到最少的 setAttribute 和 textContent 調(diào)用。

注意：你可能會想知道模板克隆的目的是什么，如果我們最終還是需要調(diào)用 setAttribute 和 textContent。答案是，大多數(shù) HTML 模板在很大程度上都是靜態(tài)內(nèi)容，只有一些動態(tài)的“孔”。通過使用模板克隆，我們克隆了絕大多數(shù)的 DOM，只對“孔”做額外的工作。這是使這個系統(tǒng)如此出色的關鍵洞察。

另一個有趣的模式是實現(xiàn)迭代（或重復器），這帶來了一系列的挑戰(zhàn)，比如在更新之間協(xié)調(diào)列表以及處理有效替換的“鍵”。

不過我有點疲倦，這篇博文已經(jīng)夠長了。所以我把剩下的部分留給讀者自己來完成吧！

結論

就是這樣。在這篇（冗長的）博文中，我們實現(xiàn)了自己的 JavaScript 框架。請隨意將其用作你全新 JavaScript 框架的基礎，發(fā)布到世界上，激怒 Hacker News 的群眾。

個人而言，我發(fā)現(xiàn)這個項目非常有教育意義，這也是我一開始為什么要做的一部分。我還希望用一個更小、更自定義的解決方案替換我的表情符號選擇器組件的當前框架。在這個過程中，我成功地編寫了一個微小的框架，通過所有現(xiàn)有的測試，并比當前實現(xiàn)小約 6kB，我對此感到相當自豪。

在將來，我認為如果瀏覽器 API 足夠全面，將更容易構建自定義框架將會很有趣。例如，DOM Part API 提案將消除我們上面構建的 DOM 解析和替換系統(tǒng)的很多繁瑣工作，同時也為潛在的瀏覽器性能優(yōu)化敞開了大門。我還可以想象（帶有一些瘋狂的手勢）Proxy 的擴展可能會使構建完整的響應性系統(tǒng)變得更容易，而不用擔心刷新、批處理或循環(huán)檢測等細節(jié)。

如果所有這些東西都到位，那么你可以想象在實際上擁有一個“在瀏覽器中的 Lit”，或者至少一種快速構建你自己“在瀏覽器中的 Lit”的方法。與此同時，我希望這個小練習有助于說明一些框架作者考慮的事情，以及你最喜歡的 JavaScript 框架底層的一些機制。

感謝 Pierre-Marie Dartus 在這篇文章初稿中提供的反饋。

原文：?https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/