vue-next 工具函数

前言

首先感谢若川大佬组织的活动，大家一起学习就是有动力。其实这篇笔记早就该写了，但是拖延症你懂的。这期学习的是 vue-next 的工具函数。我觉得起步非常好，万丈高楼平地起，千里之行始于足下。如果开始起步太高，太复杂，容易让人产生恐惧以及抵抗。记得某一位大佬说过，你想学好一个东西，首先不能有抵触心理，你要有亲和度，你要试着融入那件事情。这样你就会很容易成功，如果你自己都不认可，那干这件事情就很难受了。

如何读一个开源项目呢？

就像若川文章说的，其实大家或多或少都看过一些开源项目。但是看过和会看还是有很大区别的，当你学会看开源项目的时候你会学到很多知识，这里就简单描述下如何看一个开源项目

首先开源项目一般都有 REAME.md 或者.github/contributing.md 找到贡献指南，而贡献指南写了很多关于参与项目开发的信息，比如如何启动这个项目，项目的整体目录结构是什么样的。如何投入开发和需要哪些知识储备等等。反正是对这个项目的一个宏观上的必要信息的一个缩影描述。
分支

一般默认的是主分支 master，是当前用的分支。但也会有其他分支。比如有些项目每个分支都是一个大版本的迭代，在这里你可以找到每个版本的代码，可以用你想用的版本

issues

在这里就是大家遇到问题或者有新点子的提问交流区了。这个地方也很重要，当你在使用这个开源项目的时候遇到问题和有想法都可以在这里进行提问。这个地方也是你解决问题的一个手段。

pull requests（简称 pr，大家都会这样说）

这个是发现开源项目中有 bug 或者开发了新功能提交代码的请求，这就是让你成为开源项目维护者的地方。在这里写代码且被合并为主分支效果不言而喻，对大家百利无一害，当让可能对能力要求还是有一点的。毕竟改了文档错别字提个 pr 就说是开源的贡献者，有点那啥（虽然我就这样干过）

当然还有些其他的可以追溯到项目的信息的比如提交记录、打 tag 记录等等。都可以让你对这个项目有个详细的理解

开始读 vue-next 工具函数

__DEV__

这是一个环境变量的判断值，用来判断是否是开发环境。

as const

这被称为const断言。const断言告诉编译器为表达式推断出它能推断出的最窄或最特定的类型。如果不使用它，编译器将使用其默认类型推断行为，这可能会导致更广泛或更一般的类型。但是 TypeScript 的类型系统，包括类型断言和const断言，在构建出的 JavaScript 中被完全删除。因此，使用as const的程序和不使用as const的程序是一样的。它们让编译器更多地了解代码的意图，并能更准确地区分正确的代码和错误。

不过，在编译时，有一个明显的区别。让我们看看在上面的例子中省略 as const 会发生什么：

javascript

const args = [8, 5]
// const args: number[]
const num = Math.atan2(...args) // error! Expected 2 arguments, but got 0 or more.
console.log(num)

编译器看到 const args = [8, 5];，并推断出 number[]的类型。这是一个由 0 个或更多 number 类型的元素组成的可变数组。编译器不知道有多少或哪些元素。这样的推断通常是合理的；通常，数组内容意味着要以某种方式进行修改。如果有人想写 args.push(1)或 args[0]++，会使用 number[]类型。但下一行 Math.atan2(...args)导致了一个错误。Math.atan2()函数正好需要两个数值参数。但是编译器只知道 args 是一个数字数组。它完全忘记了有两个元素，因此就报错了。

将其与 as const 的代码进行比较：

javascript

const args = [8, 5] as const; // const args: readonly [8, 5]
const num = Math.atan2(...args); // okay console.log(num);

现在编译器推断 args 属于 readonly [8, 5]类型，一个 readonly 元组，其值正好是按此顺序排列的数字 8 和 5。具体来说，args.length 被编译器精确地称为 2。

这就足够下一行使用 Math.atan2()了。编译器知道 Math.atan2(...args)与 Math.atan2(8, 5)相同，这是一个有效的调用。

Object.freeze({})

冻结对象，让对象的最外层无法修改

isString=(val: unknown): val is string=>typeofval==='string'

使用 unknown 来定义类型，不知道传入的是什么类型，但是后面用 is 断言一下，说明我这参数期望是什么类型。也是让类型的范围更小

Object.create(null)

这个就是创建一个纯净的对象，在对象上不具有原型，在使用循环的时候性能更好，如果只是存值这个方式更好

这个就是判断全局对象的

javascript

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
        : {})
  )

小结

大概就这样吧，主要巩固下知识。除了代码方面的关注点，还应当关注下代码的规范和一些优化的小技巧，比如函数的命名 is---、has---等，做到了见名知意。对于阅读代码的人有很大的帮助，是需要学习的地方。

vue-next 工具函数 ​

前言 ​

如何读一个开源项目呢？ ​

开始读 vue-next 工具函数 ​

小结 ​

vue-next 工具函数

前言

如何读一个开源项目呢？

开始读 vue-next 工具函数

小结