iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

Web Component 網頁元件之路系列 第 20

[Day20] - Vue 的 Html 字串處理 ( Html String to Ast Object )

day-13 介紹 , 當資料改變時 , 我們可以利用 _render 來更新 dom

可是如果每次資料改變時 , 都需要 rootDiv.innerHTML 來重新設定整個 dom ,

當 Vue component 很多層時 , 資料一有變化 , 就需要等很久 ,

因此我們需要有 Virtual Dom ( Ast Object ) 用於比對變化 ,

再針對變化的部分 , 去更新對應的 element 即可 , 這樣在 render 時 , 也許可以加快速度

那在開始之前 , 我們先更深入了解一下 Html Element 吧 !

Html Element 的類型

Html Element 目前有 6 種類型

  • void elements : 沒有 end tag 的元素 ( ex : <input> . <br> ... )
  • template element : <template> 用於放一些 HTML template , 不顯示在畫面中
  • raw text elements : 在 HTML 檔案中 , 處理 JS . CSS 部分的元素 ( <script> . <style> )
  • escapable raw text elements : textarea, title
  • foreign elements : MathML namespace and the SVG namespace
  • normal elements : 上述以外的 element

建立轉換函式 parse

所有的 HTML 結構的開頭都是 <xxx> 而且結尾都是 </xxx>

我們可以利用這個來解析 HTML string

var tagRE = /<[a-zA-Z\-\!\/](?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*>/g

抓出 tag name 後 , 就可以

---今晚跟朋友吃飯 , 待處理

參考資料


上一篇
[Day19] - 打包 Element-UI 的 Vue Component to Web Component
下一篇
[Day21] - 製作 Web component 的一些工具
系列文
Web Component 網頁元件之路30

尚未有邦友留言

立即登入留言