摘要:精讀你可以先自己嘗試閱讀,源碼加上注釋一共行源碼。是個抽象概念,它負責將實體語法樹解析為。討論地址是精讀源碼如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。前端精讀幫你篩選靠譜的內容。
1 引言
htm 是 preact 作者的新嘗試,利用原生 HTML 規范支持了類 JSX 的寫法。
2 概要htm 沒有特別的文檔,假如你用過 JSX,那只需要記住下面三個不同點:
className -> class。
標簽引號可選(回歸 html 規范): 支持 HTML 模式的注釋:。 用法也沒什么特別的地方,你可以利用 HTML 原生規范,用直覺去寫 JSX: 很顯然,由于跳過了 JSX 編譯,換成了原生的 Template Strings ,所以所有組件、屬性部分都需要改成 ${} 語法,比如: <${Header}> 這種寫法略顯別扭,但整體上還是蠻直觀的。 你不一定非要用在項目環境中,但當你看到這種語法時,內心一定情不自禁的 WoW,竟然還有這種寫法! 下面將帶你一起分析 htm 的源碼,看看作者是如何做到的。 你可以先自己嘗試閱讀,源碼加上注釋一共 90 行:源碼。 好了,歡迎繼續閱讀。 首先你要認識到, htm + vhtml 才等于你上面看到的 DEMO。 Htm 是一個 dom template 解析器,它可以將任何 dom template 解析成一顆語法樹,而這個語法樹的結構是: 我們看一個 demo: 那具體是怎么做語法解析的呢? 其實實現方式有點像腦經急轉彎,畢竟解析 dom template 是瀏覽器引擎做的事,規范也早已定了下來,有了規范和實現,當然沒必要重復造輪子,辦法就是利用 HTML 的 AST 生成我們需要的 AST。 首先創建一個 template 元素: 再裝輸入的 dom template 字符串塞入(作者通過正則,機智的將自己支持的額外語法先轉化為標準語法,再交給 HTML 引擎): 最后我們會發現進入了 walk 函數,通過 localName 拿到標簽名;attributes 拿到屬性值,通過 firstChild 與 nextSibling 遍歷子元素繼續走 walk,最后 tag props children 三劍客就生成了。 可能你還沒看完,就已經結束了。筆者分析這個庫,除了告訴你作者的機智思路,還想告訴你的是,站在巨人的肩膀造輪子,真的事半功倍。 VDom 是個抽象概念,它負責將實體語法樹解析為 DOM。這個工具可以是 preact、vhtml,或者由你自己來實現。 當然,你也可以利用這個 AST 生成 JSON,比如: 讀到這,你覺得還有哪些 “VDom” 可以寫呢?其實任何可以根據 tag props children 推導出的結構都可以寫成解析插件。 htm 是一個教科書般借力造論子案例: 利用 innerHTML 會自動生成的標準 AST,解析出符合自己規范的 AST,這其實是進一步抽象 AST。 利用原有庫進行 DOM 解析,比如 preact 或 vhtml。 基于第二點,所以可以生成任何目標代碼,比如 json,pdf,excel 等等。 不過這也帶來了一個問題:依賴原生 DOM API 會導致無法運行在 NodeJS 環境。 想一想你現在開發的工具庫,有沒有可以借力的地方呢?有哪些點可以通過借力做得更好從而實現雙贏呢?歡迎留下你的思考。 如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。前端精讀 - 幫你篩選靠譜的內容。 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。 轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99677.html另外支持了可選結束標簽、快捷組件 End 標簽,不過這些自己發明的語法不建議記憶。
html`
${todos.map(
todo => html`
<${Footer}>footer content here/>
interface VDom {
tag: string;
props: {
[attrKey: string]: string;
};
chindren: VDom[];
}
function h(tag, props, ...children) {
return { tag, props, children };
}
const html = htm.bind(h);
html`
const TEMPLATE = document.createElement("template");
TEMPLATE.innerHTML = str;
import htm from "htm";
import jsxobj from "jsxobj";
const html = htm.bind(jsxobj);
console.log(html`
討論地址是:精讀《Htm - Hyperscript 源碼》 · Issue #114 · dt-fe/weekly
摘要:但是,我還是覺得這是一個非常不錯的話題測試代碼生成。,用于創建虛擬樹的。,用于修改的內容。而第二個則是文本的變化從變成了。我們所要做的測試生成便是標記這些變化,并記錄之。其他源碼見原文基于與的測試代碼生成 盡管是在年末,并且也還沒把書翻譯完,也還沒寫完書的第一稿。但是,我還是覺得這是一個非常不錯的話題——測試代碼生成。 當我們在寫一些UI測試的時候,我們總需要到瀏覽器去看一下一些DOM...
摘要:會自動觸發函數內回調函數的執行。因此利用并將依賴置為使代碼在所有渲染周期內,只在初始化執行一次。同時代碼里還對等公共方法進行了包裝,讓這些回調函數中自帶效果。前端精讀幫你篩選靠譜的內容。 1. 引言 react-easy-state 是個比較有趣的庫,利用 Proxy 創建了一個非常易用的全局數據流管理方式。 import React from react; import { stor...
摘要:引言本周精讀的源碼是這個庫。這個庫的目的是為了實現的依賴注入。精讀那么開始源碼的解析,首先是整體思路的分析。討論地址是精讀源碼如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。前端精讀幫你篩選靠譜的內容。 1. 引言 本周精讀的源碼是 inject-instance 這個庫。 這個庫的目的是為了實現 Class 的依賴注入。 比如我們通過 inject 描述一個成員變量,...
摘要:引言是一個版語法解析器生成器,具有分詞語法樹解析的能力。實現函數用鏈表設計函數是最佳的選擇,我們要模擬調用棧了。但光標所在的位置是期望輸入點,這個輸入點也應該參與語法樹的生成,而錯誤提示不包含光標,所以我們要執行兩次。 1. 引言 syntax-parser 是一個 JS 版語法解析器生成器,具有分詞、語法樹解析的能力。 通過兩個例子介紹它的功能。 第一個例子是創建一個詞法解析器 my...
閱讀 3228·2021-11-15 11:37
閱讀 2449·2021-09-29 09:48
閱讀 3814·2021-09-22 15:55
閱讀 3014·2021-09-22 10:02
閱讀 2636·2021-08-25 09:40
閱讀 3225·2021-08-03 14:03
閱讀 1691·2019-08-29 13:11
閱讀 1570·2019-08-29 12:49