Vue源码阅读分享---工具函数

Vue是优秀的前端MVVM框架，阅读源码对于理解框架以及提高js编程水平有极大的帮助，所以把自己阅读的源码分享给大家！

判断一个值是不是为空

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' ||
    typeof value === 'boolean'
  )
}

快速类型检查，当我们知道value是json兼容类型时，用于判断原始值和对象

function isObject (obj) {
  return obj !== null && typeof obj === 'object' //因为typeof null为object，故先排除null
}

严格类型，只有value为js对象时才返回true

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

返回的函数使用了内部的数组map，是一个典型的闭包的应用

function makeMap(str,expectsLowerCase) {
  var map = Object.create(null); //创建一个空对象
  var list = str.split(','); //分割字符串str
  for (var i = 0; i < list.length; i++) { 
    map[list[i]] = true; //生成数组
  }
  return expectsLowerCase //判断一个变量是否包含在传入字符串里
    ? function (val) { return map[val.toLowerCase()]; }
    : function (val) { return map[val]; } 
}

删除数组的一个元素

function remove (arr, item) {
  if (arr.length) {
    var index = arr.indexOf(item);
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

判断对象的自有属性

var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn (obj, key) {
  return hasOwnProperty.call(obj, key)
}

创建一个缓存函数

function cached (fn) {
  var cache = Object.create(null); //创建一个缓存对象
  return (function cachedFn (str) { //返回一个缓存函数
    var hit = cache[str]; //根据str获取缓存对象中的值
    return hit || (cache[str] = fn(str)) //命中则返回缓存的函数，否则返回fn
  })
}

首字母大写

var capitalize=cached(function(str){ //使用缓存函数提高效率
    return str.charAt(0).toUpperCase()+str.slice(1)
})
console.log(capitalize('abc'))

连接一个camelCase字符串

var hyphenateRE=/([^-])([A-Z])/g
var hyphenate = cached(function(str){
    return str
        // 这里要调用两次replace是因为，如果是 ABCD 这种包含三个连续大写字母的字符串，
        // 只replace一次会变成A-BC-D这样，需要再replace一次
        .replace(hyphenateRE,'$1-$2') 
        .replace(hyphenateRE,'$1-$2')
        .toLowerCase()
})
console.log(hyphenate('ABCD'))