学习vue2.5源码之第六篇——compiler中的parser

开始之前

本篇讲述的是compiler的第一步——parse，就是将模板template转化为AST的这一步，在开始之前先做一些准备工作，方便等一下我们学习的时候可以参考

首先是上一篇提到的在web平台上的baseOptions，我们再次拿出来，因为里面的属性可能会在之后的内容多次出现。

{
  expectHTML: true, // 是否期望HTML，不知道是啥反正web中的是true
  modules, // klass和style，对模板中类和样式的解析
  directives, // v-model、v-html、v-text
  isPreTag, // v-pre标签
  isUnaryTag, // 单标签，比如img、input、iframe
  mustUseProp, // 需要使用props绑定的属性，比如value、selected等
  canBeLeftOpenTag, // 可以不闭合的标签，比如tr、td等
  isReservedTag, // 是否是保留标签，html标签和SVG标签
  getTagNamespace, // 命名空间，svg和math
  staticKeys: genStaticKeys(modules) // staticClass,staticStyle。
}

然后我们这部分主要学习src/compiler/parser/index.js ， src/compiler/parser/html-parser.js 和 src/compiler/parser/text-parser.js，里面有一些正则表达式我们先提前在这里展示一下，方便我们之后的学习~ emmm。。。其实我一看到正则就晕，但是还是坚持把它翻译完了，假如有错误之处请及时指出，谢谢~

src/compiler/parser/index.js

// @和v-on 事件绑定
const onRE = /^@|^v-on:/

// v-xxx, @, : 事件/数据绑定
const dirRE = /^v-|^@|^:/

// v-for 中的属性值，如 (item, index) of items
const forAliasRE = /(.*?)\s+(?:in|of)\s+(.*)/

// v-for 中的前部分，如 (item, index)
const forIteratorRE = /\((\{[^}]*\}|[^,]*),([^,]*)(?:,([^,]*))?\)/

// : 绑定属性
const argRE = /:(.*)$/

// 以:或者v-bind: 开头的属性  
const bindRE = /^:|^v-bind:/

// .修饰符
const modifierRE = /\.[^.]+/g

src/compiler/parser/html-parser.js

// 标准命名规范
const ncname = '[a-zA-Z_][\\w\\-\\.]*'

// 捕获整体内容
const qnameCapture = `((?:${ncname}\\:)?${ncname})`

// 开始标签开头
const startTagOpen = new RegExp(`^<${qnameCapture}`)

// 开始标签结尾
const startTagClose = /^\s*(\/?)>/

// 结束标签
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)

// DOCTYPE
const doctype = /^]+>/i

// 注释 ，从‘-->’后开始读取
if (comment.test(html)) {
    const commentEnd = html.indexOf('-->')

    if (commentEnd >= 0) {
    if (options.shouldKeepComment) {
        options.comment(html.substring(4, commentEnd))
    }
    // 3 是 ‘-->’的长度
    advance(commentEnd + 3)
    continue
    }
}

// 过滤注释的内容
if (conditionalComment.test(html)) {
    const conditionalEnd = html.indexOf(']>')

    if (conditionalEnd >= 0) {
    advance(conditionalEnd + 2)
    continue
    }
}

// 过滤Doctype:
const doctypeMatch = html.match(doctype)
if (doctypeMatch) {
    advance(doctypeMatch[0].length)
    continue
}

// 结束标签处理
const endTagMatch = html.match(endTag)
if (endTagMatch) {
    const curIndex = index
    advance(endTagMatch[0].length)
    parseEndTag(endTagMatch[1], curIndex, index)
    continue
}

// 开始标签处理
const startTagMatch = parseStartTag()
if (startTagMatch) {
    // 处理startTagMatch
    handleStartTag(startTagMatch)
    if (shouldIgnoreFirstNewline(lastTag, html)) {
    advance(1)
    }
    continue
}

这段函数主要是过滤作用，对注释和Doctype进行过滤，endTagMatch的判断到后面再讲，接着是startTagMatch，我们看看函数parseStartTag

  function parseStartTag () {
    const start = html.match(startTagOpen)
    if (start) {
      const match = {
        tagName: start[1],
        attrs: [],
        start: index
      }
      advance(start[0].length)
      let end, attr
      while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
        advance(attr[0].length)
        match.attrs.push(attr)
      }
      if (end) {
        match.unarySlash = end[1]
        advance(end[0].length)
        match.end = index
        return match
      }
    }
  }

一开始我们讲到了正则startTagOpen是开始标签的开头，我们匹配到了div标签，接着是定义了一个变量match，我们输出一下看看结果：

match = {
    tagName: "div",
    attrs: [" class='div'", "class", "=", undefined, "div", undefined, index: 0, input: " class='div'>↵                我是最普通的<文本>↵         …   这是我的链接↵

function handleStartTag (match) { const tagName = match.tagName const unarySlash = match.unarySlash if (expectHTML) { if (lastTag === 'p' && isNonPhrasingTag(tagName)) { parseEndTag(lastTag) } if (canBeLeftOpenTag(tagName) && lastTag === tagName) { parseEndTag(tagName) } } const unary = isUnaryTag(tagName) || !!unarySlash const l = match.attrs.length const attrs = new Array(l) for (let i = 0; i < l; i++) { const args = match.attrs[i] if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('""') === -1) { if (args[3] === '') { delete args[3] } if (args[4] === '') { delete args[4] } if (args[5] === '') { delete args[5] } } const value = args[3] || args[4] || args[5] || '' const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href' ? options.shouldDecodeNewlinesForHref : options.shouldDecodeNewlines attrs[i] = { name: args[1], value: decodeAttr(value, shouldDecodeNewlines) } } if (!unary) { stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs }) lastTag = tagName } if (options.start) { options.start(tagName, attrs, unary, match.start, match.end) } }

{ type: 1, // type = 1 为dom节点 tag, // 标签名 attrsList: attrs, // 属性数组 attrsMap: makeAttrsMap(attrs), // 属性映射 parent, // 父节点 children: [] // 子节点节点 }

// 出栈 end () { // 取出stack中的最后一个元素 const element = stack[stack.length - 1] // 取出该元素的最后一个子元素 const lastNode = element.children[element.children.length - 1] // 如果最后一个子元素是纯文本' '则删除，这是因为我们的模板一般都会缩进，都会有换行，所以这里是清除换行等添加的内容 if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) { element.children.pop() } // stack长度减一 stack.length -= 1 // currentParent变为栈中最后一个元素 currentParent = stack[stack.length - 1] // 处理v-pre或pre的结束标签 endPre(element) },

chars (text: string) { const children = currentParent.children text = inPre || text.trim() ? isTextTag(currentParent) ? text : decodeHTMLCached(text) : preserveWhitespace && children.length ? ' ' : '' if (text) { let expression if (!inVPre && text !== ' ' && (expression = parseText(text, delimiters))) { children.push({ type: 2, expression, text }) } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') { children.push({ type: 3, text }) } } }

export function parseText ( text: string, delimiters?: [string, string] ): string | void { // 分隔符正则 const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE if (!tagRE.test(text)) { return } const tokens = [] let lastIndex = tagRE.lastIndex = 0 let match, index while ((match = tagRE.exec(text))) { index = match.index // 存入文本 if (index > lastIndex) { tokens.push(JSON.stringify(text.slice(lastIndex, index))) } // 存入解析文本以 _s(xxxx) 的形式 const exp = parseFilters(match[1].trim()) tokens.push(`_s(${exp})`) lastIndex = index + match[0].length } // 存入尾部文本 if (lastIndex < text.length) { tokens.push(JSON.stringify(text.slice(lastIndex))) } // 用 + 拼接所有文本 return tokens.join('+') }

学习vue2.5源码之第六篇——compiler中的parser

开始之前

src/compiler/parser/index.js

src/compiler/parser/html-parser.js

你可能感兴趣的:(学习vue2.5源码之第六篇——compiler中的parser)