Vue源码解析之Template转化为AST的实现方法

本文探讨Vue框架中template转化为AST的过程。在Vue的挂载阶段,template被编译成抽象语法树(AST),然后转换为render函数生成VNode。通过解析源码,提取关键步骤,包括parse方法、parseHTML、parseStartTag、handleStartTag、parseEndTag等,阐述如何将HTML模板转换为AST,并构建虚拟DOM树。
摘要由CSDN通过智能技术生成

什么是AST

在Vue的mount过程中,template会被编译成AST语法树,AST是指抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式。

Virtual Dom

Vue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。
Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点)
本文通过对源码中AST转化部分进行简单提取,因为源码中转化过程还需要进行各种兼容判断,非常复杂,所以笔者对主要功能代码进行提取,用了300-400行代码完成对template转化为AST这个功能。下面用具体代码进行分析。

function parse(template) {
   var currentParent;  //当前父节点
   var root;      //最终返回出去的AST树根节点
   var stack = [];
   parseHTML(template, {
     start: function start(tag, attrs, unary) {
       ......
     },
     end: function end() {
      ......
     },
     chars: function chars(text) {
       ......
     }
   })
   return root
 }

第一步就是调用parse这个方法,把template传进来,这里假设template为

{ {message}}

然后声明3个变量
currentParent -> 存放当前父元素,root -> 最终返回出去的AST树根节点,stack -> 一个栈用来辅助树的建立
接着调用parseHTML函数进行转化,传入template和options(包含3个方法 start,end,chars 等下用到这3个函数再进行解释)接下来先看parseHTML这个方法

function parseHTML(html, options) {
    var stack = [];  //这里和上面的parse函数一样用到stack这个数组 不过这里的stack只是为了简单存放标签名 为了和结束标签进行匹配的作用
    var isUnaryTag$$1 = isUnaryTag;  //判断是否为自闭合标签
    var index = 0;
    var last;
    while (html) {
      //  第一次进入while循环时,由于字符串以<开头,所以进入startTag条件,并进行AST转换,最后将对象弹入stack数组中
      last = html;
      var textEnd = html.indexOf('<');
      if (textEnd === 0) {   // 此时字符串是不是以<开头
        // End tag:
        var endTagMatch = html.match(endTag);
        if (endTagMatch) {
          var curIndex = index;
          advance(endTagMatch[0].length);
          parseEndTag(endTagMatch[1], curIndex, index);
          continue
        }
 
        // Start tag:  // 匹配起始标签
        var startTagMatch = parseStartTag();  //处理后得到match
        if (startTagMatch) {
          handleStartTag(startTagMatch);
          co
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值