vue2模版编译-对剩余html字符串处理 和start函数的写法

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情

对模板开始标签的属性处理的文章 已经把开始标签处理完了，拿到了处理后的结果，请看图片，

我们后面要对这个数据进行处理了生成部分AST树

>{{name}}</h2>
        <ul>
            <li>{{age}}</li>
            <li>{{info.waek}}</li>
        </ul>
  </div>

对上面剩余字符串的处理

   let text = '';
   let root, currentParent,stack;
  // 我们需要循环字符串
   while(html) { // 截取完了我们就可以结束了
     let textEnd = html.indexOf('<') // 找到了说明时第一项，没找到说明不是
     if (textEnd==0) {// 找到了
        // 交给开始函数去做
        const startTagMatch = parseStartTag()
        // 有可能有匹配到 有可能没有
        if (startTagMatch) {
           // start方法
           // tagName是div attrs是标签属性
           start(startTagMatch.tagName,startTagMatch.attrs) // 开始标签 专用处理函数
        }
     }
     // 开始标签处理了完了 开始判断结束标签了
      const endTagMatch = html.match(endTag) // 正则判断
      if (endTagMatch) { // 如果有结束标签 需要调用结束标签函数
        console.log(endTagMatch)    
       // 删除结束标签
       advance(endTagMatch[0].length)
       end(endTagMatch[1]); // 对结束标签 处理函数
       continue
     }
     // 判断是否是文字
     if (textEnd>0) { // 你好</div> 这种的html字符串的判断
      text = html.substring(0,textEnd) // 截取文字
     } 
     if (text) { // 如果text存在就需要删除
       advance(text.length) // 剪裁
       chars(text) // 处理文字标签
     }
   }
   // 上面的这些逻辑基本上就把html字符串全部处理完了 我们需要处理他们的调用函数了
   function start(tagName,attrs) { // 这是对处理开始标签的数据数据函数
     // 我们要开始创建AST树了 用 createASTElement方法
     const element = createASTElement(tagName,attrs)
     console.log(element)
     // 可以看下我们打印处理的数据
   }
   function end(tagname) {} 
   function chars(text) {} 
   function createASTElement(tagName, attrs) { // 创建元素AST树
    // 这个个就是返回一个对象
    return {
      tag: tagName,
      type: 1,
      attrs: attrs,
      children: [],
      parent
    }
  }

图片就是我们处理开始标签生成的AST树，并不完整，后面我们也会继续完善

对模板开始标签的属性处理的文章 和这篇文章主要是介绍循环字符串模板来处理标签和属性的方法，使用正则表达式，使用match方法，来匹配我们标签、属性、文字，来进行分别处理，这边文章是介绍使用的正则的vue模版解析正则使用就html模版前标签处理