本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
这是源码共读的第24期 | vue2工具函数
源码准备
判断类型
isUndef 判断undefined和null
function isUndef (v) {
return v === undefined || v === null
}
isDef 判断非undefined和null对象
function isDef (v) {
return v !== undefined && v !== null
}
isTrue 判断True
function isTrue (v) {
return v === true
}
isPrimitive 判断是否为基本类型
function isPrimitive (value) {
return (
typeof value === 'string' ||
typeof value === 'number' ||
// $flow-disable-line
typeof value === 'symbol' ||
typeof value === 'boolean'
)
}
isObject 判断是否为对象
function isObject (obj) {
return obj !== null && typeof obj === 'object'
}
null的类型也是object，在这里需要排除它
isPlainObject 判断是否是一个纯对象
var _toString = Object.prototype.toString;
function isPlainObject (obj) {
return _toString.call(obj) === '[object Object]'
}
Object.prototype.toString.call([]) //[object Array]
Object.prototype.toString.call({}) //[object Object] //纯对象
_toString 为Object原型下的toString方法,它会返回调用对象的类型文本值, 每个对象下原型都会继承这个方法
通过Function原型下的call方法调用_toString,这里相当于:
Object.prototype.toString.call(obj)
toString方法内部会获取this对象的类型并返回对应的字符串表示它，这里call是为了改变它内部的this。
isRegExp 判断是否是一个正则
function isRegExp (v) {
return _toString.call(v) === '[object RegExp]'
}
判断是否是一个有效数组索引
function isValidArrayIndex (val) {
var n = parseFloat(String(val));
return n >= 0 && Math.floor(n) === n && isFinite(val)
}
isFinite函数会判断是否是一个 有效的数值
判断是否为一个Promise
function isPromise (val) {
return (
isDef(val) && //isDef 非undefined 或者null的值
typeof val.then === 'function' &&
typeof val.catch === 'function'
)
}
判断val是否具有then属性和catch属性并且它们是一个function
转换类型
转换为字符
var _toString = Object.prototype.toString;
function toString (val) {
return val == null
? ''
: Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
? JSON.stringify(val, null, 2)
: String(val)
}
判断val如果为null则返回空字符，否则判断它是否为数组或者纯对象,如果是数组或者纯对象则通过JSON.stringify 返回, 最后条件都不符合的情况下 直接通过String强转一次返回. 这里JSON.stringify 第二个参数 可以传递一个callback用来过滤值的转换，第三个参数传递一个指定的缩进间隔或者缩进符，用来美化JSON的输出
转换数字
function toNumber (val) {
var n = parseFloat(val);
return isNaN(n) ? val : n
}
伪数组转数组
function toArray(list, start) {
start = start || 0;
var i = list.length - start;
var ret = new Array(i);
while (i--) {
ret[i] = list[i + start];
}
return ret;
}
toArray可以将伪数组成员挨个赋值到一个新数组中并返回， 当然你也可以用它来截取数组成员哈哈
对象数组转为一个纯对象
function toObject (arr) {
var res = {};
for (var i = 0; i < arr.length; i++) {
if (arr[i]) {
extend(res, arr[i]);
}
}
return res
}
模板相关
返回一个用于判断是否包含某些模板关键字的高阶函数
function makeMap (
str,
expectsLowerCase
) {
var map = Object.create(null);
var list = str.split(',');
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]; }
}
var isBuiltInTag = makeMap('slot,component', true);
var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is');
将传入的str分割为一个数组，依次遍历传入创建的map对象，expectsLowerCase控制是否在判断的时候将模板关键字转为小写，返回一个函数，函数会返回对应 创建好的map对象下的val属性
其他相关
remove 删除数组内某个成员
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)
}
hasOwnProperty 只会看对象上的属性，不会去判断从原型链上继承来的属性
缓存函数相关
function cached (fn) {
var cache = Object.create(null);
return (function cachedFn (str) {
var hit = cache[str];
return hit || (cache[str] = fn(str))
})
}
//匹配字符转换大写
var camelizeRE = /-(\w)/g;
var camelize = cached(function (str) {
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});
//首字符变大写
var capitalize = cached(function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
});
//匹配大写字母转为小写
var hyphenateRE = /\B([A-Z])/g;
var hyphenate = cached(function (str) {
return str.replace(hyphenateRE, '-$1').toLowerCase()
});
对象浅拷贝
function extend (to, _from) {
for (var key in _from) {
to[key] = _from[key];
}
return to
}
空函数不执行任何操作
function noop (a, b, c) {}
No函数 固定返回false
var no = function (a, b, c) { return false; };
identity返回形参的值
var identity = function (_) { return _; }
genStaticKeys 拼接modules数组对象成员的staticKeys并返回字符
function genStaticKeys (modules) {
return modules.reduce(function (keys, m) {
return keys.concat(m.staticKeys || [])
}, []).join(',')
}
reduce将modules中每个对象成员的staticKeys属性值拼接到 数组中，最后转为字符返回
looseEqual判断两个值是否完全相等
function looseEqual (a, b) {
if (a === b) { return true }
var isObjectA = isObject(a);
var isObjectB = isObject(b);
if (isObjectA && isObjectB) {
try {
var isArrayA = Array.isArray(a);
var isArrayB = Array.isArray(b);
if (isArrayA && isArrayB) {
return a.length === b.length && a.every(function (e, i) {
return looseEqual(e, b[i])
})
} else if (a instanceof Date && b instanceof Date) {
return a.getTime() === b.getTime()
} else if (!isArrayA && !isArrayB) {
var keysA = Object.keys(a);
var keysB = Object.keys(b);
return keysA.length === keysB.length && keysA.every(function (key) {
return looseEqual(a[key], b[key])
})
} else {
/* istanbul ignore next */
return false
}
} catch (e) {
/* istanbul ignore next */
return false
}
} else if (!isObjectA && !isObjectB) {
return String(a) === String(b)
} else {
return false
}
}
looseEqual 会根据值的类型，如果是基本类型则进行全等判断，如果是复杂类型 则分别进行处理
looseIndexOf根据索引成员和另一个值进行对比
function looseIndexOf (arr, val) {
for (var i = 0; i < arr.length; i++) {
if (looseEqual(arr[i], val)) { return i }
}
return -1
}
once 只执行一次的函数
function once (fn) {
var called = false;
return function () {
if (!called) {
called = true;
fn.apply(this, arguments);
}
}
}
利用闭包实现只执行一次的函数
浏览器相关
兼容bind方法
function polyfillBind (fn, ctx) {
function boundFn (a) {
var l = arguments.length;
return l
? l > 1
? fn.apply(ctx, arguments)
: fn.call(ctx, a)
: fn.call(ctx)
}
//根据arguments长度使用apply或者call处理并返回一个函数模拟bind的操作
boundFn._length = fn.length;
return boundFn
}
//nativeBind方法使用原生bind返回
function nativeBind (fn, ctx) {
return fn.bind(ctx)
}
//bind变量 根据 Function原型链上bind是否存在而选择使用哪种bind
var bind = Function.prototype.bind
? nativeBind
: polyfillBind;
总结
- Object.prototype.call 认识加深 精确对类型的取值
- looseEqual函数 对于复杂类型的对比处理
- Object下 hasOwnProperty等一些API的使用
- polyfill bind方案
