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

原文地址
項目地址

作為 1.0 版本頻繁使用的 filter，在 構(gòu)造函數(shù)里以 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 類實現(xiàn)了多種過濾方法,包括

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 方法的實現(xiàn)其實是對 js 的 JSON 對象的方法做了一層封裝， 有意思的是發(fā)現(xiàn) JSON.stringify(value, null, Number(indent) || 2), 發(fā)現(xiàn) stringify 方法的第二參數(shù)和第三個參數(shù)，查了mdn 才知道后兩個參數(shù)分別代表要提取的屬性以及縮進(jìn)格式，在這里是提取所有屬性并以兩個空格作為縮進(jìn)，而且有趣的是這個方法會忽略值為 undefined 或者 function 的屬性，如果值為數(shù)組且數(shù)組里面有 undefined 或者 function，則轉(zhuǎn)換為 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用于數(shù)字格式化， 實現(xiàn)亮點在于 digitsRE 這個正則表達(dá)式，它使用了 ?=（正向預(yù)查）來匹配連續(xù)三個數(shù)字且后續(xù)一個字符還是數(shù)字的情況

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 功能的實現(xiàn)值得一看

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

util 實現(xiàn)了很多工具類的方法供 vue 使用，屬于底層且非業(yè)務(wù)邏輯的代碼實現(xiàn)，因此應(yīng)該是比較好理解的一個模塊

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

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) // 存在的話調(diào)用 convert 函數(shù)
  ob.dep.notify() // 這里應(yīng)該就是觸發(fā)更新通知吧
  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) 的方式來調(diào)用

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

/**
 * 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)
}

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

_toString 函數(shù)確保值為 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)
}