如何通过自动化流程保证前端代码质量

`Vue3`中有三大特性**响应式**、**运行时**、**编译器**，我将分三篇文章进行讲解。本篇将讲解`Vue3`的响应式篇章，会依次讲解以下内容
1. `Proxy`数据劫持解决了`definePrototype`的什么问题
2. `依赖收集的设计思路`
3. `reactive`、`ref`、`computed`、`scheduler`、`watch`的实现
带你手撸`Vue3`响应式。

本文所有代码 [vue3_study](https://github.com/guojingwen/frontend-project/tree/main/vue3_study)

![image.png](https://blog.warmplace.cn/static/img/93de6588d2c3b55cf8b4bf3409ac4152.image.webp)



# 准备工作
- 考虑实现尽可能与源码相符合， 本文的目录结构与官方目录结构完全一致，且使用`TS`编写代码，使用`Rollup`构建。如果不熟悉`TS`的同学可以使用`tsc`命令转一下，后面我会提供一个脚本`TODO`，可以直接将`TS`转换为`JS`（不会进行`babel`转移）
- 另一方面，为了照顾读者的理解，本文代码实现尽可能抛弃边缘情况，尽可能减少函数嵌套调用层次。
- 关于官方源码调试![image.png](https://blog.warmplace.cn/static/img/1334b427c6614870a3da658cbf4abffa.image.webp)


[vue3_study/1.begin](https://github.com/guojingwen/frontend-project/tree/main/vue3_study/1.begin)这里是一个干净的项目工程骨架

![image.png](https://blog.warmplace.cn/static/img/3cbb4b8fea342c55479f1d711afa5783.image.webp)

我先说一下大致情况
1. 考虑避免反复安装依赖，我将`node_modules`安装到了外层（`node_module`有递归往上查找的特性）
2. `packages/*/src` 借助`tsconfig.js`把路径映射为 `"@vue/*"` 这样通过`@vue/`引入模块了。
    - `packages/*/src` 每个目录内容都一样只有一个`index.ts`，里面没内容。
3. 推荐使用`npm`安装，（我开始是用`pnpm`安装，在测试`computed`时遇到了问题）
4. 启动 `npm run dev`, `demo` 在 `vue/examples/*.html` 借助 vscode `Live Server`插件启动

基本情况就这些， 具体看代码吧!

# proxy数据劫持
首先来看一下`vue2`响应式弊端：
- 响应化过程需要递归遍历，消耗较大 
- 新加或删除属性无法监听
- 数组响应化需要额外实现 
- `Map`、`Set`、`Class`等无法响应式 
- 修改语法有限制

`proxy`实现数据响应性`demo`
```js
const isObject = val => val !== null && typeof val === 'object'
const toProxy = new WeakMap() // obj:observed

function reactive(obj) {
  if (!isObject(obj)) return obj
  if (toProxy.has(obj)) return toProxy.get(obj)

  const observed = new Proxy(obj, {
    get(target, p, receiver) {
      const res = Reflect.get(target, p, receiver)
      // return res;
      // 体验Proxy惰性劫持
      return isObject(res) ? reactive(res) : res
    },
    set(target, p, value, receiver) {
      const result = Reflect.set(target, p, value, receiver)
      console.log('set', p, value, result)
      return result
    },
    deleteProperty(target, p) {
      const res = Reflect.deleteProperty(target, p)
      console.log('delete', p, res)
      return res
    }
  })
  toProxy.set(obj, observed)
  return observed
}

var state = reactive({
  foo: 'foo',
  bar: { a: 1 }
})
// 1.获取
state.foo // ok
// 2.设置已存在属性
state.foo = 'fooooooo' // ok
// 3.设置不存在属性
state.dong = 'dong' // ok
// 4.删除属性
delete state.dong // ok
// 5.嵌套对象也支持
state.bar.a = 3
```
总结：
- `proxy`数据劫持是惰性（用时）劫持， 性能要好很多
- `proxy`远比存取器劫持方式强大很多，支持删除属性、新增属性、属性检测、对象遍历等
- 修改语法无限制（数组的用法与对象完全一致）

## 为什Proxy要搭配Reflect使用？
```js
// 思考 为什 Proxy 要搭配 Reflect 使用呢？
// 通过查看mdn文档知道
// Reflect相关的方法最后一个参数 receiver 是绑定this的意思
var obj = {
  firstName: '张',
  lastname: '三',
  get fullName() {
    return this.firstName + this.lastname
  }
}
var observed1 = new Proxy(obj, {
  get(target, p, receiver) {
    console.log('触发get', p)
    return target[p]
  },
  set(target, p, value, receiver) {
    target[p] = value
    return true
  }
})
observed1.fullName
// 打印 “触发get fullName” // 只打印一次

var observed2 = new Proxy(obj, {
  get(target, p, receiver) {
    const res = Reflect.get(target, p, receiver)
    console.log('触发get', res)
    return res
  },
  set(target, p, value, receiver) {
    const res = Reflect.set(target, p, value, receiver)
    console.log('set', p, value)
    return res
  }
})
observed2.fullName
// 打印 触发get 张
// 打印 触发get 三
// 打印 触发get 张三
```

# 依赖收集设计思路
建立响应数据`key`和更新函数之间的对应关系。

用法：
```js
const state = reactive({
    foo: 'Foo'
});
// 设置响应函数
effect(() => console.log(state.foo)) ;
// 用户修改关联数据会触发响应函数
state.foo = 'xxx';
```
设计思路<br>
实现三个函数：
- `effect`：将回调函数保存起来备用，立即执行一次回调函数触发它里面一些响应数据的`getter`
- `track`：`getter`中调用`track`，把前面存储的回调函数和当前`target`，`key`之间建立映射关系 
- `trigger`：`setter`中调用`trigger`，把`target`,`key`对应的响应函数都执行一遍

![image.png](https://blog.warmplace.cn/static/img/efc9fa5f59047a81319f6b768a4c5f12.image.webp)

`target`,`key`和响应函数映射关系

![image.png](https://blog.warmplace.cn/static/img/affb603548016ddb96c823597efdaf28.image.webp)

# reactive实现
1. 先上测试用例
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="../dist/vue.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

<script>
    const {reactive, effect} = Vue;
    const obj = reactive({
        name: '张三'
    });
    effect(() => {
        document.getElementById('app').innerText = obj.name
    });
    setTimeout(() => {
        obj.name = '李四';
    }, 2000);
</script>
</html>
```
2. `reactivity/reactive.ts`
```ts
import { trigger, track } from './effect'

// Map缓存 obj:observed
export const reactiveMap = new WeakMap<object, any>()

export function reactive(target: object): any {
  if (reactiveMap.has(target)) {
    return reactiveMap.get(target)
  }
  const observed = new Proxy(target, {
    get(target: object, p: string | symbol, receiver: object) {
      const res = Reflect.get(target, p, receiver)
      track(target, p)
      return res
    },
    set(target: object, p: string | symbol, value: unknown, receiver: object) {
      const res = Reflect.set(target, p, value, receiver)
      trigger(target, p)
      return res
    }
  })
  reactiveMap.set(target, observed)
  return observed
}
```
3. `reactivity/effect.ts`
```js
export function effect<T = any>(fn: () => T) {
  const _effect = new ReactiveEffect<T>(fn)
  _effect.run()
}

/**
 * targetMap 大致结构如下
 * {target: Map<{key: Set<Effect>}>}
 *  target | depsMap
 *  	obj  |   key  |  Dep
 * 						 k1   | effect1,effect2...
 * 						 k2   | effect3,effect4...
 */
const targetMap = new WeakMap<object, Map<any, Set<ReactiveEffect>>>()

export let activeEffect: ReactiveEffect | undefined

export class ReactiveEffect<T = any> {
  constructor(public fn: () => T) {
    this.fn = fn
  }
  run() {
    activeEffect = this
    this.fn()
  }
}

export function track(target: object, p: unknown) {
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(p)
  if (!dep) {
    depsMap.set(p, (dep = new Set()))
  }
  dep.add(activeEffect!)
}

export function trigger(target: object, p: unknown) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const dep = depsMap.get(p)
  if (!dep) return
  triggerEffects(dep)
}

export function triggerEffects(effects: Set<ReactiveEffect>) {
  for (let effect of effects) {
    effect.run()
  }
}
```
**注： `packages/*/src`文件夹的所有文件都有通过`index.ts`聚合导出，如`packages/reactivity/src/index.ts`**
```ts
export * from './reactive';
export * from './effect';
```
**后面不在强调这个细节**

运行效果

![](https://blog.warmplace.cn/static/img/2e88a39b6fdbca96ab0cba637c0d1412.2.gif)

# ref实现
- 官方`ref`支持 复杂数据（对象类型） 和简单数据（基本类型）
- 我们先实现 复杂数据的支持，在实现简单数据的支持
- 复杂数据的支持是借助`reactive`的依赖收集

## 复杂数据的支持
这一步不难我先上代码
- `reactivity/ref.ts`
```ts
import { isObject } from '@vue/shared'
import { activeEffect, ReactiveEffect } from './effect'
import { reactive } from './reactive'

export function ref(value: unknown) {
  return new RefImpl(value)
}

class RefImpl<T> {
  private _value: T
  private _rawValue: T
  public dep?: Set<ReactiveEffect> = undefined
  constructor(value: T) {
    this._value = toReactive(value)
    this._rawValue = value
  }
  get value() {
    // 收集依赖
    if (activeEffect) {
      this.dep ??= new Set<ReactiveEffect>()
      this.dep.add(activeEffect)
    }
    return this._value
  }
}

export const toReactive = <T extends unknown>(value: T): T =>
  isObject(value) ? reactive(value as object) : value
```

运行效果
![](https://blog.warmplace.cn/static/img/d00674c4897a55b506ec23de090554cc.3.gif)

## 原生类型数据的支持
我们在修改一下`ref`让它支持简单数据

![image.png](https://blog.warmplace.cn/static/img/802d0dfa484d2bfc90aa035f182ccfeb.image.webp)

运行效果
![](https://blog.warmplace.cn/static/img/9db28439aa8de9b0c17b00c9c8deb2df.3.1.gif)

# computed实现

思路
1. 先实现展示功能
2. 再实现响应式

## 先实现展示功能
- `reactivity/computed.ts`
```ts
import { ReactiveEffect, activeEffect } from './effect'

export function computed(getterOrOptions) {
  // 这里只考虑简单情况 即 getterOrOptions 为 getter
  const getter = getterOrOptions
  return new ComputedRefImpl(getter)
}

export class ComputedRefImpl<T> {
  public dep?: Set<ReactiveEffect> = undefined
  private _value!: T
  private readonly effect: ReactiveEffect<T>
  constructor(getter) {
    this.effect = new ReactiveEffect(getter)
  }
  get value() {
    this.dep ??= new Set<ReactiveEffect>()
    this.dep.add(activeEffect!)
    this._value = this.effect.run()
    return this._value
  }
}

```

![image.png](https://blog.warmplace.cn/static/img/699b87cf59392a33453c6b46738a157a.image.webp)

运行效果

![image.png](https://blog.warmplace.cn/static/img/17280fcb1b37774fc5a39145e4cf78c0.image.webp)

## 响应式的实现
- `reactivity/computed.ts` 改动如下
![image.png](https://blog.warmplace.cn/static/img/d1976d49992c6a601d2e9df744b10e70.image.webp)

- `reactivity/effect.ts`改动
![image.png](https://blog.warmplace.cn/static/img/eba069efc5bef351371e6f76a1cb5ea0.image.webp)
![image.png](https://blog.warmplace.cn/static/img/33abb7e8de0f3b69ac820358a4646f4e.image.webp)

运行效果

![](https://blog.warmplace.cn/static/img/4a9591036522fc130bf9e289173ee7e8.5.gif)

这一步理解起来还是比较费劲的，建议用断点调试多调试几遍

![image.png](https://blog.warmplace.cn/static/img/de34d2cda5d1135747cb200afcc2557b.image.webp)

我说一下大致流程

1. 首先第一步分别创建了 一个`ReactiveEffect`实例， 就是 `obj`
2. 第二步创建了一个`ComputedRefImpl`实例， 即`computedObj`。`computedObj`有个`effect`属性， 与 `obj`类型相同，不同点是前者（`computedObj.effect`）会标识`computed`属性且它的`effect`属性拥有`scheduler`方法，这样 `trigger()`是调用的是 `effect.scheduler()` 而不再是 `effect.run()` 
3. 执行 `effect()` 完成依赖收集，targetMap依赖如下
    - ![](https://blog.warmplace.cn/static/img/5793560b3fcf55ab1d34016e51bff96d.clipboard-2023-08-22.webp)
5. 最后一步，算是唯一难理解的
    - `obj.name`赋值 触发 `setter` ---> `triggger()` ---> 执行副作用，就是上图的`ReactiveEffect`实例 即`computedObj.effect.sheduler()` 即 `effect的第一个参数`
    - ![](https://blog.warmplace.cn/static/img/19abb594f9585ab62345a8e530dbe6f9.image.webp)
    - 注意`ComputedRefImpl`实例（这里是`computedObj`）有个标志`_dirty`，初始值是`true`, 在第三步的时候已经触发getter，完成依赖收集后变成`false`了， 由于现在执行依赖收集副作用触发`.effect.sheduler()`方法再次把`_dirty`标记置为`true`并执行它的副作用（effect的第一个参数）
    - ![image.png](https://blog.warmplace.cn/static/img/db47ba54bc83fedec9c2bfe5849987ba.image.webp)
    - 这时又触发`ComputedRefImpl`实例的`getter`, 再次执行副作用，这时副作用是指 第二步 `computed()`的第一个参数`() => '姓名：' +  obj.name`
    - 接着触发 代理对象`obj`的`getter()`， 进行副作用收集，其实前面第三步已经收集了，这里等于什么都没做，逐级回退调用栈，函数就执行结束了

文采不够，解释的比较牵强，源码的艺术只可意会不可言谈😂，还是要多调试自己品味才行。 

总结： `computed`也是要完成依赖收集，`setter` 触发副作用从它开始逐级执行副作用（`effect的回调参数`  --> `computed的回调参数`  --> 从`reactive代理对象`取值返回），是一个递归过程

## computed的缓存特性
我们在改一下案例 测试computed的缓存性

![image.png](https://blog.warmplace.cn/static/img/ea772d3d3f5e51b35d36fa33b2024c05.image.webp)

断点调试发现 `computedObj.dep` 有两个 `ReactiveEffect`的实例


![image.png](https://blog.warmplace.cn/static/img/a12a2c302b96fb382dc659ba23b49c28.image.webp)
第一个副作用是`effect()`里面的回调参数 第二个副作用是`computed()`的回调参数

当执行到定时器中的代码 触发setter, 执行依赖（前面分析过只有一个依赖即`computed()`生成的的副作用）

执行`scheduler()`将`_dirty`标记为true,

第一次执行`computedObj.value` 由于`_dirty`为`false` 再执行它的副作用， 这里就造成递归，正确的做法是先执行存值器 将`_dirty`标记为`false` 再执行`schedule()` 这样就不会造成死循环了

如果我们先执行`computedObj.dep`中的`schedule()` 

![image.png](https://blog.warmplace.cn/static/img/e781c74d6017d473c39620814618433c.image.webp)

第一次执行`computedObj.value`，`_dirty`为`false` 再执行它的副作用， 这次是先执行了`schedule()` `_dirty`为`false` 不在执行副作用，就结束了。

`computed`的缓存性如何体现呢？
1. 第一次执行`computedObj.value`，进入存值器，这时`_dirty`为`true` 会执行副作用重新生成值，
2. 第一次执行`computedObj.value`，进入存值器，这时`_dirty`为`false` 就不在重新计算值了。

> 注： 这一块很难解释， 耐心多调试方能理解。

这一次运行就正常了
![6.gif](https://blog.warmplace.cn/static/img/2450052a7c9392b9a19cfae4189e239d.6.gif)

# watch
因为watch默认是懒执行（`immediate: false`）的, 所以我们effect要适配，让它支持懒执行。

## 先实现effect的懒执行
![image.png](https://blog.warmplace.cn/static/img/9b1e4f594d66b283ad9ccc03099a7a14.image.webp)

effect支持scheduler参数

![image.png](https://blog.warmplace.cn/static/img/3882f904ddbaf9bb7a960c775dba8b71.image.webp)

scheduler的完整实现
前面的调度方法是同步执行，如果我们想异步执行，`Vue`提供了`queuePostFlushCb`，这个方法比较独立，是一个不错的手写题

- `runtime-core/src/scheduler.ts`
```ts
const cbs: Function[] = []
export function queuePostFlushCb(cb: Function) {
  cbs.push(cb)
  queueFlush()
}

let isFlushPending = false
async function queueFlush() {
  // console.log('queueFlush', isFlushPending)
  if (!isFlushPending) {
    isFlushPending = true
    await Promise.resolve()
    let _cbs = [...new Set(cbs)]
    for (let cb of _cbs) {
      cb()
    }
    cbs.length = 0
    isFlushPending = false
  }
}
```

- 测试用例如下
```js
const {
    reactive,
    effect,
    queuePostFlushCb,
} = Vue

const obj = reactive({
    count: 1
})

effect(() => {
    // 初始化执行
    console.log(obj.count);
}, {
    scheduler(){ 
      // 发生变更执行这里
      queuePostFlushCb(() => {
        console.log(obj.count);
      })
    }
})

obj.count = 2
obj.count = 3
// 打印 1
// 打印两次 3
```
运行结果与前面一致， 这里就不截图了

## watch基本骨架
`Vue3`的`watch` 是放在 `runtime-core/src/apiWatch.ts`文件中的。

先来实现`watch`的骨架和`immediate`功能
- `runtime-core/src/apiWatch.ts`
```ts
import { ReactiveEffect, isReactive } from '@vue/reactivity'
import { queuePostFlushCb } from './scheduler'

export function watch(
  source: any,
  cb: Function,
  { immediate, deep }: WatchOptions = {}
) {
  let getter: () => any
  if (isReactive(source)) {
    getter = () => source
    deep = true
  } else {
    getter = () => {}
  }

  let oldValue = {}
  const job = () => {
    const newValue = effect.run()
    if (deep || Object.is(newValue, oldValue)) {
      cb(newValue, oldValue)
      oldValue = newValue
    }
  }

  const scheduler = () => queuePostFlushCb(job)
  const effect = new ReactiveEffect(getter, scheduler)
  if (immediate) {
    job()
  } else {
    oldValue = effect.run()
  }
  return () => effect.stop()
}

export interface WatchOptions {
  immediate?: boolean
  deep?: boolean
}
```
在看一下测试用例和效果

![image.png](https://blog.warmplace.cn/static/img/fc2ad8270d9c994caa51e5a2653beb0b.image.webp)

## watch完整实现
前面的案例`watch`没有实现响应式，为什么呢？
其实是因为 `watch`的`effect`(就是`watch`的第二个参数)没有触发`getter`, 我们只需递归遍历一下watch监听的对象即可以完成依赖收集

修改 `runtime-core/src/apiWatch.ts` 增加代码如下
![image.png](https://blog.warmplace.cn/static/img/cf9cb96d85f3b13eb5563bec3b2e9c90.image.webp)

![image.png](https://blog.warmplace.cn/static/img/95fe6c1823a56eded6b63f5630b10315.image.webp)

在看一下测试用例

![image.png](https://blog.warmplace.cn/static/img/99d663e929c765882b56609b3d9c8157.image.webp)

Vue3源码学习一 （响应式）

本文对TS背景进行简单的介绍，用精简的语言和案例阐述了TS的常用类型，是TS入门学习很好的一篇文章。本文主要参考 [《ts入门教程》](https://ts.xcatliu.com/) 一书和 [《TS常见类型》](https://blog.csdn.net/zxl1990_ok/article/details/125205351)一文并加入了一些自己的思考和实践及整理了一些比较基础的面试题。

# 常见面试题
- TS有哪些基本类型
- `void`和`undefined`的区别
- `unknow`与`any`类型的区别
- `never`类型有了解吗？TS最底层的类型是什么？

带着问题开始本篇文章的阅读吧


# TypeScript介绍
- `TypeScript` 是由微软开发的一款开源的编程语言。
- `TypeScript` 是 `Javascript` 的超级，遵循最新的 `ES6+` 规范。`TypeScript` 扩展了 `JavaScript`的语法。
- TypeScript 更像后端 `Java`、`C#`这样的面向对象语言可以让 `JS` 开发大型企业项目。
- 谷歌也在大力支持 `Typescript` 的推广，谷歌的 `Angular2.x+`就是基于 `Typescript` 语法。
- 最新的 `Vue`、`React` 也可以集成 `TypeScript`。

![](https://blog.warmplace.cn/static/img/f162343843c08008a75e82ef3bd6df20.image.webp)

## 设计理念
有过一定TS经验的同学可以了解一下TS的设计理念，这有助于我们更好的学习和理解TypeScript。

[官方TS设计理念介绍](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals)

## 安装使用
- `npm install -g typescript`
- `tsc --init` 生成配置文件 `tsconfig.json`
- `tsc helloworld.ts`  生成 `helloworld.js`
- [ts在线编译](https://c.runoob.com/compile/5577/)

- 运行和断点调试 要安装 `ts-node`
    - `npm install ts-node`
    - 运行TS `npx ts-node helloword.ts`
    - 调试只能在编辑器里调试，跟JS调试一样，
    - （VSCode点击右上角的 `运行和调试` --> `JavaScript调试终端`）

## 编辑器实时编译
### webstorm
- 打开`Preferences` > `Languages & Frameworks` > TypeScript配置如下
- ![image.png](https://blog.warmplace.cn/static/img/8d6685aa8dde530a3097819b3830c96e.image.webp)
- 点击弹窗右下角 OK ，此时会生成 helloWorld.js, 选中它分屏 
- ![image.png](https://blog.warmplace.cn/static/img/b620b720c667437dd30f2ae7690a624e.image.webp)
- ![预览效果](https://static.warmplace.cn/blog-resources/ts/ty.gif)

### vscode配置
点击菜单 任务-运行任务 点击 `tsc:监视-tsconfig.json` 然后就可以自动生成代码了

![image.png](https://blog.warmplace.cn/static/img/3bf68be902738243f37dcdf3cedd8853.image.webp)

## 为什么要使用TypeScript
1. **TypeScript 增加了代码的可读性和可维护性**
    - **类型系统实际上是最好的文档**，大部分的函数看看类型的定义就可以知道如何使用了
    - 可以**在编译阶段就发现大部分错误**，这总比在运行时候出错好
    - **增强了编辑器和 IDE 的功能**，包括代码补全、接口提示、跳转到定义、重构等
1. **TypeScript 非常包容**
    - `TypeScript` 是 `JavaScript` 的超集，`.js` 文件可以直接重命名为 `.ts` 即可
    - 即使不显式的定义类型，也能够自动做出类型推论
    - 可以定义从简单到复杂的几乎一切类型
    - 即使 `TypeScript` 编译报错，也可以生成 `JavaScript` 文件
    - 兼容第三方库，即使第三方库不是用 `TypeScript` 写的，也可以编写单独的类型文件供 `TypeScript` 读取
1. **TypeScript 拥有活跃的社区**
    - 大部分第三方库都有提供给 `TypeScript` 的类型定义文件
    - Google 开发的 `Angular2` 就是使用 `TypeScript` 编写的
    - `TypeScript` 拥抱了 `ES6` 规范，也支持部分 `ESNext` 草案的规范

## TypeScript 的缺点
任何事物都是有两面性的，我认为 `TypeScript` 的弊端在于：
1. 有一定的学习成本，需要理解接口（`Interfaces`）、泛型（`Generics`）、类（`Classes`）、枚举类型（`Enums`）等前端工程师可能不是很熟悉的概念
1. 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，`TypeScript` 能够减少其维护成本
1. 集成到构建流程需要一些工作量
1. 可能和一些库结合的不是很完美

## TypeScrit 特性
- 静态类型（编译时还是运行时进行类型检查）
- 弱类型 （是否允许隐式类型转换）
- **IDE代码补全和接口提示**等功能
    - 一些第三方库原生支持了 `TypeScript`，在使用时就能获得代码补全了，比如 `Vue 3.0`
    - 如果三方库原生不支持 `TypeScript`，以通过安装社区维护的类型声明库 比如`npm install --save-dev @types/react`
- **完全兼容 JavaScript** 的，它不会修改 `JavaScript` 运行时的特性。
- 可以编译为 `JavaScript`
- 配置丰富，类型检查的严格程度由你决定
- `TypeScript`与标准同步发展

# TypeScript中的原始数据类型
- 与JS中的原始类型相对应`boolean`、`number`、`string`、`null`、`undefined`、`Symbol`、`BigInt`
- 包装类型也与JS对应（包装类型不是原始类型）
- `void`
- `any`
- `unknow`
- `never`

## boolean number string
- 即使不显式的定义类型，也能够自动做出类型推论
- 声明未赋值等价于 自动推断为`any`类型
```ts
// 不显式的定义类型，也能够自动做出类型推论 
let age = 1 // let age: number

age = 'zhangsan' // 报错 不能将类型“string”分配给类型“number”。ts(2322)

// 声明未赋值 自动推断为any类型
let person; // let person: any
```
补充知识点：**类型推论**

`TypeScript` 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

例如 `let age = 1` 会自动推断为 `age: number`

## 包装对象
我们知道在 `JS` 中存在包装对象的概念。

当你使用原始类型（字符串、数字、boolean值）调用属性或方法是，`JS`会创建一个临时的包装对象，使你能够访问课操作原始数据类型的属性和方法。这个过程称为自动包装。

在`TS`中也存在包装对象
- 原始类型兼容对应的对象包装类型， 对象类型不兼容对应的原始类型。 （子类可以赋值给父类，反之不行，原始类型是父类）

```ts
var str = "Hello";
var strObject = new String(str); // 创建一个字符串包装对象
console.log(strObject.length); // 访问字符串的长度属性
console.log(str.length); // 访问字符串的长度属性

// 在TS中也存在包装对象
// 报错 Type 'Boolean' is not assignable to type 'boolean'.
let createdByNewBoolean: boolean = new Boolean(1); 
```
## null 和 undefined
- 与`void`的区别是 `undefined`和`null` 是所有类型的子类型
    - 也就是说 `undefined` 类型的变量，可以赋值给其他类型的变量(未指定`strictNullChecks`时)
```ts
// 这样不会报错
let num: number = undefined;

let u: void;
let num2: number = u; // 不能将类型“void”分配给类型“number”。ts(2322)
```

注意： 
`tsconfig.json`指定了`"strictNullChecks":true` , `null` 和 `undefined` 只能赋值给 `any`、 `unknown` 和它们各自的类型, `undefined`可以赋值给`void`类型。

## 空值 void
> - JS中`void`是一个运算符，表示忽略表达式的返回值， 或者或返回值是`undefined`
> - JS函数总是返回一些东西，没有返回值即返回`undefined`

- 在`TS`中可以用`void`表示没有任何返回值的函数， 它是`undfined`的父类型
- 未定义返回值自动推断为 `void` 类型
- 可以将`undefined`和`null` 赋值给`void`类型（未指定`strictNullChecks`时）
```ts
// 未定义返回值自动推断为 void 类型
function alertName() {
    alert('My name is Tom');
}
var showAlert = alertName(); // var showAlert: void
// null 和 undefined 可以赋值给 void
let unusable: void = undefined;
```
那么TS既然有了 `undefined` 为什么还需要 `void` 呢？区别是什么？

区别在于 **作为返回类型的void可以用不同的类型替换，以允许高级回调模式**
```ts
function doSomething (callback: () => void) {
    let c = callback();   // 此时c为void类型 
    // ...  
}
  
// 返回number类型 
function aNumberCallback (): number {
    return 2;  
}
  
doSomething(aNumberCallback); 
```

## any
TS新手超级喜欢这个类型
- 任意值（Any）用来表示允许赋值为任意类型。
- 它允许访问任意属性和调用任意方法
因此`any`成了系统的顶级类型
```ts
// 但如果是 any 类型，则允许被赋值为任意类型。
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

// 在任意值上访问任何属性都是允许的：
console.log(myFavoriteNumber.logName);
// 也允许调用任何方法：
myFavoriteNumber.split('');

// 声明未赋值 推断为any
let any1; // any1: any
```

## unknow
- 与 `any`一样都是TypeScript的顶层类型，所有类型都可以分配给`unknow`
- 与 `any`不同的是
    - 不能对`unknow`类型执行任意操作,必须先缩小到具体类型才能使用其方法和属性
    - `unknow`类型只能被赋值给`any`类型和`unknow`类型本身

- 缩小未知类型的范围的三种方法
    - 类型断言
    - `typeof`
    - `is`关键字

```ts
let unknownVal: unknown = 'str';
unknownVal = true; // 所以所有类型都可以分配给unknown

// unknow类型只能赋值给any类型和unknow类型
let anyVal: any;
anyVal = unknownVal
let num: number = 12;
num = unknownVal; // 不能将类型“unknown”分配给类型“number”。ts(2322)

/* 缩小未知类型的范围的三种方法 */
// 类型断言
function toFixed(value: unknown) {
    return (value as number).toFixed(2);
}
// typeof 类型保护
function toFixed2(value: unknown) {
    if(typeof value === 'number') {
        return value.toFixed(2);
    }
}
// is 自定义类型保护
const isNumber = (val: unknown): val is number => typeof val === 'number';
function toFixed3(value: unknown) {
    if (isNumber(value)) {
        return value.toFixed(2);
    }
}
```

## never类型
- `never`类型表示的是那些永不存在的值的类型，这意味着，定义了一个`never`类型，只能被`never`类型的值所赋值
- `never` 是 `undefined` 和`null`的子类型， 是最底层的类型

什么情况下会出现`never`类型
- 一个从来不会有返回值的函数
    - `let ne = (() => { while(true) {} })();`
- 一个总是会抛出错误的函数
    - `let ne2 = (() => { throw new Error("异常"); })(); `


# 类型进阶
- 联合类型
- 对象的类型
- 数组的类型
- 函数的类型
- 元组类型

## 联合类型
- 联合类型（Union Types）表示取值可以为多种类型中的一种
- 只能访问此联合类型的所有类型里共有的属性或方法
```ts
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

function getLength(something: string | number): string {
    console.log(something.length) // 不可以 number类型没有length属性
    console.log(something.toFixed(2)) // 不可以， string类型没有toFixed方法
    return something.toString();
}
```

## 对象的类型
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。
- 何为接口？它是对行为的抽象。
- 接口一般首字母大写。有的编程语言中会建议接口的名称加上 `I` 前缀。
- 接口定义后 实例多一些属性或少一些属性都是不允许的
- 属性修饰 `?` 可选属性 `readonly` 只读属性
- 任意属性 `[propName: string]: any;`
    - 一旦定义了任意属性，那么确定属性和可选属性都必须是它的类型的子集
```ts
interface Person {
    name: string;
    age: number;
}
let tom: Person = { // 报错 缺少age属性
    name: 'Tom'
};
let tom2: Person = { // 报错 不需要 gender 属性
    name: 'Tom',
    age: 25,
    gender: 'male'
};


interface Person2 {
    readonly name: string;
    age?: number;
    // [propName: string]: string; // 报错，任意类型必须包含可选类型和确定类型
    [propName: string]: string | number | undefined; 
}
let jack: Person2 = {
    name: 'zs'
}
jack.name = 'ls' // 报错
jack.age = 12; // ok
jack.sex = 1 // ok

// 只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候
interface Person3 {
    readonly id?: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom3: Person3 = {
    name: 'Tom',
    gender: 'male'
};
tom3.id = 89757; // 报错
```

## 数组的类型
###  数组的三种表示法
- 「类型 + 方括号」表示法 `let fibonacci: number[] = [1, 1, 2, 3, 5];`
- 泛型表示法 `let fibonacci: Array<number> = [1, 1, 2, 3, 5];`
- 接口表示法
```ts
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
```

### 类数组
```ts
function sum() {
    let args: number[] = arguments; // 报错
}

// Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

function sum() {
    let args: IArguments = arguments;
}
// IArguments 是TS内置对象
// 实际 IArguments 定义如下
interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

// 用 any 表示数组中允许出现任意类型
let list: any[] = ['xcatliu', 25, { website: 'xcatliu.com' }];
```

## 函数的类型
- 可以约束函数参数类型、参数个数及返回值类型
- 函数声明语句的TS修饰
- 函数定义语句的TS修饰
- 使用interface修饰函数
- 对函数参数设置默认值， 同样会进行类型推断
- 可选修饰符: 
    - 仅最后一个参数可以用`?`
    - 设置了默认值就不能使用可选修饰符
- `readoly`修饰参数 只能在构造函数中使用
- 剩余参数， 准许JS语法 只能在最后一个参数定义
- 函数重载 （完整的函数重载将在下一篇进阶课中讲解）
```ts
// 函数声明语句
function sum(x: number, y: number): number {
    return x + y;
}
sum(1);  // 报错，不能少参数
sum(1, 2); // ok

// 函数定义表达式
let mySum = function (x: number, y: number): number {
    return x + y;
};
// 等同于如下代码
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

// 使用interface修饰函数
interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}
// 函数重载
function reverse(x: number): number; // 重载签名
function reverse(x: string): string; // 重载签名
// 实现签名
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}
```
## 元组
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象
- 访问已知索引的元素会得到正确的类型
- 添加越界的元素时，他的类型会被限制为元组中每个类型的联合类型
```ts
// 元组的定义
let tom4: [string, number] = ['Tom', 25];
let tom5: [string, number];
// tom5 = [25, 'Tom'] // 报错
tom5 = ['Tom', 25]
tom5[0] = 'Tom'; // 可以只赋值其中一项：
// 当赋值或访问一个已知索引的元素时，会得到正确的类型：
tom4[0].slice(1);
tom4[1].toFixed(2);

// 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：
tom4.push('male'); // ok
tom4.push(true); // 报错
```


# 参考资料
- [《ts入门教程》](https://ts.xcatliu.com/)
- [《TS常见类型》](https://blog.csdn.net/zxl1990_ok/article/details/125205351)

TypeScript入门教程学习（一）

本文讲述浏览器一些实用的API。包含如下内容 `Worker`、`localStorage`、 `Servlet`、`Canvas`、 `Svg`。由于浏览器API知识确实很多，本文将以系统概括和deme展示的方式带你快速学习理解这些API。深入掌握请阅读demo源码+多动手练习。

![image.png](https://blog.warmplace.cn/static/img/3037f561019d12b17d21ae3ea118d94e.image.webp)

[更详细内容点击这里](https://static.warmplace.cn/blog-resources/jsmind/index.html?id=browser-js)



# Worker
> - 由于JS一开始设计的很简单 -- 单线程， JS执行与DOM互斥
> - 再加上JS开发的web环境中 -- 使用解释型语言， 运行较慢
> - 为了web体验，提出了 Worker方案， 
> - 将复杂运算 不涉及dom操作的任务放在其它线程中并行处理，进而解决渲染卡顿的问题。


## Worker的用法
```js
// main.js
const worker = new Worker('./worker.js')
worker.onmessage = function(e) {
    console.log(`收到 web worker 消息 "${e.data}"`, e); // 1
    setTimeout(() => {
        worker.postMessage('你好，我是主线程，我收到你的消息')
    });
}

// worker.js
self.onmessage = function(e) {
    console.log(`收到主线程消息 "${e.data}"`, e); // 2
}

self.postMessage('1. 你好，我是web worker');
```
- self表示子线程自身，以下三种写法作用
```js
// 写法1
self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);

// 写法2
self.onmessage('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);

// 写法3
this.addEventListener('message', function (e) {
  this.postMessage('You said: ' + e.data);
}, false);

// 写法4
addEventListener('message', function (e) {
  postMessage('You said: ' + e.data);
}, false);
```
- 关闭Worker
    - 主线程 `worker.terminate()`
    - worker线程 `self.close()`

- 错误处理 主线程可以监听Worker是否发生错误，
```js
// 主线程
worker.onerror(function (event) {
  console.log([
    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
  ].join(''));
});
// 或者
worker.addEventListener('error', function (event) {
  // ...
});
// worker线程也可以监听错误 
self.addEventListener('error', function(e){
    console.log('worker线程发生错误', e);
})
```
- 加载脚本
```js
importScripts('script1.js');
// 也可以加载多个脚本
importScripts('script1.js', 'script2.js');
```

## Worker的限制
- 同源限制
- DOM限制
    - 无法使用`window` `document` `parent`这些对象
    - 可以使用`navigator` 和 `location`
- 通信限制
    - Web Worker是在渲染进程中新开辟的线程，与主线程不能直接通信，需要使用postMessage
- 脚本限制
    - 不能执行`alert()`方法和`confirm()`方法，但可以使用XMLHttpRequest对象发出ajax请求
- 文件限制
    - 不能加载本地文件（`file://`），它所加载的脚本必须来自网络

更多关于WebWorker： [《Web Worker使用教程》](https://www.ruanyifeng.com/blog/2018/07/web-worker.html)


# localStorage 与 sessionStorage
`sessionStorage` 与 `localStorage`的区别是：`localStorage`可以长期保留， `sessionStorage`当前会话结束（页面被关闭时）会被清除。 除此之外，它们两的用法及特性几乎一致

- 遵循同源策略（协议、域名、端口一致）
- 设置 `localStorage.setItem('myCat', 'tom');`或`localStorage.myCat='tom';`
- 读取 `localStorage.getItem('myCat');` 或 `localStorage.myCat`


# Servlet
```js
// index.html
CSS.paintWorklet.addModule('paint-grid.js');
// paint-grid.js
registerPaint('transparent-grid', class {
    // ...
}}
```
[更多关于 Servlet 请看我的另一篇文章](https://blog.warmplace.cn/post/14#CSS%20Houdini)


# IndexDB
> - 现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；
> - LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。
> - 所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景

特点：
- 键值对储存
- 异步
    - localStorage是同步，且存取时 序列化与反序列化比较耗费性能
    - 可以用于异步通信 如ServiceWork与WebWorker的中介
- 支持事务
- 同源限制
- 储存空间大  250MB
- 支持二进制储存

对比mysql数据库, 快速上手indexdb


![image.png](https://blog.warmplace.cn/static/img/741130ab14a79017de853154570d66d2.image.webp)

用途：重客户端应用，客户端游戏、chrome扩展开发

本段参考资料：
- [IndexedDB 入门教程](http://www.ruanyifeng.com/blog/2018/07/indexeddb.html)  
- [indexdb中文教程](https://www.tangshuang.net/3735.html)

# Canvas
Canvas 是html5 新增的API

**坐标**
Canvas画布提供了一个作图的平面空间，该空间每个点都有自己的坐标。
- 原点(0,0)位于图像的左上角. 
- x轴的正向是原点向右
- y轴的正向是原点向右

**画布**
- Canvas标签默认只有两个属性 `width` 和 `height` 默认画布宽度300px 高度150px
- 如果想用CSS定义画布宽高， 必须与 Canvas `width` 和 `height` 属性一致，否则会出现拉伸

**路径**
- Canvas绘图如同在拿笔纸上绘图一样，需要移动画笔，这就是路径
- 路径同样式一样也是一种状态，绘图时注意恢复状态（`save()` 和 `restore()`）
- `.store()`和 `.fill()`方法会自动闭合路径
- 路径可以复制、组合等。

**事件**
- 无法针对某个图形进行事件处理，只能监听整个canvas画板，然后对根据光标坐标、画板位置、图形位置进行逻辑分析和编程。

**动画**
- 动画的过程就是清空画板，重新配置。


关于Canvas学习重点在于练习，
先推荐一些学习资料
- [Canvas 保姆级教程（上）：绘制篇](https://juejin.cn/post/7008064185972031524)
- [Canvas 保姆级教程（下）：动画篇](https://juejin.cn/post/7008811592733655077)

主要参考上述文章，我写了一些极简demo，demo有详细的注释

![image.png](https://blog.warmplace.cn/static/img/ced9bcba5d93bd65ff072b90cea10ac9.image.webp)

感兴趣的同学 [点这里](https://static.warmplace.cn/blog-resources/browser/browser_ts/canvas.html)， 打开开发者工具看一下源码。

为了使用编辑器API提示效果，demo是使用TS写的，熟悉TS的同学 可以修改文件后缀名就可以查看ts代码， 如 [canvas.js](https://static.warmplace.cn/blog-resources/browser/browser_ts/canvas.js)  [canvas.ts](https://static.warmplace.cn/blog-resources/browser/browser_ts/canvas.ts)


Canvas的用途
- 一般不做可视化、游戏相关项目基本用不到Canvas
- 普通项目中也有一些场景需要用到Canvas如下
    - 估算文本宽度  [如何获取本本宽度](https://juejin.cn/post/7091990279565082655)
    - 0.5px 边框
    - 水印
    - html内容转图片
    - 地图天气绘制 （雨、雪、冰雹、雾）

# Svg
**SVG是指可伸缩矢量图形**

**相对于传统图片它有体积小和放大不失真的优势**

对比 canvas与svg

| - | Canvas | Svg |
| --- | --- | --- |
| 描述图形方式 | 使用JavaScript描述2D图形<br>绘制完成浏览器不在关注<br>位置变更需要重新渲染 | 使用XML描述2D图形。<br>每个被绘制的图形被称为对象，<br> 对象属性发生变化会重新渲染|
| 分辨率 | 基于像素绘制，依赖分辨率  | 基于图形绘制，放大不失真 |
| 事件 | 不支持事件处理器，需要手动编程<br>用户交互到像素  | 支持事件编程 <br> 用户交互到路径|
| 元素 | 单个Canvas元素  | 多种图形元素 |
| 操作 | 只能脚本渲染  | 支持脚本和css |
| - | 能够以 .png 或 .jpg 格式保存结果图像  | 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） |
|使用场景|适合小面积，大数量应用场景（图像密集型游戏）|适合大面积小数量应用场景（如google地图）|



主要参考 [《终于会用SVG画图了》](https://juejin.cn/post/7012099738380009502)我写了一些demo


![image.png](https://blog.warmplace.cn/static/img/ebf0a6ab8905bd0b0259a7c75f4bad1c.image.webp)

感兴趣的同学 [点这里](https://static.warmplace.cn/blog-resources/browser/browser_ts/svg.html)， 打开开发者工具看一下源码。

# Page Visibility API
移动端h5应用，有一些场景 如埋点需求、性能优化（切到后台避免不必要的请求和渲染）需要开发者知道页面切换到后台或者被销毁。

`pagehide` `beforeunload` `unload` 在移动端可能不会被触发

后来HTML5新增了`document.visibilityState` API
- 它有三个值 `hidden` `visiable`至少一部分可见  `prerender`页面即将或正在渲染，处于不可见状态
- 它覆盖了页面被卸载的所有情况

由于历史原因还保留`document.hidden` 仅当`document.visibilityState`属性返回`visible`时，它的值时false，其他都是true，包括`prerender`状态， 所以只要有可能我们都是应该使用`document.visibilityState`

**`visibilitychange`事件**
- 只要`document.visibilityState` 发生改变都会触发 `visibilitychange`事件

**总结**
- 现在浏览器只需要使用`visibilitychange`事件即可
- `beforeunload`事件只有一种适用场景，就是用户修改了表单，没有提交就离开当前页面。



# IntersectionObserver
开发中有一些场景需要用到IntersectionObserver
- 内容曝光、卡片曝光
- 图片懒加载
- 视频播放
- 页面按模块内容懒加载（提高FP首屏渲染体验）

注意： 
- `IntersectionObserver`是采用 `requestIdleCallback()`实现，也就是说该API异步执行且优先级很低，如果你滑动过快可能不被触发

写不如练， 我这边写了四个关于IntersectionObserver的demo，代码极简且有详尽注释，希望能带你快速掌握IntersectionObserver。


![image.png](https://blog.warmplace.cn/static/img/b0acf0e06ef0ce9a1ba94be885e4a436.image.webp)

感兴趣的同学 [点这里](https://static.warmplace.cn/blog-resources/browser/IntersectionObserve/1.html)， 打开开发者工具看一下源码。

本段内容主要参考资料 [阮一峰 WebAPI 教程](https://www.bookstack.cn/read/webapi-tutorial/docs-intersectionObserver.md)

# WebComponents
WebComponents 不是单一的规范，而是由一些列技术组成
- `Custom Elements`
- `Template`
- `Shadow DOM`
- ~~`HTML Import` 已被废弃~~

使用时，并不一定上面四种 API 都要用到。其中，`Custom Element` 和 `Shadow DOM` 比较重要，`Template` 和 `HTML Import` 只起到辅助作用。

**Custom Elements**
- web components的核心， 唯有它是必须的。
- `customElement.define('my-ele', MyELement)` 定义组件
- `customElement.get('my-ele')` 获取类， 可以通过new再次创建
- `customElement.whenDefine('my-ele', callback)` 定义组件后触发
- attribute
    - 设置属性 1） HTML元素上写属性 2) setAttribute动态设置
    - WC类通过 `static get observedAttributes` 和 `attributedChangedCallback` 监听属性变化
- prop
    - DOM元素也是JS对象， 是对象都可以设置属性，通过此方式来传递JSON数据
    - 通过 get set 拦截器动态更新
- slot
    - WC的插槽比较简单，仅支持默认插槽和具名插槽，不支持类似Vue的作用域插槽
- 事件
    - 派发事件 `this.dispatchEvent(new CustomEvent('myevent', {detail: ''}))`
- 生命周期
    - `constructor` 创建时被调用
    - `attributeChangedCallback` 当自定义元素的一个属性被添加、移除或修改时，这个方法会被调用。
    - `connectedCallback` 第一次被连接到文档 DOM 时被调用'
    - `adoptedCallback` 当自定义元素被移入新文档后调用（需借助iframe演示）
    - `disconnectedCallback` 当自定义元素从文档中移除时，这个方法会被调用。这时可以进行一些资源清理操作。

**Template**
- 就是一个代码片段，浏览器解析式会跳过

**Shadow DOM**
- Shadow DOM 内部样式是隔离的，即不受外部影响，也不影响外部
- 如果不想样式隔离 可以不使用ShadowDOM
- mode有两个值`open` `closed` 设置为 `open` 则JS可以通过`element.shadowRoot` 属性来访问ShadowDOM内部的结构

[这里写了一些webcomponent使用demo](https://github.com/guojingwen/frontend-project/tree/main/webcomponents)

# Server-Sent Events
>
服务器向客户端推送数据，有很多解决方案。除了“轮询” 和 WebSocket，HTML 5 还提供了 Server-Sent Events（以下简称 SSE）。

服务端向客户端声明，接下来要发送的是流信息，这时客户端就不会关闭连接，会一直等待服务端发送过来的新的数据流

与websocket比较。总体来说WebSocket更强大灵活。因为他是全双工通信

| - | Websocket | SSE |
| --- | --- | --- |
| 通信方式 | 全双工通信  | 单向通信<br>steaming本质上是下载 |
| 协议 | 基于HTTP升级后的一种新协议  | 使用HTTP协议 |
| 重连机制 | 需要自己实现断线重连  | 默认支持断线重连 |
| 数据类型 | 支持文本、二进制消息  | 一般只用来传输文本，二进制数据需要编码后传送 |

综上 websocket属于重量级武器 SSE属于轻量级武器，两者各有特点，适合不同的场景

关于SSE的学习 推荐这篇文章[《Server-Sent Event》](https://www.bookstack.cn/read/webapi-tutorial/docs-server-sent-events.md)

这是参考这篇文章，我写了个nodejs的domo， 可以下载下面两个文件本地运行，体验一下SSE
- <a href="https://static.warmplace.cn/blog-resources/browser/SSE/server.js" download="server.js">server.js</a>
- <a href="https://static.warmplace.cn/blog-resources/browser/SSE/client.html" download="client.html">client.html</a>

**应用案例**

ChatGPT的打字效果就是使用SSE实现的， 略有不同的一点是 在SSE中客户端使用 `EventSource`构建请求， 而chatGPT 使用的是 fetch请求。

推测原因是 EventSource只能发出GET请求（url长度最多2000字符），且不支持自定义请求头， 而fetch请求要模拟 onopen onmessage  onerror事件和close方法，另外要了解stream机制。更多可以参考这篇文章 [《chatGPT打自机消息回复机制》](https://juejin.cn/post/7229632570374783034)

总结： SSE通过借助fetch解除不能自定义header、url长度等限制、跨域等限制。

# Fetch
- Fecth API是一种新规范，用来取代`XMLHTTPRequest`对象
- 由于`XMLHTTPRequest` 所有输入、输出、状态都在一个接口管理，容易写出非常混乱的代码，而 `fetch`将它们分散在几个不同的对象上（设计更合理化），另外返回Promise对象（避免嵌套的回调函数）
- Fetch的另一个好处是支持大文件传输，而传统的`XMLHTTPRequest`对象不支持数据流，所有数据必须放在缓存里，等到全部都拿到后，再一次性吐出来。
- Fetch API 引入三个新的对象（也是构造函数）：`Headers`, `Request`和`Response`

# MessageChannel
- 它是react时间切片的实现原理， 因此它是一个宏任务
- 它的功能很类似EventEmmiter，区别是异步（宏任务）执行

作用
- 实现两个worker的直接通信
- 数据copy  利用消息在发送和接收过程需要序列化和反序列化

更多关于 MessageChannel 推荐阅读 [《浅谈MessageChannel》](https://juejin.cn/post/7029715697173266469)


# 浏览器多个tab页如何通信
1. 前端跨页面通信如同CORS跨域请求一样需要双发都配合才能进行
2. 非同源页面的通信可以借助iframe中转转换为同源页面之间的通信
3. 同源页面之间的通信 大致可以分为三类 1>共享存储 2>中介者模式 3>服务端推送

**共享存储**
1. `localStorage`
    - A页面window.addEventListener('storage') <br>B页面 localStorage.setItem   
1. `IndexDB` + JS定时器查询
1. `cookie` + JS定时器查询
    - cookie方案的优缺点都非常明显，缺点 1> 单个cookie最多4KB 2> 增加网络带宽 优点：同源限制程度低 可借助根域名存储 不受协议和端口限制

**中介者模式**
- `navigator.serviceWorker`  serviceWorker优势也十分明显，它位于浏览器主控进程，生存周期比页面长，因此可以存储离线消息
- `BroadCast Channel`  该方式很简便，但兼容性方面不乐观
- `SharedWorker` + 定时器

**服务端推送**
- `SSE` 有跨域限制， 但可以借助fetch规避
- `websocket`  无跨域限制
- 长轮询

**其他**
如果是后者通过前者打开  还可以使用 `open/opener`方式

关于具体实现方案，推荐阅读 [《面试官：前端跨页面通信，你知道哪些方法？》](https://juejin.cn/post/6844903811232825357) 　

**主页面和iframe之间的通信**
- `postMessage`
- `MessageChange`
- 其他参考跨页面通信方式 和 [跨域通信方案](https://blog.warmplace.cn/post/19#%E5%85%B6%E4%BB%96%E8%B7%A8%E5%9F%9F%E6%96%B9%E5%BC%8F)

# MutationObserver
在DOM3中定义了`Mutation events`该API是同步执行，由于它本身是事件所以捕获采用事件冒泡的机制，如果捕获期间由触发了其他的Mutation Events的话，很可能就导致JS主线程阻塞，甚至是浏览器崩溃。

未解决 `Mutation events` 同步执行和事件冒泡的问题, DOM4定义了`Mutation Observer`用于取代`Mutation events`。它采用异步执行，每次变更记录在消息队列中，最后统一执行

更多关于 MutationObserver 推荐阅读 [《MutationObserver用法总结》](https://juejin.cn/post/7016956024561074213)

# 文件压缩上传、下载
这里主要是借助 前端文件压缩上传、下载的案例来学习 `Blob` `File` `FileReader` `Blob URL` `Canvas` `FormData`之间的联系

先来看一下它们之间的关系图

![blob.webp](https://blog.warmplace.cn/static/img/65399dedc318ce00da8415777f60a977.blob.webp)
- `Blob` 与 `File`
    - `Blob` 二进制大文件对象 只读， `File` 继承自 `Blob`
    - 如`<input type='file'>`得到的就是File对象
    - 通过`new File` 可转换为File文件
- `Blob URL` 是一种伪协议，允许 Blob 和 File 对象用作图像，下载二进制数据链接等的 URL 源。
    - 形式`blob:<origin>/<uuid>` 可借助`<a>`下载
    - 通过`URL.createObjectURL(file)` 转换为`Blob URL`
    - `Blob URL`可以借助`new File([Blob], fileName, {type})`转换为 `File`
    - `fileData.slice(0, fileData.size, fileData.type);` `File` 转 `Blob`
- `Canvas`
  - 可以通过`ctx.drawImage(imgEle)`对图像进行复制、压缩尺寸、剪裁展示等
  - 在通过`canvas.toBlob`进行图片格式转换及压缩。
- `FileReader`
    - 将`File`或`Blob`转换为base64
- `FormData` 表单上传的一种方式 `Content-Type: multipart/form-data` 用于上传含有文件的表单
- 上传文件有两种方式
    - `FormData`  `formData.append("file", file);`
    - `base64` 通过 `FileReader` 将`File`或`Blob`转换为base64
- 保存图片  借助`<a>`和`Blob URL`下载
- `ArrayBuffer` 累了，以后在学

我写了一个 [图片压缩上传下载](https://static.warmplace.cn/blog-resources/browser/compressImg.html) 案例 ，有兴趣的同学可以点进去看一下，敲一下代码，可以帮你快速掌握这些API

 

# 废弃的API
- offline应用
- WebSQL
- Mutation events