前言

生活中，大家应该都遇到过进度条，有时候进度条的文字在进度条内部，当进度覆盖到文字的时候，会有一种反差，比如：同一个文字被进度覆盖的部分是白色字体，未被进度覆盖的是黑色字体，本文即是针对这种效果的实现。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

vite插件

什么是vite插件

vite 其实就是一个由原生 ES Module 驱动的新型 Web 开发前端构建工具。
vite 插件 就可以很好的扩展 vite 自身不能做到的事情，比如一些打包的数据展示，开发中或者打包中的数据处理等等。

插件 API

Vite 插件扩展了设计出色的 Rollup 接口，带有一些 Vite 独有的配置项。因此，你只需要编写一个 Vite 插件，就可以同时为开发环境和生产环境工作。

求值策略

在介绍Thunk函数之前，需要先介绍一下什么叫做求值策略，即函数的参数应该什么时候求值。

1
2
3
4

function test(num) {
 return num+1;
}
test(2+3);

类似上面这样将一个表达式作为参数传入函数，表达式应该什么时候计算？实际上可以分为两种情况：

• 一种是**传值调用(call by value)**，即表达式在传入函数之前就已经进行了计算，test(2+3)就相当于test(5)，js、C语言、JAVA等语言使用的是这种策略。
• 一种是**传名调用(call by name)**，即直接将表达式传入函数，只在需要的时候进行表达式的运算，Haskell(哈斯克尔)使用的是这种策略。
  传值调用比较简单和便于理解，但是在没有用到的时候，先进行了计算，可能造成性能浪费。

关于return

return 语句终止函数的执行，并返回一个指定的值给函数调用者

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function test() {
  for (let i = 0; i < 4; i++) {
    console.log(`before: ${i}`);
    if (i === 2) return;
    console.log(`after: ${i}`);
  }
  console.log(`result`);
}
test();
// before: 0
// after: 0
// before: 1
// after: 1
// before: 2

注意：自动分号补全规则会影响 return 语句。在 return 关键字和被返回的表达式之间不允许使用换行符。

什么是类型化数组（Typed Array）?

JavaScript 类型化数组（typed array）是一种类似数组的对象，并提供了一种用于在内存缓冲区中访问原始二进制数据的机制。

JavaScript 类型化数组中的每一个元素都是原始二进制值，而二进制值采用多种支持的格式之一（从 8 位整数到 64 位浮点数）。

什么是生成器函数？

function* 这种声明方式 (function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。
也可以使用构造函数 GeneratorFunction 或 function* expression 定义**生成器函数 **

语法

1
2
3
4
5

function* name([param[, param[, ... param]]]) { statements }
// name: 函数名
// param: 参数
// statements: 执行语句
// 声明方式可以为：function* name(){} 或者 function *name(){}

查看进程

ps