本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
学习目标
理解Vue3中的工具函数
代码准备
我主要学习了vue-next/packages/shared/src/index.ts这里面的工具函数。
babelParserDefaultPlugins babel 解析默认插件
export const babelParserDefaultPlugins = [
'bigInt',
'optionalChaining',
'nullishCoalescingOperator'
] as const
EMPTY_OBJ 空对象
export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
? Object.freeze({})
: {}
这个方法的作用是创建一个空对象，Object.freeze方法的作用是用来冻结一个对象，其本质上就是将对象的4个属性特征改为 false。更多细节请查考MDN文档，这里不作展开。
EMPTY_ARR 空数组
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []
这个方法的作用是创建一个空数组。
NOOP 空函数
export const NOOP = () => {}
可以用于对空函数的判断。
NO 永远返回 false 的函数
export const NO = () => false
isOn 判断字符串是不是 on 开头，并且 on 后首字母不是小写字母
const onRE = /^on[^a-z]/;
export const isOn = (key) => onRE.test(key);
onRE 是正则。^符号在开头，则表示是什么开头。
[^a-z]是指不是a到z的小写字母。
isModelListener 监听器
export const isModelListener = (key) => key.startsWith('onUpdate:');
主要是通过ES6新增的startWith方法来判断key是否以onUpdate开头。
extend 继承 合并
export const extend = Object.assign
这里的extend 相当于将Object中assign单独复制了出来，简化了书写，同时也存在浅拷贝的特性。
remove 移除数组的一项
export const remove = <T>(arr: T[], el: T) => {
const i = arr.indexOf(el)
if (i > -1) {
arr.splice(i, 1)
}
}
这种移除数组的效率是很低的，因为从当前数组中移除某一项，后面的数据都必须向前移动一个索引。于是，可以考虑使用拷贝的方式。
export const remove = (arr,el)=>{
const len = arr.length;
const newArr = [];
for(let i = 0; i < len; i++){
if(i!==el){
newArr.push(arr[i];
}
}
return newArr;
}
hasOwn 是不是自己本身所拥有的属性
const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (
val: object,
key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)
isArray 判断数组
export const isArray = Array.isArray
isArray([]); // true
const fakeArr = { __proto__: Array.prototype, length: 0 };
isArray(fakeArr); // false
fakeArr instanceof Array; // true
// 所以 instanceof 这种情况 不准确
用来判断一个对象是否是数组
isMap 判断是不是 Map 对象
export const isMap = (val: unknown): val is Map<any, any> =>
isSet 判断是不是 Set 对象
export const isSet = (val: unknown): val is Set<any> =>
toTypeString(val) === '[object Set]'
Set本身是一个构造函数，用来生成 Set 数据结构。
isDate 判断是不是 Date 对象
export const isDate = (val: unknown): val is Date => val instanceof Date
isFunction 判断是不是函数
export const isFunction = (val: unknown): val is Function =>
typeof val === 'function'
isString 判断是不是字符串
export const isString = (val: unknown): val is string => typeof val === 'string'
isSymbol 判断是不是 Symbol
export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
isObject 判断是不是对象
export const isObject = (val: unknown): val is Record<any, any> =>
val !== null && typeof val === 'object'
isPromise 判断是不是 Promise
export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
objectToString 对象转字符串
export const objectToString = Object.prototype.toString
toTypeString 对象转字符串
export const toTypeString = (value: unknown): string =>
objectToString.call(value)
toRawType 对象转字符串 截取后几位
export const toRawType = (value: unknown): string => {
// extract "RawType" from strings like "[object RawType]"
return toTypeString(value).slice(8, -1)
}
isPlainObject 判断是不是纯粹的对象
export const isPlainObject = (val: unknown): val is object =>
toTypeString(val) === '[object Object]'
isIntegerKey 判断是不是数字型的字符串key值
export const isIntegerKey = (key: unknown) =>
isString(key) &&
key !== 'NaN' &&
key[0] !== '-' &&
'' + parseInt(key, 10) === key
makeMap && isReservedProp
export const isReservedProp = /*#__PURE__*/ makeMap(
// the leading comma is intentional so empty string "" is also included
',key,ref,' +
'onVnodeBeforeMount,onVnodeMounted,' +
'onVnodeBeforeUpdate,onVnodeUpdated,' +
'onVnodeBeforeUnmount,onVnodeUnmounted'
)
cacheStringFunction 缓存
const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
const cache: Record<string, string> = Object.create(null)
return ((str: string) => {
const hit = cache[str]
return hit || (cache[str] = fn(str))
}) as any
}
hasChanged 判断是不是有变化
const invokeArrayFns = (fns, arg) => {
for (let i = 0; i < fns.length; i++)
{
fns[i](arg);
}
};
invokeArrayFns 执行数组里的函数
const invokeArrayFns = (fns, arg) => {
for (let i = 0; i < fns.length; i++)
{
fns[i](arg);
}
};
def 定义对象属性
export const def = (obj: object, key: string | symbol, value: any) => {
Object.defineProperty(obj, key, {
configurable: true,
enumerable: false,
value
})
}
toNumber 转数字
export const toNumber = (val: any): any => {
const n = parseFloat(val)
return isNaN(n) ? val : n
}
getGlobalThis 全局对象
let _globalThis: any
export const getGlobalThis = (): any => {
return (
_globalThis ||
(_globalThis =
typeof globalThis !== 'undefined'
? globalThis
: typeof self !== 'undefined'
? self
: typeof window !== 'undefined'
? window
: typeof global !== 'undefined'
? global
: {})
)
}
总结
我通过学习 shared 模块下的几十个工具函数，比如有：isPromise、makeMap、cacheStringFunction、invokeArrayFns、def、getGlobalThis等等。学会了Vue3中的基本工具函数，丰富了自己的见识，相信在自己以后的工作过程中会用到这些工具函数。
