[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 後 , 就可以

---今晚跟朋友吃饭 , 待处理

参考资料

• vue学习—Convert HTML string to AST，如何将html字串转换为ast阵列结构
• Vue learning – Convert HTML string to AST, how to convert HTML string to ast array structure
• vue学习—Convert HTML string to AST，如何将html字符串转换为ast数组结构
• html-parse-stringify
• 聊一聊 Javascript 中的 AST