Vue 2源码解析ParseHTML函数HTML模板

 更新时间:2022年08月15日 11:04:15   作者:MiyueFE  
这篇文章主要为大家介绍了Vue 2源码解析ParseHTML函数HTML模板详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

ParseHTML函数 - HTML 模板解析

之前在解析 parse 函数时,我们知道整个 解析 template 模板并生成 ast 对象 的过程都发生在这个函数的执行过程中。

但是 parse 函数内部本身只定义了一些标签、指令的处理方法和警告函数,并且在传递给 parseHTML 函数的参数中定义了四个处理方法。

最终是通过调用 parseHTML 来解析 template 模板

整个解析过程,其实就是 通过一系列正则表达式来匹配 template 模板字符串,并截取该部分匹配内容并重新匹配剩余部分,直到全部匹配完成。

所有的正则表达式包含以下内容:

const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/  // 静态属性解析
const dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // 动态属性解析(含有 v-xxx:, :, @, # 的属性)
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`)   // 开始标签部分
const startTagClose = /^\s*(\/?)>/                     // 开始标签结束
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)// 结束标签部分
const doctype = /^<!DOCTYPE [^>]+>/i                   // DOCTYPE 声明
const comment = /^<!\--/                               // 注释部分
const conditionalComment = /^<!\[/                     // 条件注释

parseHTML 的简要代码如下:

export function parseHTML(html, options: HTMLParserOptions) {
  const stack: any[] = []
  const expectHTML = options.expectHTML
  const isUnaryTag = options.isUnaryTag || no
  const canBeLeftOpenTag = options.canBeLeftOpenTag || no
  let index = 0
  let last, lastTag
  while (html) {
    last = html
    if (!lastTag || !isPlainTextElement(lastTag)) {
      let textEnd = html.indexOf('<')
      if (textEnd === 0) {
        if (comment.test(html)) {
          // 处理 注释
          advance()
          continue
        }
        if (conditionalComment.test(html)) {
          // 处理 条件注释
          advance()
          continue
        }
        // Doctype:
        if (html.match(doctype)) {
          advance()
          continue
        }
        // 结束:
        if (html.match(endTag)) {
          advance()
          parseEndTag()
          continue
        }
        // 开始:
        if (parseStartTag()) {
          advance()
          handleStartTag()
          continue
        }
      }
      // 处理纯文本
      options.chars()
      advance()
    } else {
      // 结束
      parseEndTag()
    }
    if (html === last) {
      options.chars && options.chars(html)
      break
    }
  }
  parseEndTag()
  function advance(n) {
  }
  function parseStartTag() {
  }
  function handleStartTag(match) {
  }
  function parseEndTag(tagName?: any, start?: any, end?: any) {
  }
}

其中定义了三个标签处理方法和一个定位方法:

  • advance 方法是更新当前解析到的文本位置 index,并截取掉已解析的部分
  • parseStartTag 方法用来解析标签的开始部分,内部会生成一个包含标签名 tagName 和属性数组 attrs 的对象 math,并循环解析内部的字符串直到解析完整个字符串,将解析到的属性存放到 attrs 数组中
  • handleStartTag 则是处理 parseStartTag 得到的 math 对象(大部分是处理每个属性),如果上面解析到是非闭合标签的话,也会将这个 math 对象修改成一个新对象插入到 parseHTML 执行时定义的 stack 元素栈中;当然,如果是自闭合标签,还会调用 parseEndTag 方法处理;并在 最后调用 options 中定义的 start 函数来生成 ast 对象
  • parseEndTag 方法就用来处理标签结束后的逻辑,会根据条件清除 stack 栈中的元素;如果此时元素标签是 br 或者 p,也会调用 option.start(),其他情况下一般会调用 options.end() 来结束当前标签的解析

总的来说,parseHTML 就是通过正则表达式来匹配不同的标签和属性,进行不同的标签/属性处理,最后通过 options 中的回调函数来创建完整的 ast 对象;并用 stack 元素栈的方式来保证原始 template 模板与 ast 对象的层级结构的一致性。

以上就是Vue 2源码解析ParseHTML函数HTML模板的详细内容,更多关于Vue ParseHTML函数模板的资料请关注脚本之家其它相关文章!

相关文章

  • 详解Vue微信公众号开发踩坑全记录

    详解Vue微信公众号开发踩坑全记录

    本篇文章主要介绍了详解Vue微信公众号开发踩坑全记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue3兄弟组件传值之mitt的超详细讲解

    Vue3兄弟组件传值之mitt的超详细讲解

    之前只是浅显的使用插件进行vue开发展示,最近深入的研究了下,下面这篇文章主要给大家介绍了关于Vue3兄弟组件传值之mitt的超详细讲解,需要的朋友可以参考下
    2022-06-06
  • vue.js实现刷新当前页面的方法教程

    vue.js实现刷新当前页面的方法教程

    这篇文章主要给大家介绍了关于vue.js实现刷新当前页面的方法教程,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • vue实现lodop打印功能的示例

    vue实现lodop打印功能的示例

    这篇文章主要介绍了vue实现lodop打印功能的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • 富文本编辑器quill.js 开发之自定义插件示例详解

    富文本编辑器quill.js 开发之自定义插件示例详解

    这篇文章主要为大家介绍了富文本编辑器quill.js 开发之自定义插件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

    element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

    这篇文章主要介绍了element日历calendar组件上月、今天、下月、日历块点击事件及模板源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue.js数据绑定的方法(单向、双向和一次性绑定)

    vue.js数据绑定的方法(单向、双向和一次性绑定)

    本篇文章主要介绍了vue.js数据绑定的方法(单向、双向和一次性绑定),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue的基本用法与常见指令

    vue的基本用法与常见指令

    Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令,感兴趣的朋友一起看看吧
    2017-08-08
  • 全面解析vue router 基本使用(动态路由,嵌套路由)

    全面解析vue router 基本使用(动态路由,嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。这篇文章主要介绍了vue router 基本使用 ,需要的朋友可以参考下
    2018-09-09
  • Vue + Element 实现按钮指定间隔时间点击思路详解

    Vue + Element 实现按钮指定间隔时间点击思路详解

    这篇文章主要介绍了Vue + Element 实现按钮指定间隔时间点击,实现思路大概是通过加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮,具体实现代码跟随小编一起看看吧
    2023-12-12

最新评论