类vue将template转为vnode的流程

  • 类vue将template转vnode全流程,模板为

    <div id="abc"><p class="www">{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div>
    • 核心函数parseStartTag(起始标签处理函数,得到tagName,匹配attrs得到key,value)执行完毕后调用parseHTML函数中填写的options.start,设置根元素,父级元素,并储存当前element于stack数组中,方便结束标签函数执行时的取出处理
    • 核心函数parseText(文本处理函数,得到{{}}之中的内容msg)判断条件是未能匹配<符号时,执行options.chars将当前元素如p的element设置children为匹配到text的element
    • 核心函数parseEndTag(结束标签处理函数)判断最后一个元素是否与当前的闭合标签tagname匹配,匹配的话执行options.end将之前stack数组中储存的上一个标签移动到前一个标签的子类并在stack数组中删除他
    • 核心函数advance,推进索引,将已经匹配过的标签或属性从模板中剔除
    • 全文主要以parse执行parseHTML,parse传入两个参数,template模板,options(start:判断起始标签,将得到的elemnt格式化为标准模式,end:判断结束标签,将父级向上一层滚动,chars将{{}}内容截取)
    • 起始标签的匹配细节

      <div id="abc">
      • 1.判断是否以<为开始,第一个标签必然是,那么进入parseStartTag处理起始标签内容,startTagOpen正则进行匹配得到标签名<div或div,记录此标签的起始位置0,tagName为匹配得到的[1]div
      • advance将index向前推进<div个数目并且删除模板的<div以进行下一步正则匹配
      • 若此时匹配不到起始标签的闭合符号“>”,且能够匹配到属性如id=“abc”,那么将index继续向前推id=“abc”的长度,删除模板中id属性,循环操作直到匹配得到起始标签的闭合符号,index再推进>符号的长度,模板删除>后,记录此时为起始标签的结束位置
      • 此时我们匹配得到的元素还不够规范,长这样⏬,需要进行修改
      {tagName: "div", attrs: 0: [" id="abc"", "id", "=", "abc", undefined, undefined, index: 0, input: " id="abc"><p class="www">{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div>", groups: undefined], start: 0, end: 14}
      • handleStartTag方法判断是否为单标签,若不是即将格式化后的对象塞入数组stack中这里面没有start,end.只有{id:”abc”}和标签名,将lastTag设置为当前格式化完毕的标签
      attrsMap:{id: "abc"}
      children:[]
      parent:undefined
      tag:"div"
      type:1
      • 最后进行parse的options.start处理,将第一个标签设置为CurrentParent,同时设为根元素,这样第一个标签<div id=”abc”>就处理完毕
    • 子元素标签的匹配

      • 由于模板还没遍历完毕,继续执行parseHTML,此时模板

        html = "<p class="www">{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div>"
      • 匹配到p的起始标签继续执行新的一轮起始标签的匹配,区别在于此时需要设置currentParent即上一次遍历得到的div标签处理后的element的children数组属性加入当前p标签处理后的element,再将currentParent赋值为当前element,并且stack中塞入element,方便以后取出
    • 文本匹配

      • 此时模板为如下,不再匹配<起始标签符号,
        html = "{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div>"
      • 设置var text = (void 0), rest = (void 0), next = (void 0);除了防止被重写外,还可以减少字节。void 0代替undefined省3个字节。
      • html.substring(0, >标签所在位置)截取得到{{msg}}, html.slice(>标签所在位置)截取得到剩余的模板,将索引向前推进{{msg}}长度,获取剩余模板
      • 此后执行parse的options.chars方法处理text,parseText处理文本塞入tokens数组中得到tokens = [“_s(msg)”],currentParent的children加入type为2标记为文本标签
      {type: 2, expression: "_s(msg)+_s(msg)", text: "{{msg}}"}
    • 闭合标签匹配

      • 匹配完毕将index推进</p>个长度,获取剩余模板,执行parseEndTag
      • parseEndTag通过stack找到最近一个元素的标签,如果存在执行options.end方法处理,将stack最后一个元素进行pre元素处理TODO:
      • 处理完该闭合标签后将stack长度减一并把currentParent指向最后一位,即闭合标签的父级,因为此时最高级div标签的elemnet的children已经完成了p标签的导入

        {attrs:[{…}]
        attrsList:[{…}]
        attrsMap:{id: "abc"}
        children:Array(1)0:{type: 1, tag: "p", attrsList: Array(1), attrsMap: {…}, parent: {…}, …}
        parent:undefined
        tag:"div"
        type:1}

        参考文献:Vue源码解析之Template转化为AST
        仓库:https://github.com/eeeeeeeaso…

    原文作者:eason
    原文地址: https://segmentfault.com/a/1190000015735317
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞