重点关注的函数

cached

缓存函数

looseEqual

判断两个值是否全等

once

确保该函数只调用一次

补充说明

makeMap

这个函数是用来将字符串查找变成对象取值，
虽然增加一个步骤，但是缩减了代码
name1,name2
[name1,name2]
{name1: true, name2: true}
字符代码少，数组性能差，对象代码多，性能好
这个函数就是平衡性能和代码量的产物

  1. /* @flow */
  3. // Object.freeze()阻止修改现有属性的特性和值，并阻止添加新属性。
  4. export const emptyObject = Object.freeze({})
  6. // These helpers produce better VM code in JS engines due to their
  7. // explicitness and function inlining.
  8. //判断数据 是否是undefined或者null
  9. export function isUndef (v: any): boolean %checks {
  10.   return v === undefined || v === null
  11. }
  12. //判断数据 是否不等于 undefined或者null
  13. export function isDef (v: any): boolean %checks {
  14.   return v !== undefined && v !== null
  15. }
  16. //判断是否真的等于true
  17. export function isTrue (v: any): boolean %checks {
  18.   return v === true
  19. }
  20. //  判断是否是false
  21. export function isFalse (v: any): boolean %checks {
  22.   return v === false
  23. }
  25. /**
  26.  * Check if value is primitive.
  27.  * 判断数据类型是否是string，number，symbol，boolean
  28.  */
  29. export function isPrimitive (value: any): boolean %checks {
  30.   return (
  31.     typeof value === 'string' ||
  32.     typeof value === 'number' ||
  33.     // $flow-disable-line
  34.     typeof value === 'symbol' ||
  35.     typeof value === 'boolean'
  36.   )
  37. }
  39. /**
  40.  * Quick object check - this is primarily used to tell
  41.  * Objects from primitive values when we know the value
  42.  * is a JSON-compliant type.
  43.  * 快速对象检查-当我们知道值是符合JSON的类型时，
  44.  * 它主要用于区分对象和原始值
  45.  */
  46. //判断是否是对象
  47. export function isObject (obj: mixed): boolean %checks {
  48.   return obj !== null && typeof obj === 'object'
  49. }
  51. /**
  52.  * Get the raw type string of a value, e.g., [object Object].
  53.  */
  54. //获取toString 简写
  55. const _toString = Object.prototype.toString
  56. //类型判断 返会Array ，Function，String,Object,Re 等
  57. export function toRawType (value: any): string {
  58.   return _toString.call(value).slice(8, -1)
  59. }
  61. /**
  62.  * Strict object type check. Only returns true
  63.  * for plain JavaScript objects.
  64.  */
  65. //判断是否是对象
  66. export function isPlainObject (obj: any): boolean {
  67.   return _toString.call(obj) === '[object Object]'
  68. }
  69. //判断是否是正则对象
  70. export function isRegExp (v: any): boolean {
  71.   return _toString.call(v) === '[object RegExp]'
  72. }
  74. /**
  75.  * Check if val is a valid array index.
  76.  * 检查数值是否是有效的数组索引
  77.  */
  78. export function isValidArrayIndex (val: any): boolean {
  79.   // Math.floor 向下取整
  80.   // isFinite 如果 number 是有限数字（或可转换为有限数字），那么返回 true。
  81.   // 否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。
  82.   // 也就是说n要是大于0的整数，不为正负无穷大
  83.   const n = parseFloat(String(val))
  84.   return n >= 0 && Math.floor(n) === n && isFinite(val)
  85. }
  86. // 判断是否为promise对象
  87. export function isPromise (val: any): boolean {
  88.   return (
  89.     isDef(val) &&
  90.     typeof val.then === 'function' &&
  91.     typeof val.catch === 'function'
  92.   )
  93. }
  95. /**
  96.  * Convert a value to a string that is actually rendered.
  97.  * 将对象或者其他基本数据 变成一个 字符串
  98.  */
  99. /*
  100. value
  101. 将要序列化成 一个 JSON 字符串的值。
  102. replacer 可选
  103. 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
  104. 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
  105. 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化；
  106. space 可选
  107. 指定缩进用的空白字符串，用于美化输出（pretty-print）；
  108. 如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；
  109. 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；
  110. 如果该参数没有提供（或者为 null），将没有空格。
  111. */
  112. export function toString (val: any): string {
  113.   return val == null
  114.     ? ''
  115.     : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
  116.       ? JSON.stringify(val, null, 2)
  117.       : String(val)
  118. }
  120. /**
  121.  * Convert an input value to a number for persistence.
  122.  * If the conversion fails, return original string.
  123.  * 字符串转数字，如果失败则返回字符串
  124.  */
  125. export function toNumber (val: string): number | string {
  126.   const n = parseFloat(val)
  127.   return isNaN(n) ? val : n
  128. }
  130. /**
  131.  * Make a map and return a function for checking if a key
  132.  * is in that map.
  133.  * map 对象中的[name1,name2]
  134.  * 变成这样的map{name1:true,name2:true}，
  135.  * 传入一个key值就能判断是否该key值是否存在
  136.  */
  137. export function makeMap (
  138.   str: string,
  139.   expectsLowerCase?: boolean
  140. ): (key: string) => true | void {
  141.   const map = Object.create(null)
  142.   const list: Array<string> = str.split(',')
  143.   for (let i = 0; i < list.length; i++) {
  144.     map[list[i]] = true
  145.   }
  146.   return expectsLowerCase
  147.     ? val => map[val.toLowerCase()]
  148.     : val => map[val]
  149. }
  151. /**
  152.  * Check if a tag is a built-in tag.
  153.  * 检查标记是否为内置标记。
  154.  */
  155. export const isBuiltInTag = makeMap('slot,component', true)
  157. /**
  158.  * Check if an attribute is a reserved attribute.
  159.  * 检查属性是否为保留属性。
  160.  */
  161. export const isReservedAttribute = makeMap('key,ref,slot,slot-scope,is')
  163. /**
  164.  * Remove an item from an array.
  165.  * 删除数组
  166.  */
  167. export function remove (arr: Array<any>, item: any): Array<any> | void {
  168.   if (arr.length) {
  169.     const index = arr.indexOf(item)
  170.     if (index > -1) {
  171.       return arr.splice(index, 1)
  172.     }
  173.   }
  174. }
  176. /**
  177.  * Check whether an object has the property.
  178.  * 检查对象属性是否是实例化还是原型上面的
  179.  */
  180. const hasOwnProperty = Object.prototype.hasOwnProperty
  181. export function hasOwn (obj: Object | Array<*>, key: string): boolean {
  182.   return hasOwnProperty.call(obj, key)
  183. }
  185. /**
  186.  * Create a cached version of a pure function.
  187.  * 创建纯函数的缓存版本。
  188.  * 创建一个函数，缓存到闭包里，再返回柯里化函数
  189.  * 这个函数的作用就是当传入第二次传入同一个值的时候，
  190.  * 直接返回已经缓存的函数结果
  191.  */
  192. export function cached<F: Function> (fn: F): F {
  193.   const cache = Object.create(null)
  194.   return (function cachedFn (str: string) {
  195.     const hit = cache[str]
  196.     return hit || (cache[str] = fn(str))
  197.   }: any)
  198. }
  200. /**
  201.  * Camelize a hyphen-delimited string.
  202.  * 用连字符分隔的字符串变为驼峰式
  203.  */
  204. const camelizeRE = /-(\w)/g
  205. export const camelize = cached((str: string): string => {
  206.   return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
  207. })
  209. /**
  210.  * Capitalize a string.
  211.  * 将首字母变成大写
  212.  */
  213. export const capitalize = cached((str: string): string => {
  214.   return str.charAt(0).toUpperCase() + str.slice(1)
  215. })
  217. /**
  218.  * Hyphenate a camelCase string.
  219.  * \B是非单词分界符，即可以查出是否包含某个字，
  220.  * 如“ABCDEFGHIJK”中是否包含“BCDEFGHIJK”这个字。
  221.  */
  222. const hyphenateRE = /\B([A-Z])/g
  223. export const hyphenate = cached((str: string): string => {
  224.   //大写字母，加完减号又转成小写了 比如把驼峰 aBc 变成了 a-bc
  225.   //匹配大写字母并且两面不是空白的 替换成 '-' + '字母' 再全部转换成小写
  226.   return str.replace(hyphenateRE, '-$1').toLowerCase()
  227. })
  229. /**
  230.  * Simple bind polyfill for environments that do not support it,
  231.  * e.g., PhantomJS 1.x. Technically, we don't need this anymore
  232.  * since native bind is now performant enough in most browsers.
  233.  * But removing it would mean breaking code that was able to run in
  234.  * PhantomJS 1.x, so this must be kept for backward compatibility.
  235.  * 简单绑定polyfill适用于不支持它的环境，例如PhantomJS 1.x。
  236.  * 从技术上讲，我们不再需要它了，因为本机绑定现在在大多数浏览器中已经有足够的性能了。
  237.  * 但是删除它将意味着破坏能够在PhantomJS 1.x中运行的代码，
  238.  * 因此必须保留这些代码以实现向后兼容。
  239.  */
  241. /* istanbul ignore next */
  242. function polyfillBind (fn: Function, ctx: Object): Function {
  243.   function boundFn (a) {
  244.     const l = arguments.length
  245.     return l
  246.       ? l > 1
  247.         ? fn.apply(ctx, arguments)
  248.         : fn.call(ctx, a)
  249.       : fn.call(ctx)
  250.   }
  252.   boundFn._length = fn.length
  253.   return boundFn
  254. }
  256. function nativeBind (fn: Function, ctx: Object): Function {
  257.   return fn.bind(ctx)
  258. }
  260. export const bind = Function.prototype.bind
  261.   ? nativeBind
  262.   : polyfillBind
  264. /**
  265.  * Convert an Array-like object to a real Array.
  266.  * 将类数组转换成真的数组
  267.  */
  268. export function toArray (list: any, start?: number): Array<any> {
  269.   start = start || 0
  270.   let i = list.length - start
  271.   const ret: Array<any> = new Array(i)
  272.   while (i--) {
  273.     ret[i] = list[i + start]
  274.   }
  275.   return ret
  276. }
  278. /**
  279.  * Mix properties into target object.
  280.  * 浅拷贝
  281.  * 对象浅拷贝，参数（to, _from）循环_from的值，会覆盖掉to的值
  282.  */
  283. export function extend (to: Object, _from: ?Object): Object {
  284.   for (const key in _from) {
  285.     to[key] = _from[key]
  286.   }
  287.   return to
  288. }
  290. /**
  291.  * Merge an Array of Objects into a single Object.
  292.  * 合并对象数组合并成一个对象
  293.  */
  294. export function toObject (arr: Array<any>): Object {
  295.   const res = {}
  296.   for (let i = 0; i < arr.length; i++) {
  297.     if (arr[i]) {
  298.       extend(res, arr[i])
  299.     }
  300.   }
  301.   return res
  302. }
  304. /* eslint-disable no-unused-vars */
  306. /**
  307.  * Perform no operation.
  308.  * Stubbing args to make Flow happy without leaving useless transpiled code
  309.  * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).
  310.  * 不执行任何操作。在不留下无用的透明代码和…rest的情况下，存根参数使flow愉快
  311.  */
  312. export function noop (a?: any, b?: any, c?: any) {}
  314. /**
  315.  * Always return false.
  316.  * 返回假
  317.  */
  318. export const no = (a?: any, b?: any, c?: any) => false
  320. /* eslint-enable no-unused-vars */
  322. /**
  323.  * Return the same value.
  324.  * 返回相同值
  325.  */
  326. export const identity = (_: any) => _
  328. /**
  329.  * Generate a string containing static keys from compiler modules.
  330.  * [{ staticKeys:1},{staticKeys:2},{staticKeys:3}]
  331.  * 连接数组对象中的 staticKeys key值，连接成一个字符串 str=‘1,2,3’
  332.  */
  333. export function genStaticKeys (modules: Array<ModuleOptions>): string {
  334.   return modules.reduce((keys, m) => {
  335.     //累加staticKeys的值变成数组
  336.     return keys.concat(m.staticKeys || [])
  337.   }, []).join(',')//转换成字符串
  338. }
  340. /**
  341.  * Check if two values are loosely equal - that is,
  342.  * if they are plain objects, do they have the same shape?
  343.  * 检测a和b的数据类型，是否是不是数组或者对象，
  344.  * 对象的key长度一样即可，数组长度一样即可
  345.  */
  346. export function looseEqual (a: any, b: any): boolean {
  347.   //如果a和b是完全相等 则true
  348.   if (a === b) return true
  349.   const isObjectA = isObject(a)
  350.   const isObjectB = isObject(b)
  351.   if (isObjectA && isObjectB) { //如果a和都是对象则让下走
  352.     try {
  353.       const isArrayA = Array.isArray(a)
  354.       const isArrayB = Array.isArray(b)
  355.       if (isArrayA && isArrayB) { //如果a和b都是数组
  356.         return a.length === b.length && a.every((e, i) => { //如果a长度和b长度一样的时候
  357.           return looseEqual(e, b[i]) //递归
  358.         })
  359.       } else if (a instanceof Date && b instanceof Date) { //或者a和b是日期类型
  360.         return a.getTime() === b.getTime() //获取毫秒数来判断是否相等
  361.       } else if (!isArrayA && !isArrayB) { //或者a和b都不是数组
  362.         const keysA = Object.keys(a) // 获取到a的key值 变成一个数组
  363.         const keysB = Object.keys(b) // 获取到b的key值 变成一个数组
  364.         return keysA.length === keysB.length && keysA.every(key => { //他们的对象key值长度是一样的时候  则加载every 条件函数
  365.           return looseEqual(a[key], b[key])  //递归
  366.         })
  367.       } else {
  368.         /* istanbul ignore next */
  369.         return false
  370.       }
  371.     } catch (e) {
  372.       /* istanbul ignore next */
  373.       return false
  374.     }
  375.   } else if (!isObjectA && !isObjectB) { //b和a 都不是对象的时候
  376.     return String(a) === String(b) //把a和b变成字符串，判断他们是否相同
  377.   } else {
  378.     return false
  379.   }
  380. }
  382. /**
  383.  * Return the first index at which a loosely equal value can be
  384.  * found in the array (if value is a plain object, the array must
  385.  * contain an object of the same shape), or -1 if it is not present.
  386.  * 返回第一个索引，在该索引处可以在数组中找到大致相等的值
  387.  * 返回第一个索引，在该索引处可以在数组中找到大致相等的值
  388.  * （如果值是普通对象，则数组必须包含全等的对象），
  389.  * 如果不存在则返回-1。
  390.  */
  391. export function looseIndexOf (arr: Array<mixed>, val: mixed): number {
  392.   for (let i = 0; i < arr.length; i++) {
  393.     if (looseEqual(arr[i], val)) return i
  394.   }
  395.   return -1
  396. }
  398. /**
  399.  * Ensure a function is called only once.
  400.  * 确保该函数只调用一次 闭包函数
  401.  */
  402. export function once (fn: Function): Function {
  403.   let called = false
  404.   return function () {
  405.     if (!called) {
  406.       called = true
  407.       fn.apply(this, arguments)
  408.     }
  409.   }
  410. }