摘要：原文地址項目地址上一篇遺留的作為版本頻繁使用的，在構造函數里以引入類實現了多種過濾方法包括方法的實現其實是對的對象的方法做了一層封裝，有意思的是發現發現方法的第二參數和第三個參數，查了才知道后兩個參數分別代表要提取的屬性以及縮進格式，在這里

原文地址
項目地址

作為 1.0 版本頻繁使用的 filter，在 構造函數里以 Vue.Options.filters 引入:

...
import filters from "./filters/index"
...

Vue.version = "1.0.8"
...
Vue.options = {
  directives,
  elementDirectives,
  filters,
  transitions: {},
  components: {},
  partials: {},
  replace: true
}

export default Vue

...

filter 類實現了多種過濾方法,包括

orderBy

filterBy

limitBy

json

capitalize

uppercase

lowercase

currency

pluralize

debounce

  json: {
    read: function (value, indent) {
      return typeof value === "string"
        ? value
        : JSON.stringify(value, null, Number(indent) || 2)
    },
    write: function (value) {
      try {
        return JSON.parse(value)
      } catch (e) {
        return value
      }
    }
  },

json 方法的實現其實是對 js 的 JSON 對象的方法做了一層封裝， 有意思的是發現 JSON.stringify(value, null, Number(indent) || 2), 發現 stringify 方法的第二參數和第三個參數，查了mdn 才知道后兩個參數分別代表要提取的屬性以及縮進格式，在這里是提取所有屬性并以兩個空格作為縮進，而且有趣的是這個方法會忽略值為 undefined 或者 function 的屬性，如果值為數組且數組里面有 undefined 或者 function，則轉換為 null，更多特性請參考MDN文檔

  const digitsRE = /(d{3})(?=d)/g
  /**
   * 12345 => $12,345.00
   *
   * @param {String} sign
   */

  currency (value, currency) {
    value = parseFloat(value)
    if (!isFinite(value) || (!value && value !== 0)) return ""
    currency = currency != null ? currency : "$"
    var stringified = Math.abs(value).toFixed(2)
    var _int = stringified.slice(0, -3)
    var i = _int.length % 3
    var head = i > 0
      ? (_int.slice(0, i) + (_int.length > 3 ? "," : ""))
      : ""
    var _float = stringified.slice(-3)
    var sign = value < 0 ? "-" : ""
    return currency + sign + head +
      _int.slice(i).replace(digitsRE, "$1,") +
      _float
  }

currency用于數字格式化， 實現亮點在于 digitsRE 這個正則表達式，它使用了 ?=（正向預查）來匹配連續三個數字且后續一個字符還是數字的情況

export function filterBy (arr, search, delimiter) {
  arr = convertArray(arr)
  if (search == null) {
    return arr
  }
  if (typeof search === "function") {
    return arr.filter(search)
  }
  // cast to lowercase string
  search = ("" + search).toLowerCase()
  // allow optional `in` delimiter
  // because why not
  var n = delimiter === "in" ? 3 : 2
  // extract and flatten keys
  var keys = toArray(arguments, n).reduce(function (prev, cur) {
    return prev.concat(cur)
  }, [])
  var res = []
  var item, key, val, j
  for (var i = 0, l = arr.length; i < l; i++) {
    item = arr[i]
    val = (item && item.$value) || item
    j = keys.length
    if (j) {
      while (j--) {
        key = keys[j]
        if ((key === "$key" && contains(item.$key, search)) ||
            contains(getPath(val, key), search)) {
          res.push(item)
          break
        }
      }
    } else if (contains(item, search)) {
      res.push(item)
    }
  }
  return res
}

filterBy 功能的實現值得一看

export * from "./lang"
export * from "./env"
export * from "./dom"
export * from "./options"
export * from "./component"
export * from "./debug"
export { defineReactive } from "../observer/index"

util 實現了很多工具類的方法供 vue 使用，屬于底層且非業務邏輯的代碼實現，因此應該是比較好理解的一個模塊

lang 實現的第一個方法是 set(obj, key, val), 不過和理解的不同，工具類方法的實現是可能包含業務邏輯的，set 會為 object 的某個屬性設置新的值，并且如果屬性不存在，會觸發通知

export function set (obj, key, val) {
  if (hasOwn(obj, key)) { // 如果存在這個屬性，直接更新該值并返回
    obj[key] = val
    return
  }
  if (obj._isVue) { // 如果是 vue 對象，則更新 obj 為 obj._data
    set(obj._data, key, val)
    return
  }
  var ob = obj.__ob__  // 不存在該屬性時，獲取 obj 的 __ob__ 屬性值
  if (!ob) { // 不存在時直接更新返回
    obj[key] = val
    return
  }
  ob.convert(key, val) // 存在的話調用 convert 函數
  ob.dep.notify() // 這里應該就是觸發更新通知吧
  if (ob.vms) { // vms 暫時不知道是什么
    var i = ob.vms.length
    while (i--) {
      var vm = ob.vms[i]
      vm._proxy(key)
      vm._digest()
    }
  }
}

var hasOwnProperty = Object.prototype.hasOwnProperty
/**
 * Check whether the object has the property.
 *
 * @param {Object} obj
 * @param {String} key
 * @return {Boolean}
 */
export function hasOwn (obj, key) {
  return hasOwnProperty.call(obj, key)
}

hasOwnProperty 用來檢測對象是否含有某個屬性，不包括繼承的，為了避免 hasOwnProperty 被重寫，最好使用 Object.prototype.hasOwnProperty.call(obj, key) 的方式來調用

del(obj,key) 用來刪除相關的屬性也是類似的操作

/**
 * Check if an expression is a literal value.
 *
 * @param {String} exp
 * @return {Boolean}
 */

var literalValueRE = /^s?(true|false|[d.]+|"[^"]*"|"[^"]*")s?$/
export function isLiteral (exp) {
  return literalValueRE.test(exp)
}

暫時不知道是用在哪里，從正則表達式看來是匹配一段文本字符串

_toString 函數確保值為 null 或為 undefinded 輸出為空字符串， 這里利用的模糊等號 "==" 來匹配 null 和 undefined：

export function _toString (value) {
  return value == null
    ? ""
    : value.toString()
}

var camelizeRE = /-(w)/g
export function camelize (str) {
  return str.replace(camelizeRE, toUpper)
}

function toUpper (_, c) {
  console.log(arguments);
  return c ? c.toUpperCase() : ""
}

var hyphenateRE = /([a-zd])([A-Z])/g
export function hyphenate (str) {
  return str
    .replace(hyphenateRE, "$1-$2")
    .toLowerCase()
}
/**
 * Converts hyphen/underscore/slash delimitered names into
 * camelized classNames.
 *
 * e.g. my-component => MyComponent
 *      some_else    => SomeElse
 *      some/comp    => SomeComp
 *
 * @param {String} str
 * @return {String}
 */

var classifyRE = /(?:^|[-_/])(w)/g // 使用了非獲取匹配
export function classify (str) {
  return str.replace(classifyRE, toUpper)
}