前言
本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
源码
Object.freeze 冻结对象
var emptyObject = Object.freeze({});
Object.freeze()方法以一个对象为参数，冻结这个对象；它可以保留对象的可枚举性，可配置性，可写性和原型不被修改；它返回被冻结的对象，但不创建冻结副本。
同时，它也只能冻结对象的第一层数据，无法深冻结，类似浅拷贝。
我们可以通过Object.isFrozen()对某个数据进行判断，是否冻结。
源码中，将emptyObject定义为一个默认的全局变量。
isUndef 判断数据是否未定义
function isUndef (v) {
return v === undefined || v === null;
}
isDef 判断数据是否已定义
function isDef(value) {
return value !== undefined && value !== null;
}
该方法，一度想过对isUndef进行取反校验
isPrimitive 判断数据是否是原始值
function isPrimitive (value) {
return (
typeof value === 'string' ||
typeof value === 'number' ||
// $flow-disable-line
typeof value === 'symbol' ||
typeof value === 'boolean'
)
}
有没有觉得很奇怪，缺少了null和undefined，起初一直以为这个方法是用来校验是否为基本类型，但是看了一下源码中使用该方法的地方，传入的数据不存在这两种类型，因此该方法就不做这两种类型的判断了，否则函数命名可能就是isBaseType
isObject 判断数据是否是对
function isObject (obj) {
return obj !== null && typeof obj === 'object'
}
没有对常规对象做精细化校验，或许是对引用类型进行若判断
isTrue 判断数据是否是true
function isTrue (v) {
return v === true
}
isFalse 判断数据是否是false
function isFalse (v) {
return v === false
}
isPlainObject 判断数据是否是普通对象
function isPlainObject (obj) {
return _toString.call(obj) === '[object Object]'
}
isValidArrayIndex 判断数据是否是可用的数组索引
function isValidArrayIndex (val) {
var n = parseFloat(String(val));
return n >= 0 && Math.floor(n) === n && isFinite(val)
}
isRegExp 判断数据是否是正则表达式
function isRegExp (v) {
return _toString.call(v) === '[object RegExp]'
}
isPromise 判断数据是否是Promise
function isPromise (val) {
return (
isDef(val) &&
typeof val.then === 'function' &&
typeof val.catch === 'function'
)
}
toRawType 获取数据类型
var _toString = Object.prototype.toString;
function toRawType (value) {
return _toString.call(value).slice(8, -1);
}
该方法也弥补了isObject的不足
满足数组索引值的条件，大于等于0 且 是一个正整数 且 是一个有限制
toString 将数据转化为String
function toString (val) {
return val == null
? ''
: Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
? JSON.stringify(val, null, 2)
: String(val)
}
toNumber 将数据转化为Number
function toNumber (val) {
const n = parseFloat(val)
return isNaN(n) ? val : n
}
toArray 将数据转为数组
将支持length属性且可读取每一个下标位置的数据（String, Array, arguments），转为数组，且支持转换起始位置
function toArray (list, start) {
start = start || 0
let i = list.length - start
const ret = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}
remove 删除数组中的某一项
function remove (arr, item) {
if (arr.length) {
const index = arr.indexOf(item)
if (index > -1) {
return arr.splice(index, 1)
}
}
}
hasOwn 判断数据是否有某个属性
const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj, key) {
return hasOwnProperty.call(obj, key)
}
cached 缓存
function cached (fn) {
const cache = Object.create(null)
return (function cachedFn (str) {
const hit = cache[str]
return hit || (cache[str] = fn(str))
})
}
这个高阶函数比较有意思，同时设计的也很巧妙，通过执行cached方法，创建了一个公共的缓存函数和缓存数据闭包cache，每次执行公共的函数时，会优先读取cache里是否有这个数据，有的话直接返回，否则执行处理函数后，并缓存数据，提高了同一个数据的处理效率。
camelize 将中划线的变量名转为小驼峰
const camelizeRE = /-(\w)/g
function camelize = cached((str) => {
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})
// first-name -> firstName
capitalize 将变量名首字母大写
function capitalize = cached((str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})
// firstName -> FirstName
hyphenate 将小驼峰变量名转为中划线的变量名
const hyphenateRE = /\B([A-Z])/g
function hyphenate = cached((str) => {
return str.replace(hyphenateRE, '-$1').toLowerCase()
})
// firstName -> first-name
polyfillBind Bind补充
// 补充Bind
function polyfillBind (fn, ctx) {
function boundFn (a) {
const l = arguments.length
return l
? l > 1
? fn.apply(ctx, arguments)
: fn.call(ctx, a) // 更多的时候会使用arguments[0]，源码更简洁
: fn.call(ctx)
}
boundFn._length = fn.length; // fn函数的形参数量
return boundFn
}
// 原生Bind
function nativeBind (fn, ctx) {
return fn.bind(ctx)
}
// 校验浏览器是否支持Bind，优化Bind
const bind = Function.prototype.bind
? nativeBind
: polyfillBind
这里比较绕，需要理解call、apply、bind的异同之处。
extend 合并两个数据
function extend (to, _from) {
for (const key in _from) {
to[key] = _from[key]
}
return to
}
toObject 将对象数组中每一项合至一个对象
function toObject (arr) {
const res = {}
for (let i = 0; i < arr.length; i++) {
if (arr[i]) {
extend(res, arr[i])
}
}
return res
}
noop 空函数
function noop (a, b, c) {}
no 返回false
const no = (a, b, c) => false
identity 返回相同数据
const identity = (_) => _
genStaticKeys 从编译器模块生成包含静态键的字符串
function genStaticKeys (modules) {
return modules.reduce((keys, m) => {
return keys.concat(m.staticKeys || [])
}, []).join(',')
}
looseEqual 校验两个值是否大致相同
这个是工具函数里代码最多的一个函数
function looseEqual (a, b) {
//如果两个值完全相等，返回true
if (a === b) return true;
const isObjectA = isObject(a)
const isObjectB = isObject(b)
if (isObjectA && isObjectB) {
try {
const isArrayA = Array.isArray(a)
const isArrayB = Array.isArray(b)
if (isArrayA && isArrayB) {
// 如果两个都是数组，且长度相同，则递归比较每一项
return a.length === b.length && a.every((e, i) => {
return looseEqual(e, b[i])
})
} else if (a instanceof Date && b instanceof Date) {
// 如果两个都是时间对象，则比较时间是否相等
return a.getTime() === b.getTime()
} else if (!isArrayA && !isArrayB) {
// 如果两个都不是数组，且属相数量一样，则递归比较每一项
const keysA = Object.keys(a)
const keysB = Object.keys(b)
return keysA.length === keysB.length && keysA.every(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
}
}
looseIndexOf 返回数组中存在某个数据的下标
function looseIndexOf (arr, val) {
for (let i = 0; i < arr.length; i++) {
if (looseEqual(arr[i], val)) return i
}
return -1
}
once 函数只执行一次
通过闭包声明变量called，校验当前函数是否执行
function once (fn) {
let called = false
return function () {
if (!called) {
called = true
fn.apply(this, arguments)
}
}
}
makeMap 生成一个属性Map
校验某个数据中是否存在key属性，这个方法类似于catched
function makeMap (str, expectsLowerCase) {
const map = Object.create(null)
const list = str.split(',')
for (let i = 0; i < list.length; i++) {
map[list[i]] = true
}
return expectsLowerCase
? val => map[val.toLowerCase()]
: val => map[val]
}
isBuiltInTag 校验是否是内置tag
export const isBuiltInTag = ('slot,component', true)
isReservedAttribute 校验是否是保留属性
export const isReservedAttribute = makeMap('key,ref,slot,slot-scope,is')
知识拓展
JSON.stringify
Bind、Apply、Call
感悟
看完源码之后，印象比较深刻的还是catched和makeMap工具函数，将某一类的数据统一化处理，实现了代码设计的高内聚、低耦合，提高了代码的可拓展性和简洁性
