vue2工具函数

前言

今天利用空余时间看了一下 vue2 的工具函数。目标是学习动力的来源，原来只有自己是懒散的，没有目标的看一些无聊的博客感觉进步也不少很大。遇到不懂的也懒得去深究知其所以然。坚持每周打卡一次学习源码加入若川团队，每天进步一小点来成长。不求成为多厉害的大牛，只要不被社会淘汰足矣。

---

一、flow是什么？

示例：flow 能在 JS 运行前找出常见的 bug 是检查代码的一种工具 flow官网

/* @flow */

export const emptyObject = Object.freeze({})

// These helpers produce better VM code in JS engines due to their
// explicitness and function inlining.
export function isUndef (v: any): boolean %checks {
  return v === undefined || v === null
}

JavaScript 是弱类型语言，从来不用去担心 IDE 的类型报错，不需要定义函数接收参数的类型。假如一个函数一个月前你约定好是传一对象，返回一个对象包含一些列参数。在没有注释的情况下一个月后的你可能就忘记当时传什么参数，返回的又是什么。
今天VUE2 的工具函数认识了 flow 工具类，他可以在在编译前去对 带有/* @flow */ 的文件做类型检测，让我们的代码具有规范性。根据官网实例测试了一下挺好用，以后使用看看效果。

二、若干个工具函数

1. 冻结一个对象

// 字面理解是创建了一个空的对象 其实就是把该对象冻结了
// 不允许修改已有属性和添加新属性，并且该对象不能修改克枚举的属性、可写性，并且原型不能修改
var emptyObject = Object.freeze({});
// 扩展一个密封的对象 的API 可以改变它们现有的属性
// 阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。
var emptyObject1 = Object.seal({});

2. 判断型工具类

 function isUndef (v) {
    return v === undefined || v === null
  }

  function isDef (v) {
    return v !== undefined && v !== null
  }

  function isTrue (v) {
    return v === true
  }

  function isFalse (v) {
    return v === false
  }
  
function isPrimitive (value) {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    // $flow-disable-line
    typeof value === 'symbol' ||
    typeof value === 'boolean'
  )
}

function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}

function isPlainObject (obj) {
  return _toString.call(obj) === '[object Object]'
}


function isRegExp (v) {
  return _toString.call(v) === '[object RegExp]'
}
isRegExp(/ruochuan/) // isRegExp（） 对象的字符串是 object RegExp

function isValidArrayIndex (val) {
  var n = parseFloat(String(val));
  return n >= 0 && Math.floor(n) === n && isFinite(val)
}

// isPromise 可以判断 点then 是不是 function
function isPromise (val) {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}

3. toRawType 转换成原始类型

// Object.prototype.toString() 方法返回一个表示该对象的字符串。
var _toString = Object.prototype.toString;

function toRawType (value) {
  return _toString.call(value).slice(8, -1)
}

3. toString 转换成字符串

// 转换成字符串。是数组或者对象并且对象的 toString 方法是 Object.prototype.toString，用 JSON.stringify 转换。
function toString (val) {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
      ? JSON.stringify(val, null, 2)
      : String(val)
}

3. toNumber 转数字

function toNumber (val) {
  var n = parseFloat(val); // 先強转成浮点型 如果不是数字的字符串 返回NaN
  return isNaN(n) ? val : n // 判断是不是NaN 如果是返回原数据，否则返回浮点数
}
toNumber('a') // 'a'
toNumber('1') // 1
toNumber('1a') // 1
toNumber('a1') // 'a1'

---

总结

今天只看了一工具函数的一部分，虽然和axios 的工具函数类似多出好多函数，一般的都能看懂。就是使用场景不知道在哪里用，原来也写过工具类只要有复用的地方就写一个工具，感觉很杂乱没有一个合理的思路去分类。修改的时候也感觉不是恒理想，希望有一个可以理想规划的介绍。