第二期源码阅读活动 咕咕了一星期的文档 依旧很感谢若川大哥组织的源码阅读活动，以下为原文：https://juejin.cn/post/6994976281053888519

1.可以收获什么?

本次阅读的是Vue3源码中的一小部分内容—— 工具函数。一共20个，虽然看起来十分简单，但却可以学到

  • 通过build获得一份ts转js的文档
  • 通过生成SourceMap，在浏览器中调试代码
  • 非常基础但很有用的数据类型属性使用方法（尤其是Object）

在开始前，需要准备：

  • 目标代码库：[https://github.com/vuejs/vue-next](https://github.com/vuejs/vue-next)
  • 也许会需要用到的翻译插件（彩云小译），翻译出来的效果如下图，还不错

image.png

2.开始调试

首先可以在[contributing.md](https://github.com/vuejs/vue-next/blob/master/.github/contributing.md)中找到如何参与项目的开发、调试，了解当前项目的目录结构等详细的前期准备操作。

2.1 安装依赖，打包构建

正常情况下，我们可以直接在目录packages/shared/src/index中找到我们需要阅读的ts版本的源码文件。
但为了方便阅读，也可以通过yarn build进行打包构建，在完成打包构建后，会在packages/shared/dist/中发现以下三个文件：
image.png
他们都是打包产物：唯一的区别在于cjs、esm的区别：

  • cjs是通过require方式加载读取依赖，并且只能在Node中运行，不可在浏览器中运行
  • esm是用过import方式加载读取依赖，浏览器和Node都可以读取并加载。

    2.2 生成SourceMap调试源码

    这步实现起来较为简单，只需要在package.json 下的scripts对象中dev声明后追加 --scourcemap即可生成，生成的地址会在控制台中输出：
    image.png
    此时随便找一个页面将该文件引入，启动服务之后即可在控制台中进行打点阅读源码的操作。

    3. 工具🔧函数

    本次阅读的重头戏工具函数源码部分。
    这次选择阅读ts版本，想通过阅读这部分的源码加深ts的认识。
    开干！

    3.1 babelParserDefaultPlugins babel默认插件

    1. /**
    2. * List of @babel/parser plugins that are used for template expression
    3. * transforms and SFC script transforms. By default we enable proposals slated
    4. * for ES2020. This will need to be updated as the spec moves forward.
    5. * Full list at https://babeljs.io/docs/en/next/babel-parser#plugins
    6. */
    7. /*
    8. *用于模板表达式的@babel/parser插件列表转换和SFC脚本转换
    9. */
    10. export const babelParserDefaultPlugins = [
    11. 'bigInt',
    12. 'optionalChaining',
    13. 'nullishCoalescingOperator'
    14. ] as const
    这部分的as const是const断言，作用跟接下来会常出现的readonly功能类似，只不过这样使用时可以创建一个完整的readonly对象（会为对象中的每一个属性前都加上readonly），具体文章可以参考const断言。

    3.2 EMPTY_OBJ 空对象 EMPTY_ARR 空数组 NOOP 空函数 NO 永远返回 false 的函数

    ```typescript export const EMPTYOBJ: { readonly [key: string]: any } = _DEV ? Object.freeze({}) : {}

export const EMPTYARR = _DEV ? Object.freeze([]) : []

export const NOOP = () => {}

/**

  • Always return false. */ export const NO = () => false `` 这四部分声明都比较简单和短小<br />首先空对象和空数组会在操作前判断当前所处的环境，是开发环境还是生产环境。<br />Object.freeze`是一个冻结对象的操作，被冻结的对象无法被修改或添加新属性。
    空函数则是使用该属性时相当于使用了一个空的函数，可以用在判断或return
    永远返回false，顾名思义了

3.3 isOn 判断字符串是否以on开头，且on后首字母为大写字母

  1. const onRE = /^on[^a-z]/
  2. export const isOn = (key: string) => onRE.test(key)
  4. // ex
  5. isOn('onClick') // true
  6. isOn('onclick') // false

这部分涉及到简单的正则表达式：

  • ^符号在开头，表示为以什么东西开头，在其他地方是指非。同时$在结尾时，表示以什么东西结尾。
  • [^a-z]就为不是a-z的小写字母

3.4 isModelListener 监听器

  1. export const isModelListener = (key: string) => key.startsWith('onUpdate:')

这个方法为判断字符串是否以onUpdate:为开头
.startsWith为ES6新增方法

3.5 extend 合并

  1. export const extend = Object.assign

其实只是对对象合并的方法进行了一个封装

3.6 remove 去除

  1. export const remove = <T>(arr: T[], el: T) => {
  2.   const i = arr.indexOf(el)
  3.   if (i > -1) {
  4.     arr.splice(i, 1)
  5.   }
  6. }

传入一个数组和一个元素，判断该元素是否存在数组中，若存在，则删除
Tips: 使用splice虽然可以很方便的进行数组元素的删除，但删除后会将其他的元素位置进行移动，若要处理很庞大的数组项目时，则会造成性能的大量消耗。因此在这部分可以考虑将移除改为置为NULL

3.7 hasOwn 判断是否为本身所拥有的属性

  1. const hasOwnProperty = Object.prototype.hasOwnProperty
  2. export const hasOwn = (
  3.   val: object,
  4.   key: string | symbol
  5. ): key is keyof typeof val => hasOwnProperty.call(val, key)

通过对象自带的hasOwnProperty API判断当前传入的key是否为obj本身的属性
这部分当中还涉及到我不认识的ts语法 is keyof typeof
通过参考同组的纪年小姐姐文档后，发现这是三个ts语法is、keyof、typeof，万能的百度告诉我：

  • is: 类型保护，可以通过is进一步缩小变量的类型
  • keyof: 返回一个类型的所有key组成的联合类型
  • typeof: 获取一个变量或者对象的类型

3.8 is… 判断是否为某种类型

  1. // 判断是否为数组
  2. export const isArray = Array.isArray
  4. // 判断是否为Map对象
  5. export const isMap = (val: unknown): val is Map<any, any> =>
  6.   toTypeString(val) === '[object Map]'
  8. // 判断是否为Set对象 
  9. export const isSet = (val: unknown): val is Set<any> =>
  10.   toTypeString(val) === '[object Set]'
  12. // 判断是否为Date对象
  13. export const isDate = (val: unknown): val is Date => val instanceof Date
  15. // 判断是否为函数
  16. export const isFunction = (val: unknown): val is Function =>
  17.   typeof val === 'function'
  19. // 判断是否为字符串
  20. export const isString = (val: unknown): val is string => typeof val === 'string'
  22. // 判断是否为Symbol
  23. export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
  25. // 判断是否为对象(不包括null)
  26. export const isObject = (val: unknown): val is Record<any, any> =>
  27.   val !== null && typeof val === 'object'
  29. // 判断是否为Promise
  30. export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
  31.   return isObject(val) && isFunction(val.then) && isFunction(val.catch)
  32. }

3.9 toTypeString 对象转字符串，以及附带的判断函数

  1. // 对象转字符串
  2. export const objectToString = Object.prototype.toString
  3. export const toTypeString = (value: unknown): string =>
  4.   objectToString.call(value)
  6. // 对象转字符串并截取第八位开始到最后一位
  7. //这个函数的作用为可以判断更多的类型种类
  8. export const toRawType = (value: unknown): string => {
  9.   // extract "RawType" from strings like "[object RawType]"
  10.   return toTypeString(value).slice(8, -1)
  11. }
  13. // 判断是否为纯纯的对象
  14. export const isPlainObject = (val: unknown): val is object =>
  15.   toTypeString(val) === '[object Object]'

3.10 isIntegerKey 判断是否为数字型的字符串key

  1. export const isIntegerKey = (key: unknown) =>
  2.   isString(key) &&
  3.   key !== 'NaN' &&
  4.   key[0] !== '-' &&
  5.   '' + parseInt(key, 10) === key

首先判断key是否为字符串类型，接着排除key不为NaN值，继续排除负值，最后将key通过parseInt方式转换为数字并与通过+隐式转换为字符串，最后与原本的key做对比

3.11 判断是否为保留属性

  1. /**
  2.  * Make a map and return a function for checking if a key
  3.  * is in that map.
  4.  * IMPORTANT: all calls of this function must be prefixed with
  5.  * \/\*#\_\_PURE\_\_\*\/
  6.  * So that rollup can tree-shake them if necessary.
  7.  */
  8. export function makeMap(
  9.   str: string,
  10.   expectsLowerCase?: boolean
  11. ): (key: string) => boolean {
  12.   const map: Record<string, boolean> = Object.create(null)
  13.   const list: Array<string> = str.split(',')
  14.   for (let i = 0; i < list.length; i++) {
  15.     map[list[i]] = true
  16.   }
  17.   return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
  20. export const isReservedProp = /*#__PURE__*/ makeMap(
  21.   // the leading comma is intentional so empty string "" is also included
  22.   ',key,ref,' +
  23.     'onVnodeBeforeMount,onVnodeMounted,' +
  24.     'onVnodeBeforeUpdate,onVnodeUpdated,' +
  25.     'onVnodeBeforeUnmount,onVnodeUnmounted'
  26. )

这里的操作逻辑为，传入一个以逗号分隔的字符串，通过makeMap函数将字符串转化为数组，创建一个空对象，并且循环将这个key赋值进空对象中，最后返回一个包含参数val的值，检查参数val是否存在在字符串中

3.12 cacheStringFunction 缓存字符串函数

  1. // 缓存的主函数，实现效果与makeMap类似
  2. const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
  3.   const cache: Record<string, string> = Object.create(null)
  4.   return ((str: string) => {
  5.     const hit = cache[str]
  6.     return hit || (cache[str] = fn(str))
  7.   }) as any
  8. }
  10. // 连字符 - 转换为小驼峰 
  11. const camelizeRE = /-(\w)/g
  12. /**
  13.  * @private
  14.  */
  15. export const camelize = cacheStringFunction((str: string): string => {
  16.   return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
  17. })
  19. // 大写字母转化为 - 连字符
  20. const hyphenateRE = /\B([A-Z])/g
  21. /**
  22.  * @private
  23.  */
  24. export const hyphenate = cacheStringFunction((str: string) =>
  25.   str.replace(hyphenateRE, '-$1').toLowerCase()
  26. )
  29. // 首字母转大写
  30. /**
  31.  * @private
  32.  */
  33. export const capitalize = cacheStringFunction(
  34.   (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
  35. )
  37. // 给输入的字符串前加入on，并将输入的第一个字符串改为大写
  38. /**
  39.  * @private
  40.  */
  41. export const toHandlerKey = cacheStringFunction((str: string) =>
  42.   str ? `on${capitalize(str)}` : ``
  43. )

3.14 hasChanged 判断是否有变化

  1. // compare whether a value has changed, accounting for NaN.
  2. export const hasChanged = (value: any, oldValue: any): boolean =>
  3.   !Object.is(value, oldValue)

Object.is 为输入两个值，返回这两个值是否为同一个值的

3.15 invokeArrayFns 执行数组中的函数

  1. export const invokeArrayFns = (fns: Function[], arg?: any) => {
  2.   for (let i = 0; i < fns.length; i++) {
  3.     fns[i](arg)
  4.   }
  5. }

可以实现一次执行多个函数的操作

3.16 def 定义一个不可枚举的对象

  1. export const def = (obj: object, key: string | symbol, value: any) => {
  2.   Object.defineProperty(obj, key, {
  3.     configurable: true,
  4.     enumerable: false,
  5.     value
  6.   })
  7. }

3.17 toNumber 转换为数字

  1. export const toNumber = (val: any): any => {
  2.   const n = parseFloat(val)
  3.   return isNaN(n) ? val : n
  4. }

3.18 getGlobalThis 全局对象

  1. let _globalThis: any
  2. export const getGlobalThis = (): any => {
  3.   return (
  4.     _globalThis ||
  5.     (_globalThis =
  6.       typeof globalThis !== 'undefined'
  7.         ? globalThis
  8.         : typeof self !== 'undefined'
  9.         ? self
  10.         : typeof window !== 'undefined'
  11.         ? window
  12.         : typeof global !== 'undefined'
  13.         ? global
  14.         : {})
  15.   )
  16. }

简单来说就是根据不同的环境，采用不同的参数指向全局this

大佬的解释：
获取全局 this 指向。
初次执行肯定是 _globalThis 是 undefined。所以会执行后面的赋值语句。
如果存在 globalThis 就用 globalThis。MDN globalThis
如果存在self，就用self。在 Web Worker 中不能访问到 window 对象，但是我们却能通过 self 访问到 Worker 环境中的全局对象。
如果存在window，就用window。
如果存在global，就用global。Node环境下，使用global。
如果都不存在，使用空对象。可能是微信小程序环境下。
下次执行就直接返回 _globalThis，不需要第二次继续判断了。这种写法值得我们学习。

4.总结

  • 通过这些工具函数，对vue的模板语法解析有了一点点点的了解
  • 工具函数除了达到满足开发需求、提升开发效率外，还可以达到优化性能的目的
  • 学习到了没了解过的TS语法，以及对象的语法