vue2中template 转换成 ast 过程简介

这篇文章主要简单介绍 template 转换成 ast 的过程,也就是 vue 中 parse 的过程。

假设 template 模版为

const template = ` {{count}} addCount`

首先要了解一下 html parser,vue 中的 parseHTML 是从 simplehtmlparser 修改来的,simplehtmlparser 代码链接:http://erik.eae.net/simplehtmlparser/simplehtmlparser.js

parseHTML 过程其实就是从前向后的字符串匹配过程。html parser 的主要思想如下,从前向后匹配出 html 标签名称、属性、文本节点内容、注释等等,触发对应的回调函数,其中 s 是输入的字符串模版,contentHandler 是匹配到内容后执行的回调函数。

function parseHTML(s, contentHandler) { while (s.length > 0) { // Comment if (s.substring(0, 4) == " index = s.indexOf("-->"); if (index != -1) { contentHandler.comment(s.substring(4, index)); s = s.substring(index + 3); treatAsChars = false; } else { treatAsChars = true; } } // end tag else if (s.substring(0, 2) == " contentHandler.end(sTagName); } // start tag else if (s.charAt(0) == " var attrs = parseAttributes(sTagName, sRest); contentHandler.start(sTagName, attrs); } if (treatAsChars) { index = s.indexOf(" if (index == -1) { contentHandler.chars(s); s = ""; } else { contentHandler.chars(s.substring(0, index)); s = s.substring(index); } } }}

我们将刚才的模版输入到这个函数中

const handler = { start: function (sTagName, oAttrs) { console.log('start', sTagName, oAttrs) }, end: function (sTagName) { console.log('end', sTagName) }, chars: function (s) { console.log('chars', s) }, comment: function (s) { console.log('comment', s) }};parseHTML(template, handler);

这样就可以按顺序匹配到开始标签、标签属性、元素中文本节点、结束标签。

start div []chars

start div [ { name: 'style', value: 'color: red' } ]chars {{count}}end divchars

start button [ { name: '@click', value: 'addCount' } ]chars addCountend buttonchars

end div

最后如何生成 AST,就是一道栈相关的算法题啦,大家可以自己尝试一下。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200613A0SF3500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券