摘要：但是正則表達(dá)式需要特殊處理當(dāng)匹配到第一個(gè)非封閉的符號(hào)時(shí)，要校驗(yàn)它之前的第一個(gè)非空字符。采用正則表達(dá)式來匹配這一規(guī)則匹配任意

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源碼里面大量使用的一個(gè)緩存代理函數(shù)。緩存參數(shù)執(zhí)行結(jié)果，如果下次是同一個(gè)參數(shù)來調(diào)用函數(shù)，將返回上次產(chǎn)生的結(jié)果，而不是再次調(diào)用函數(shù)。

/**
 * 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），轉(zhuǎn)為獲取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有一個(gè)api叫做filters，我們可以用它來格式化我們的變量，用法類似：

{{ message | capitalize }}


 

由“管道”符號(hào)分割，表達(dá)式為管道符最前面的一項(xiàng)，后面跟隨若干過濾器函數(shù)。

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

如何分割過濾器呢，從函數(shù)中可以看到，在任何封閉符號(hào)的表達(dá)式后面，如果出現(xiàn)管道符"|"則將之前的字符串視為一個(gè)過濾器或者表達(dá)式。封閉符號(hào)則包括引號(hào)、括號(hào)、模板符號(hào)以及正則表達(dá)式，除正則表達(dá)式之外的符號(hào)判斷都很簡(jiǎn)單，直接匹配響應(yīng)符號(hào)的Unicode就行。但是正則表達(dá)式需要特殊處理：當(dāng)匹配到第一個(gè)非封閉的"/"符號(hào)時(shí)，要校驗(yàn)它之前的第一個(gè)非空字符。采用正則表達(dá)式來匹配這一規(guī)則：

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