Vue.js 源碼分析(十一) 基礎篇過濾器 filters屬性詳解

時間 2019-12-13

標籤 vue.js vue 源碼分析十一基礎過濾器 filters 屬性詳解欄目 JavaScript 简体版

原文原文鏈接

Vue.js 容許你自定義過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，例如:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app"><p>{{no | add(100) }}</p></div>
    <script>
        debugger
        var app = new Vue({
            el:"#app",
            data:{no:123},
            filters:{
                add:function(val,i){return val+i}
            }
        })
    </script>     
</body>
</html>

渲染結果爲:vue

當咱們在頁面裏輸出某些數據，須要進行格式轉換的時候能夠用這個過濾器express

源碼分析api

parse()解析模板時遇到文本時會執行parseText()函數，以下:app

function parseText (    //第8575行 解析模板時用於解析文本
  text,
  delimiters
) {
  var tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE;       
  if (!tagRE.test(text)) {                                              //匹配是否有表達式,好比:{{message}}  若是沒有，則表示是純文本節點,則直接返回不作處理
    return
  }
  var tokens = [];
  var rawTokens = [];
  var lastIndex = tagRE.lastIndex = 0;
  var match, index, tokenValue;
  while ((match = tagRE.exec(text))) {                                  //用正則tagRE去匹配text,此時match就是text裏的每一個值，對於:{{item}}:{{index}}來講,match等於Array["{{item}}","item"] 、 Array["{{index}}","index"]
    index = match.index;                                                  //該數據的起始索引
    // push text token
    if (index > lastIndex) {                                              //若是index大於lastIndex，代表中間還有一段文本，好比:{{item}}:{{index}}，中間的:就是文本
      rawTokens.push(tokenValue = text.slice(lastIndex, index));
      tokens.push(JSON.stringify(tokenValue));
    }
    // tag token
    var exp = parseFilters(match[1].trim());                               //調用parseFilters對match[1作解析]   ;例如{{no | add(100) }}，解析後的格式爲:_f("add")(no,100)
    tokens.push(("_s(" + exp + ")"));
    rawTokens.push({ '@binding': exp });
    lastIndex = index + match[0].length;                                      //設置下一次開始匹配的位置
  }
  if (lastIndex < text.length) {
    rawTokens.push(tokenValue = text.slice(lastIndex));
    tokens.push(JSON.stringify(tokenValue));
  }
  return {
    expression: tokens.join('+'),                                             //拼湊成一個 表達式，例如:"_s(item)+":"+_s(index)"
    tokens: rawTokens                                                         //模板信息，例如[{@binding: "item"},":",{@binding: "index"}]
  }
}

parseFilters定義在6436行，就是解析每一個字符，最後拼湊出一個_f的字符，例子中執行完後等於

最後執行render函數的時候會執行_f函數，也就是Vue內部的resolveFilter函數，以下:ide

function resolveFilter (id) {       //第3774行 過濾器對應的函數
  return resolveAsset(this.$options, 'filters', id, true) || identity   //執行resolveAsset函數
}

resolveAsset會獲取對應資源(過濾器、組件、指令等),返回對應函數，以下:函數

function resolveAsset (         //第1498行 options:Vue實例的$options對象 type:類型，好比:components、filters id:獲取的ID
  options,
  type,
  id,
  warnMissing
) {
  /* istanbul ignore if */
  if (typeof id !== 'string') {
    return
  }
  var assets = options[type];
  // check local registration variations first
  if (hasOwn(assets, id)) { return assets[id] }                         //先從當前實例上找id
  var camelizedId = camelize(id);
  if (hasOwn(assets, camelizedId)) { return assets[camelizedId] }       //將id轉化爲駝峯式後再找
  var PascalCaseId = capitalize(camelizedId);
  if (hasOwn(assets, PascalCaseId)) { return assets[PascalCaseId] }     //若是還沒找到則嘗試將首字母大寫查找
  // fallback to prototype chain
  var res = assets[id] || assets[camelizedId] || assets[PascalCaseId];  //最後經過原型來查找
  if ("development" !== 'production' && warnMissing && !res) {
    warn(
      'Failed to resolve ' + type.slice(0, -1) + ': ' + id,
      options
    );
  }
  return res
}