Merge branch 'master' of https://github.com/ascoders/weekly

前沿技术/218.精读《Rust 是 JS 基建的未来》.md

@@ -71,7 +71,7 @@ swc
 
 #### @swc/wasm-web
 
-`@swc/wasm-web` 可以在浏览器运行时调用 wsm 版的 swc，以得到更好的性能。下面是官方的例子：
+`@swc/wasm-web` 可以在浏览器运行时调用 wasm 版的 swc，以得到更好的性能。下面是官方的例子：
 
 ```typescript
 import { useEffect, useState } from "react";
@@ -183,7 +183,7 @@ require('esbuild').transformSync('fn = obj => { return obj.x }', {
 
 压缩功能比较稳定，适合用在生产环境，而编译功能要考虑兼容 webpack 的地方太多，在成熟稳定后才考虑能在生产环境使用，目前其实已经有不少新项目已经在生产环境使用 esbuild 的编译功能了。
 
-编译功能与 `@swc` 类似，但因为 Rust 支持编译到 wsm，所以 `@swc` 提供了 web 运行时编译能力，而 esbuild 目前还没有看到这种特性。
+编译功能与 `@swc` 类似，但因为 Rust 支持编译到 wasm，所以 `@swc` 提供了 web 运行时编译能力，而 esbuild 目前还没有看到这种特性。
 
 ### Rome
 
@@ -257,13 +257,13 @@ NAPI-RS 作为 Rust 与 Node 的桥梁，很好的解决了 Rust 渐进式替换
 
 ### Rust + WebAssembly
 
-[Rust + WebAssembly](https://www.rust-lang.org/what/wasm) 说明 Rust 具备编译到 wsm 的能力，虽然编译后代码性能会变得稍慢，但还是比 js 快很多，同时由于 wsm 的可移植性，让 Rust 也变得可移植了。
+[Rust + WebAssembly](https://www.rust-lang.org/what/wasm) 说明 Rust 具备编译到 wasm 的能力，虽然编译后代码性能会变得稍慢，但还是比 js 快很多，同时由于 wasm 的可移植性，让 Rust 也变得可移植了。
 
 其实 Rust 支持编译到 WebAssembly 也不奇怪，因为本来 WebAssembly 的定位之一就是作为其他语言的目标编译产物，然后它本身支持跨平台，这样它就很好的完成了传播的使命。
 
 WebAssembly 是一个基于栈的虚拟机 ([stack machine](https://webassembly.github.io/spec/core/exec/index.html))，所以跨平台能力一流。
 
-想要将 Rust 编译为 wsm，除了安装 Rust 开发环境外，还要安装 [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/)。
+想要将 Rust 编译为 wasm，除了安装 Rust 开发环境外，还要安装 [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/)。
 
 安装后编译只需执行 `wasm-pack build` 即可。更多用法可以查看 [API 文档](https://rustwasm.github.io/wasm-pack/book/commands/build.html)。
 

设计模式/186.精读《设计模式 - State 状态模式》.md

@@ -42,13 +42,25 @@ State（状态模式）属于行为型模式。
 下面例子使用 typescript 编写。
 
 ```typescript
+abstract class Context {
+  abstract setState(state: State): void;
+}
+
 // 定义状态接口
 interface State {
   // 模拟台灯点亮
   show: () => string
 }
 
-class Light1 implements State {
+interface Light {
+  click: () => void
+}
+
+type LightState = State & Light
+
+class TurnOff implements State, Light {
+  context: Context;
+
   constructor(context: Context) {
     this.context = context
   }
@@ -59,11 +71,13 @@ class Light1 implements State {
 
   // 按下按钮
   public click() {
-    this.context.setState(new Light2(this.context))
+    this.context.setState(new WeakLight(this.context))
   }
 }
 
-class Light2 implements State {
+class WeakLight implements State, Light {
+  context: Context;
+
   constructor(context: Context) {
     this.context = context
   }
@@ -74,11 +88,13 @@ class Light2 implements State {
 
   // 按下按钮
   public click() {
-    this.context.setState(new Light3(this.context))
+    this.context.setState(new StandardLight(this.context))
   }
 }
 
-class Light3 implements State {
+class StandardLight implements State, Light {
+  context: Context;
+
   constructor(context: Context) {
     this.context = context
   }
@@ -89,11 +105,13 @@ class Light3 implements State {
 
   // 按下按钮
   public click() {
-    this.context.setState(new Light4(this.context))
+    this.context.setState(new StrongLight(this.context))
   }
 }
 
-class Light4 implements State {
+class StrongLight implements State, Light {
+  context: Context;
+
   constructor(context: Context) {
     this.context = context
   }
@@ -104,30 +122,37 @@ class Light4 implements State {
 
   // 按下按钮
   public click() {
-    this.context.setState(new Light1(this.context))
+    this.context.setState(new TurnOff(this.context))
   }
 }
 
 // 台灯
-public class Lamp {
+class Lamp extends Context {
   // 当前状态
-  private currentState = new Light1(this)
-
-  protected setState(state: State) {
-    this.currentState = state
+  #currentState: LightState = new TurnOff(this)
+  setState(state: LightState) {
+    this.#currentState = state
+  }
+  getState() {
+    return this.#currentState
   }
 
   // 按下按钮
-  public click() {
+  click() {
     this.getState().click()
   }
 }
 
 const lamp = new Lamp() // 关闭
+console.log(lamp.getState().show()) // 关灯
 lamp.click() // 弱光
+console.log(lamp.getState().show()) // 弱光
 lamp.click() // 亮
+console.log(lamp.getState().show()) // 亮
 lamp.click() // 强光
+console.log(lamp.getState().show()) // 强光
 lamp.click() // 关闭
+console.log(lamp.getState().show()) // 关闭
 ```
 
 其实有很多种方式来实现，不必拘泥于形式，大体上只要保证由多个类实现不同状态，每个类实现到下一个状态切换就好了。