成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

精讀《Htm - Hyperscript 源碼》

li21 / 2580人閱讀

摘要：精讀你可以先自己嘗試閱讀，源碼加上注釋一共行源碼。是個抽象概念，它負(fù)責(zé)將實(shí)體語法樹解析為。討論地址是精讀源碼如果你想?yún)⑴c討論，請點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀幫你篩選靠譜的內(nèi)容。

1 引言

htm 是 preact 作者的新嘗試，利用原生 HTML 規(guī)范支持了類 JSX 的寫法。

2 概要

htm 沒有特別的文檔，假如你用過 JSX，那只需要記住下面三個不同點(diǎn)：

className -> class。

標(biāo)簽引號可選（回歸 html 規(guī)范）：

。

支持 HTML 模式的注釋：

。

另外支持了可選結(jié)束標(biāo)簽、快捷組件 End 標(biāo)簽，不過這些自己發(fā)明的語法不建議記憶。

用法也沒什么特別的地方，你可以利用 HTML 原生規(guī)范，用直覺去寫 JSX：

html`
  

    <${Header} name="ToDo"s (${page})" />
    
    
      ${todos.map(
        todo => html`
          
  • ${todo}
    • 
        `
      )}
    

    
    <${Footer}>footer content here
  

`;

很顯然，由于跳過了 JSX 編譯，換成了原生的 Template Strings ，所以所有組件、屬性部分都需要改成 ${} 語法，比如：

<${Header}> 這種寫法略顯別扭，但整體上還是蠻直觀的。

你不一定非要用在項(xiàng)目環(huán)境中，但當(dāng)你看到這種語法時，內(nèi)心一定情不自禁的 WoW，竟然還有這種寫法！

下面將帶你一起分析 htm 的源碼，看看作者是如何做到的。

3 精讀

你可以先自己嘗試閱讀，源碼加上注釋一共 90 行：源碼。

好了，歡迎繼續(xù)閱讀。

首先你要認(rèn)識到， htm + vhtml 才等于你上面看到的 DEMO。

Htm

Htm 是一個 dom template 解析器，它可以將任何 dom template 解析成一顆語法樹，而這個語法樹的結(jié)構(gòu)是：

interface VDom {
  tag: string;
  props: {
    [attrKey: string]: string;
  };
  chindren: VDom[];
}

我們看一個 demo：

function h(tag, props, ...children) {
  return { tag, props, children };
}

const html = htm.bind(h);

html`
  
123

`; // { tag: "div", props: {}, children: ["123"] }

那具體是怎么做語法解析的呢？

其實(shí)實(shí)現(xiàn)方式有點(diǎn)像腦經(jīng)急轉(zhuǎn)彎，畢竟解析 dom template 是瀏覽器引擎做的事，規(guī)范也早已定了下來，有了規(guī)范和實(shí)現(xiàn)，當(dāng)然沒必要重復(fù)造輪子，辦法就是利用 HTML 的 AST 生成我們需要的 AST。

首先創(chuàng)建一個 template 元素：

const TEMPLATE = document.createElement("template");

再裝輸入的 dom template 字符串塞入（作者通過正則，機(jī)智的將自己支持的額外語法先轉(zhuǎn)化為標(biāo)準(zhǔn)語法，再交給 HTML 引擎）：

TEMPLATE.innerHTML = str;

最后我們會發(fā)現(xiàn)進(jìn)入了 walk 函數(shù)，通過 localName 拿到標(biāo)簽名；attributes 拿到屬性值，通過 firstChild 與 nextSibling 遍歷子元素繼續(xù)走 walk，最后 tag props children 三劍客就生成了。

可能你還沒看完，就已經(jīng)結(jié)束了。筆者分析這個庫，除了告訴你作者的機(jī)智思路，還想告訴你的是，站在巨人的肩膀造輪子，真的事半功倍。

VDom

VDom 是個抽象概念，它負(fù)責(zé)將實(shí)體語法樹解析為 DOM。這個工具可以是 preact、vhtml，或者由你自己來實(shí)現(xiàn)。

當(dāng)然，你也可以利用這個 AST 生成 JSON，比如：

import htm from "htm";
import jsxobj from "jsxobj";

const html = htm.bind(jsxobj);

console.log(html`
  
    
  
`);
// {
//   watch: true,
//   mode: "production",
//   entry: {
//     path: "src/index.js"
//   }
// }

讀到這，你覺得還有哪些 “VDom” 可以寫呢？其實(shí)任何可以根據(jù) tag props children 推導(dǎo)出的結(jié)構(gòu)都可以寫成解析插件。

4 總結(jié)

htm 是一個教科書般借力造論子案例：

利用 innerHTML 會自動生成的標(biāo)準(zhǔn) AST，解析出符合自己規(guī)范的 AST，這其實(shí)是進(jìn)一步抽象 AST。

利用原有庫進(jìn)行 DOM 解析，比如 preact 或 vhtml。

基于第二點(diǎn)，所以可以生成任何目標(biāo)代碼，比如 json，pdf，excel 等等。

不過這也帶來了一個問題：依賴原生 DOM API 會導(dǎo)致無法運(yùn)行在 NodeJS 環(huán)境。

想一想你現(xiàn)在開發(fā)的工具庫，有沒有可以借力的地方呢？有哪些點(diǎn)可以通過借力做得更好從而實(shí)現(xiàn)雙贏呢？歡迎留下你的思考。

討論地址是：精讀《Htm - Hyperscript 源碼》 · Issue #114 · dt-fe/weekly

如果你想?yún)⑴c討論，請點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀 - 幫你篩選靠譜的內(nèi)容。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99677.html

相關(guān)文章

  • 精讀《源碼學(xué)習(xí)》

    摘要：精讀原文介紹了學(xué)習(xí)源碼的兩個技巧，并利用實(shí)例說明了源碼學(xué)習(xí)過程中可以學(xué)到許多周邊知識，都讓我們受益匪淺。討論地址是精讀源碼學(xué)習(xí)如果你想?yún)⑴c討論，請點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。 1. 引言 javascript-knowledge-reading-source-code 這篇文章介紹了閱讀源碼的重要性，精讀系列也已有八期源碼系列文章，分別是： 精讀《Immer.js》源...

    aboutU 評論0 收藏0

  • 基于Virtual DOM與Diff DOM的測試代碼生成

    摘要：但是，我還是覺得這是一個非常不錯的話題測試代碼生成。，用于創(chuàng)建虛擬樹的。，用于修改的內(nèi)容。而第二個則是文本的變化從變成了。我們所要做的測試生成便是標(biāo)記這些變化，并記錄之。其他源碼見原文基于與的測試代碼生成 盡管是在年末，并且也還沒把書翻譯完，也還沒寫完書的第一稿。但是，我還是覺得這是一個非常不錯的話題——測試代碼生成。 當(dāng)我們在寫一些UI測試的時候，我們總需要到瀏覽器去看一下一些DOM...

    CoXie 評論0 收藏0

  • 精讀《react-easy-state 源碼》

    摘要：會自動觸發(fā)函數(shù)內(nèi)回調(diào)函數(shù)的執(zhí)行。因此利用并將依賴置為使代碼在所有渲染周期內(nèi)，只在初始化執(zhí)行一次。同時代碼里還對等公共方法進(jìn)行了包裝，讓這些回調(diào)函數(shù)中自帶效果。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 react-easy-state 是個比較有趣的庫，利用 Proxy 創(chuàng)建了一個非常易用的全局?jǐn)?shù)據(jù)流管理方式。 import React from react; import { stor...

    curlyCheng 評論0 收藏0

  • 精讀《Inject Instance 源碼》

    摘要：引言本周精讀的源碼是這個庫。這個庫的目的是為了實(shí)現(xiàn)的依賴注入。精讀那么開始源碼的解析，首先是整體思路的分析。討論地址是精讀源碼如果你想?yún)⑴c討論，請點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 本周精讀的源碼是 inject-instance 這個庫。 這個庫的目的是為了實(shí)現(xiàn) Class 的依賴注入。 比如我們通過 inject 描述一個成員變量，...

    hsluoyz 評論0 收藏0

  • 精讀《syntax-parser 源碼》

    摘要：引言是一個版語法解析器生成器，具有分詞語法樹解析的能力。實(shí)現(xiàn)函數(shù)用鏈表設(shè)計函數(shù)是最佳的選擇，我們要模擬調(diào)用棧了。但光標(biāo)所在的位置是期望輸入點(diǎn)，這個輸入點(diǎn)也應(yīng)該參與語法樹的生成，而錯誤提示不包含光標(biāo)，所以我們要執(zhí)行兩次。 1. 引言 syntax-parser 是一個 JS 版語法解析器生成器，具有分詞、語法樹解析的能力。 通過兩個例子介紹它的功能。 第一個例子是創(chuàng)建一個詞法解析器 my...

    yuanxin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<