天貓精靈Sound Pro體驗：智能音箱沒有音質？來聽聽我的
這幾年除了手機作為智能生活終端最主要的核心之外，第二個可以成為中心點的產品是什么？——是智能音箱。 手機在執行命令的時候有兩種操作方式，手和智能語音助手，而智能音箱只
在我的日常工作中，我致力于一個 JavaScript 框架（LWC）。盡管我已經在這個項目上工作了將近三年，但我仍然覺得自己是一個業余愛好者。當我閱讀有關更大的框架世界的信息時，常常因為不了解的事情太多而感到不知所措。
然而，學習事物的最佳方法之一是親自動手構建。而且，我們要繼續保持那些 “距上一個 JavaScript 框架的天數” 模因的持續。因此，讓我們來編寫我們自己的現代 JavaScript 框架吧！
React 是一個出色的框架，我不是來貶低它的。但在這篇文章中，“現代 JavaScript 框架”指的是“React 時代后的框架” - 即 Lit、Solid、Svelte、Vue 等。
由于 React 在前端領域占據主導地位已久，每個更新的框架都在其陰影下成長。這些框架都受到了 React 的很大啟發，但它們在演進中以出奇的相似方式遠離了 React。盡管 React 本身一直在創新，但我發現后來的框架在現今更類似于彼此，而不是 React。
為了保持簡單，我還將避免討論像 Astro、Marko 和 Qwik 這樣以服務器為先的框架。這些框架在其自身的領域表現出色，但與以客戶端為重點的框架相比，它們來自稍微不同的思維傳統。因此，在本文中，我們只討論客戶端渲染。
從我的角度來看，React 時代后的框架都集中在相同的基本理念上：
需要明確的是，這些框架在微觀層面上差異很大，它們在處理諸如 Web 組件、編譯和用戶界面 API 等方面的方式也不同。并非所有的框架都使用 Proxy。但總體來說，大多數框架作者似乎在上述理念上達成了共識，或者正在朝著這個方向發展。
因此，對于我們自己的框架，讓我們試著實現這些理念的最基本部分，首先從響應性開始。
人們常說 “?React 不是響應式的”。這意味著 React 具有更多基于拉取而不是推送的模型。簡單來說，在最糟糕的情況下，React 假設整個虛擬 DOM 樹都需要從頭開始重建，防止這些更新的唯一方法是實現 React.memo（或在舊時代，shouldComponentUpdate）。
虛擬 DOM 緩解了“摧毀一切，從頭開始”的策略的一些成本，但并未完全解決它。要求開發人員編寫正確的 memo 代碼是一場失敗的戰斗（請查看 ?React Forget，這是一個持續嘗試解決此問題的項目）。
相反，現代框架使用了一種推送式的響應模型。在這種模型中，組件樹的各個部分訂閱狀態更新，并僅在相關狀態更改時更新 DOM。這更注重“默認情況下高性能”的設計，以換取一些前期記賬（bookkeeping）成本（特別是在內存方面），以跟蹤哪些狀態部分與 UI 的哪些部分相關。
需要注意的是，這種技術不一定與虛擬 DOM 方法不兼容：Preact Signals 和 Million 這樣的工具表明你可以有一個混合系統。如果你的目標是保留現有的虛擬 DOM 框架（例如 React），但對于性能敏感的情況有選擇地應用推送模型，則這是有用的。
在這篇文章中，我不打算詳細討論信號本身的細節，或者像細粒度響應等更微妙的主題，但我會假設我們將使用一種響應系統。
注意：在討論什么算是 “響應式” 時有很多細微差別。我的目標是在這里對比 React 和 React 時代后的框架，尤其是 Solid、Svelte v5 的“runes”模式和 Vue Vapor。
很長一段時間以來，在 JavaScript 框架的共同智慧中，渲染 DOM 的最快方法被認為是逐個創建和掛載每個 DOM 節點。換句話說，您使用諸如 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 中有任何動態內容（例如，紅色而不是藍色），那么您將需要一遍又一遍地解析 HTML 字符串。此外，您會在每次更新時清除 DOM，這將重置諸如 <input> 的值之類的狀態。
注意：使用 innerHTML 也涉及到 ?安全性問題。但在本文的目的中，讓我們假設 HTML 內容是可信任的。
然而，有一天人們發現，解析一次 HTML，然后對整個內容調用 cloneNode(true) 是相當快的：
const template = document.createElement('template')template.innerHTML = ` <div class="blue">Blue!</div>`template.content.cloneNode(true) // this is fast!在這里，我使用了 <template> 標簽，它的優勢在于創建 “不活動”（inert）的 DOM。換句話說，諸如 <img> 或 <video autoplay> 這樣的元素不會自動開始下載任何內容。
與手動使用 DOM API 相比，這種克隆技術有多快呢？為了演示，這里有一個?小型基準測試。Tachometer 報告稱，在 Chrome 中，克隆技術大約快 50%，在 Firefox 中快 15%，在 Safari 中快 10%（這將根據 DOM 大小和迭代次數而變化，但您能夠理解主要趨勢）。
有趣的是，<template> 是一個較新的瀏覽器 API，在 IE11 中不可用，最初設計用于 Web 組件。有些諷刺的是，這種技術現在被用于各種 JavaScript 框架，無論它們是否使用 Web 組件。
注：供參考，這里是在 Solid、Vue Vapor 和 Svelte v5 中對 <template> 使用 cloneNode 的方式。
這種技術有一個主要挑戰，即如何在不重置 DOM 狀態的情況下高效更新動態內容。在構建我們的玩具框架時，我們將在后面詳細介紹這一點。
我們已經接觸到了一個在很大程度上很有幫助的新 API，那就是 <template>。另一個穩步獲得關注的是 ?Proxy，它可以使構建響應系統變得更加簡單。
在構建我們的玩具示例時，我們還將使用帶標簽的模板文字（tagged template literals）創建一個像這樣的 API：
const dom = html` <div>Hello ${ name }!</div>`并非所有的框架都使用這個工具，但一些顯著的框架包括 Lit、HyperHTML 和 ArrowJS。帶標簽的模板文字可以在不需要編譯器的情況下更輕松地構建人體工學的 HTML 模板 API。
響應性是我們將構建框架的基礎。響應性將定義狀態的管理方式以及在狀態更改時 DOM 如何更新。
讓我們從一些“夢幻代碼”開始，以說明我們想要的：
const state = {} state.a = 1state.b = 2 createEffect(() => { state.sum = state.a + state.b})基本上，我們想要一個稱為 state 的“魔術對象”，有兩個屬性：a 和 b。每當這些屬性發生變化時，我們希望設置 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}這很好，但它還不是我們的“夢幻代碼”。我們需要實現 createEffect，以便僅在 a 和 b 更改時計算 sum（而不是在其他地方更改時）。
為此，讓我們使用一個對象來跟蹤哪些效果需要運行哪些屬性：
const propsToEffects = {}接下來是至關重要的部分！我們需要確保我們的效果可以訂閱正確的屬性。為此，我們將運行效果，記錄它調用的任何 get 調用，并創建屬性與效果之間的映射。
為了解釋清楚，記住我們的“夢幻代碼”是：
createEffect(() => { state.sum = state.a + state.b})當這個函數運行時，它調用了兩個 getter：state.a 和 state.b。這些 getter 應該觸發響應系統注意到該函數依賴于這兩個屬性。
為了實現這一點，讓我們從一個簡單的全局變量開始，用于跟蹤“當前”效果：
let currentEffect然后，createEffect 函數將在調用函數之前設置此全局變量：
function createEffect(effect) { currentEffect = effect effect() currentEffect = undefined}這里的重要之處在于，效果會立即被調用，同時全局的 currentEffect 在提前設置。這是我們跟蹤它可能調用的任何 getter 的方式。
現在，我們可以在我們的 Proxy 中實現 onGet，它將設置全局 currentEffect 與屬性之間的映射：
function onGet(prop) { const effects = propsToEffects[prop] ?? (propsToEffects[prop] = []) effects.push(currentEffect)}運行一次后，propsToEffects 應該如下所示：
{ "a": [theEffect], "b": [theEffect]}這里的 theEffect 是我們想要運行的“sum”函數。
接下來，我們的 onSet 應該將需要運行的任何效果添加到一個 dirtyEffects 數組中：
const dirtyEffects = [] function onSet(prop, value) { if (propsToEffects[prop]) { dirtyEffects.push(...propsToEffects[prop]) // ... }}此時，我們已經有了所有的要素，使 flush 調用所有 dirtyEffects：
function flush() { while (dirtyEffects.length) { dirtyEffects.shift()() }}把它們結合在一起，我們現在有了一個完全功能的響應性系統！您可以自己嘗試在 DevTools 控制臺中設置 state.a 和 state.b - 只要其中一個發生更改，state.sum 就會更新。
現在，有很多高級情況我們在這里沒有涵蓋：
然而，對于我們的玩具示例來說，這已經足夠了。讓我們繼續進行 DOM 渲染。
我們現在有了一個功能完備的響應性系統，但它實質上是“無頭”的。它可以跟蹤變化并計算效果，但僅此而已。
然而，在某個時候，我們的 JavaScript 框架實際上需要將一些 DOM 渲染到屏幕上（這其實是整個目的）。
在本節中，讓我們暫時忘記響應性，想象一下我們只是嘗試構建一個函數，它能夠 1）構建一個 DOM 樹，和 2）高效地更新它。
再次，讓我們從一些“夢幻代碼”開始：
function render(state) { return html` <div class="${state.color}">${state.text}</div> `}正如我提到的，我正在使用帶標簽的模板文字，就像 Lit 一樣，因為我發現它們是一種在不需要編譯器的情況下編寫 HTML 模板的好方法。（我們馬上會看到為什么我們實際上可能希望使用編譯器。）
我們從之前復用了我們的 state 對象，這次有一個 color 和 text 屬性。也許 state 是這樣的：
state.color = 'blue'state.text = 'Blue!'當我們將這個 state 傳遞給 render 時，它應該返回應用了 state 的 DOM 樹：
<div class="blue">Blue!</div>然而，在我們繼續之前，我們需要簡要了解一下帶標簽的模板文字。我們的 html 標簽只是一個接收兩個參數的函數：tokens（靜態 HTML 字符串的數組）和 expressions（評估的動態表達式）：
function html(tokens, ...expressions) {}在這種情況下，tokens 是（去掉空白）：
[ "<div class=/"", "/">", "</div>"]和 expressions：
[ "blue", "Blue!"]tokens 數組的長度始終比 expressions 數組長 1，因此我們可以簡單地將它們一起進行壓縮：
const allTokens = tokens .map((token, i) => (expressions[i - 1] ?? '') + token)這將給我們一個字符串數組：
[ "<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);當然，每次調用 html 函數時都解析完整的 HTML 對性能來說不是很好。幸運的是，帶標簽的模板文字具有一個內建特性，將在這里非常有幫助。
對于帶標簽的模板文字的每個獨特用法，每當調用該函數時，tokens 數組始終相同 - 實際上，它是相同的對象！
例如，考慮這種情況：
function sayHello(name) { return html`<div>Hello ${name}</div>`;}每當調用 sayHello 時，tokens 數組將始終相同：
[ "<div>Hello ", "</div>"]tokens 的唯一不同之處是對帶標簽模板的完全不同位置：
html`<div></div>`html`<span></span>` // 與上述不同我們可以利用這一點，通過使用 WeakMap 將 tokens 數組映射到生成的模板：
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 數組的唯一性實際上意味著我們可以確保每次對 html 進行調用時只解析一次 HTML。
接下來，我們只需要一種方法來使用 expressions 數組（與 tokens 不同，它可能在每次調用時都不同）更新克隆的 DOM 節點。
為了簡單起見，讓我們只是用占位符替換 expressions 數組中的每個索引：
const stubs = expressions.map((_, i) => `__stub-${i}__`);如果我們像以前一樣將其壓縮，它將創建這個 HTML：
<div class="__stub-0__"> __stub-1__</div>我們可以編寫一個簡單的字符串替換函數來替換這些占位符：
function replaceStubs(string) { return string.replaceAll(/__stub-(/d+)__/g, (_, i) => ( expressions[i] ));}現在每當調用 html 函數時，我們可以克隆模板并更新占位符：
const element = cloned.firstElementChild;for (const { name, value } of element.attributes) { element.setAttribute(name, replaceStubs(value));}element.textContent = replaceStubs(element.textContent);注意：我們使用 firstElementChild 來獲取模板中的第一個頂級元素。對于我們的玩具框架，我們假設只有一個。
現在，這仍然不是非常高效的 - 特別是，我們正在更新不一定需要更新的 textContent 和屬性。但對于我們的玩具框架來說，這已經足夠好了。
我們可以通過使用不同的 state 進行渲染來測試它：
document.body.appendChild(render({ color: 'blue', text: 'Blue!' }));document.body.appendChild(render({ color: 'red', text: 'Red!' }));這樣就可以了！
由于我們已經有了上面渲染系統中的 createEffect，現在我們可以將兩者結合起來根據狀態更新 DOM：
const container = document.getElementById('container'); createEffect(() => { const dom = render(state); if (container.firstElementChild) { container.firstElementChild.replaceWith(dom); } else { container.appendChild(dom); }});這實際上是有效的！我們可以將這個與響應性部分的 “sum” 示例結合起來，只需創建另一個效果來設置文本：
createEffect(() => { state.text = `Sum is: ${state.sum}`;});這將呈現 “Sum is 3”：
你可以嘗試操作這個玩具示例。如果你設置 state.a = 5，那么文本將自動更新為 “Sum is 7”。
有許多改進我們可以對這個系統進行，特別是 DOM 渲染部分。
最值得注意的是，我們缺少一種更新深度 DOM 樹內元素內容的方法，例如：
<div class="${color}"> <span>${text}</span></div>為此，我們需要一種方法來唯一標識模板內的每個元素。有很多方法可以做到這一點：
注意：使用 firstChild 和 nextSibling 進行遍歷類似于 TreeWalker 方法，但比 element.children 更高效。這是因為瀏覽器在內部使用鏈表來表示 DOM。
無論我們決定采用 Lit 風格的客戶端解析還是 Svelte/Solid 風格的編譯時解析，我們想要的是類似于這樣的映射：
[ { elementIndex: 0, // 上面的 <div> attributeName: 'class', stubIndex: 0 // 表達式數組中的索引 }, { elementIndex: 1 // 上面的 <span> textContent: true, stubIndex: 1 // 表達式數組中的索引 }]這些綁定將告訴我們確切需要更新哪些元素，需要設置哪個屬性（或 textContent），以及在哪里找到替換占位符的表達式。
下一步是避免每次都克隆模板，而是直接基于表達式更新 DOM。換句話說，我們不僅想要一次解析 - 我們只想一次克隆和設置綁定。這將將每個后續更新減少到最少的 setAttribute 和 textContent 調用。
注意：你可能會想知道模板克隆的目的是什么，如果我們最終還是需要調用 setAttribute 和 textContent。答案是，大多數 HTML 模板在很大程度上都是靜態內容，只有一些動態的“孔”。通過使用模板克隆，我們克隆了絕大多數的 DOM，只對“孔”做額外的工作。這是使這個系統如此出色的關鍵洞察。
另一個有趣的模式是實現迭代（或重復器），這帶來了一系列的挑戰，比如在更新之間協調列表以及處理有效替換的“鍵”。
不過我有點疲倦，這篇博文已經夠長了。所以我把剩下的部分留給讀者自己來完成吧！
就是這樣。在這篇（冗長的）博文中，我們實現了自己的 JavaScript 框架。請隨意將其用作你全新 JavaScript 框架的基礎，發布到世界上，激怒 Hacker News 的群眾。
個人而言，我發現這個項目非常有教育意義，這也是我一開始為什么要做的一部分。我還希望用一個更小、更自定義的解決方案替換我的表情符號選擇器組件的當前框架。在這個過程中，我成功地編寫了一個微小的框架，通過所有現有的測試，并比當前實現小約 6kB，我對此感到相當自豪。
在將來，我認為如果瀏覽器 API 足夠全面，將更容易構建自定義框架將會很有趣。例如，DOM Part API 提案將消除我們上面構建的 DOM 解析和替換系統的很多繁瑣工作，同時也為潛在的瀏覽器性能優化敞開了大門。我還可以想象（帶有一些瘋狂的手勢）Proxy 的擴展可能會使構建完整的響應性系統變得更容易，而不用擔心刷新、批處理或循環檢測等細節。
如果所有這些東西都到位，那么你可以想象在實際上擁有一個“在瀏覽器中的 Lit”，或者至少一種快速構建你自己“在瀏覽器中的 Lit”的方法。與此同時，我希望這個小練習有助于說明一些框架作者考慮的事情，以及你最喜歡的 JavaScript 框架底層的一些機制。
感謝 Pierre-Marie Dartus 在這篇文章初稿中提供的反饋。
原文：?https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/
本文鏈接：http://www.tebozhan.com/showinfo-26-48363-0.html讓我們通過構建一個現代 JavaScript 框架來學習它是如何工作的
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 真實還原面試過程，被問懵了
下一篇： 圖解系統設計之Instagram
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號