代码细节

缓存代理函数

export function cached
    
      (fn: F): F {  const cache = Object.create(null)  return (function cachedFn (str: string) {    const hit = cache[str]    return hit || (cache[str] = fn(str))  }: any)}
    

vue源码里面大量使用的一个缓存代理函数。缓存参数执行结果，如果下次是同一个参数来调用函数，将返回上次产生的结果，而不是再次调用函数。

获取元素的outHTML

/** * Get outerHTML of elements, taking care * of SVG elements in IE as well. */function getOuterHTML (el: Element): string {  if (el.outerHTML) {    return el.outerHTML  } else {    const container = document.createElement('div')    container.appendChild(el.cloneNode(true))    return container.innerHTML  }}

考虑ie下面的svg无法获取outHTML（undefined），转为获取innerHTML

过滤器模板解析函数

const validDivisionCharRE = /[\w).+\-_$\]]/export function parseFilters (exp: string): string {  let inSingle = false  let inDouble = false  let inTemplateString = false  let inRegex = false  let curly = 0  let square = 0  let paren = 0  let lastFilterIndex = 0  let c, prev, i, expression, filters  for (i = 0; i < exp.length; i++) {    prev = c    c = exp.charCodeAt(i)    // 0x5C => \    if (inSingle) {      if (c === 0x27 && prev !== 0x5C) inSingle = false    } else if (inDouble) {      if (c === 0x22 && prev !== 0x5C) inDouble = false    } else if (inTemplateString) {      if (c === 0x60 && prev !== 0x5C) inTemplateString = false    } else if (inRegex) {      if (c === 0x2f && prev !== 0x5C) inRegex = false    } else if (      c === 0x7C && // |      exp.charCodeAt(i + 1) !== 0x7C &&      exp.charCodeAt(i - 1) !== 0x7C &&      !curly && !square && !paren    ) {      if (expression === undefined) {        // first filter, end of expression        lastFilterIndex = i + 1        expression = exp.slice(0, i).trim()      } else {        pushFilter()      }    } else {      switch (c) {        case 0x22: inDouble = true; break         // "        case 0x27: inSingle = true; break         // '        case 0x60: inTemplateString = true; break // `        case 0x28: paren++; break                 // (        case 0x29: paren--; break                 // )        case 0x5B: square++; break                // [        case 0x5D: square--; break                // ]        case 0x7B: curly++; break                 // {        case 0x7D: curly--; break                 // }      }      if (c === 0x2f) { // /        let j = i - 1        let p        // find first non-whitespace prev char        for (; j >= 0; j--) {          p = exp.charAt(j)          if (p !== ' ') break        }        if (!p || !validDivisionCharRE.test(p)) {          inRegex = true        }      }    }  }  if (expression === undefined) {    expression = exp.slice(0, i).trim()  } else if (lastFilterIndex !== 0) {    pushFilter()  }  function pushFilter () {    (filters || (filters = [])).push(exp.slice(lastFilterIndex, i).trim())    lastFilterIndex = i + 1  }  if (filters) {    for (i = 0; i < filters.length; i++) {      expression = wrapFilter(expression, filters[i])    }  }  return expression}function wrapFilter (exp: string, filter: string): string {  const i = filter.indexOf('(')  if (i < 0) {    // _f: resolveFilter    return `_f("${filter}")(${exp})`  } else {    const name = filter.slice(0, i)    const args = filter.slice(i + 1)    return `_f("${name}")(${exp}${args !== ')' ? ',' + args : args}`  }}

vue有一个api叫做filters，我们可以用它来格式化我们的变量，用法类似：

    {
   { message | capitalize }}
    
    

由“管道”符号分割，表达式为管道符最前面的一项，后面跟随若干过滤器函数。

{
   {input | filter1 | filter2 }} 解析为：_f("filter2")(_f("filter1")(input))

如何分割过滤器呢，从函数中可以看到，在任何封闭符号的表达式后面，如果出现管道符'|'则将之前的字符串视为一个过滤器或者表达式。封闭符号则包括引号、括号、模板符号以及正则表达式，除正则表达式之外的符号判断都很简单，直接匹配响应符号的Unicode就行。但是正则表达式需要特殊处理：当匹配到第一个非封闭的'/'符号时，要校验它之前的第一个非空字符。采用正则表达式来匹配这一规则：

/[\w).+\-_$\]]/ // 匹配任意[A-Za-z0-9_] ) . + - _ $ ]