译文： ES6中的JavaScript设计模式

1. 模块模式

将大文件拆分成可以复用的小模块

HTML

• 在script标签中增加type="module"参数。

Node

• 使用.mjs结尾的文件格式
• 在package.json中增加"type": "module"配置

// index.js
import { sum, subtract, divide, multiply } from './math.js';

console.log('Sum', sum(1, 2));
console.log('Subtract', subtract(1, 2));
console.log('Divide', divide(1, 2));
console.log('Multiply', multiply(1, 2));

// math.js
export function sum(x, y) {
  return x + y;
}

export function multiply(x, y) {
  return x * y;
}

export function subtract(x, y) {
  return x - y;
}

export function divide(x, y) {
  return x / y;
}

// package.json
{
  "name": "module-pattern",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

✅ 封装性 —— 属性在模块中默认是私有的

✅ 可复用性 —— 模块可以被重复利用

单例模式

允许类只有一个实例，这个实例不能被修改且全局唯一。

let instance;

// 1. Creating the `Counter` class, which contains a `constructor`, `getInstance`, `getCount`, `increment` and `decrement` method.
// Within the constructor, we check to make sure the class hasn't already been instantiated.
class Counter {
  constructor() {
    if (instance) {
      throw new Error("You can only create one instance!");
    }
    this.counter = counter;
    instance = this;
  }

  getCount() {
    return this.counter;
  }

  increment() {
    return ++this.counter;
  }

  decrement() {
    return --this.counter;
  }
}

// 2. Setting a variable equal to the the frozen newly instantiated object, by using the built-in `Object.freeze` method.
// This ensures that the newly created instance is not modifiable.
const singletonCounter = Object.freeze(new Counter());

// 3. Exporting the variable as the `default` value within the file to make it globally accessible.
export default singletonCounter;

let counter = 0;

// 1. Create an object containing the `getCount`, `increment`, and `decrement` method.
const counterObject = {
  getCount: () => counter,
  increment: () => ++counter,
  decrement: () => --counter,
};

// 2. Freeze the object using the `Object.freeze` method, to ensure the object is not modifiable.
const singletonCounter = Object.freeze(counterObject);

// 3. Export the object as the `default` value to make it globally accessible.
export default singletonCounter;

✅ 内存占用 —— 节省内存，只有一个可以被复用的实例

❌ 非必要 —— ES6模块默认是单例的。

❌ 依赖隐藏 —— 导入的模块可能是单例，也可能不是单例。

❌ 全局作用域污染 —— 与全局变量一样，可能会导致单例值被覆盖。

代理模式

利用代理来控制与对象的交互

const person = {
  name: "John Doe",
  age: 42,
  email: "john@doe.com",
  country: "Canada",
};

const personProxy = new Proxy(person, {
  get: (target, prop) => {
    console.log(`The value of ${prop} is ${target[prop]}`);
    return target[prop];
  },
  set: (target, prop, value) => {
    console.log(`Changed ${prop} from ${target[prop]} to ${value}`);
    target[prop] = value;
    return true;
  },
});

personProxy.name = "Akash";
// Changed name from John Doe to Akash
personProxy.age += 1;
// The value of age is 42
// Changed age from 42 to 43

const person = {
  name: "John Doe",
  age: 42,
  email: "john@doe.com",
  country: "Canada",
};

const personProxy = new Proxy(person, {
  get: (target, prop) => {
    console.log(`The value of ${prop} is ${target[prop]}`);
    return Reflect.get(target, prop);
  },
  set: (target, prop, value) => {
    console.log(`Changed ${prop} from ${target[prop]} to ${value}`);
    return Reflect.set(target, prop, value);
  },
});

personProxy.name = "Akash";
// Changed name from John Doe to Akash
personProxy.age += 1;
// The value of age is 42
// Changed age from 42 to 43

✅ 控制 —— 在与对象交互时添加功能

❌ 长时间处理程序执行 —— 由于在每个对象上执行处理程序导致的性能问题

观察者模式

使用可观察对象在事件发生时通知订阅者

// analytics.js

import Observer from './observer.js';

export function sendToGoogleAnalytics(data) {
  console.log('Sent to Google analytics: ', data);
}

export function sendToCustomAnalytics(data) {
  console.log('Sent to custom analytics: ', data);
}

export function sendToEmail(data) {
  console.log('Sent to email: ', data);
}

Observer.subscribe(sendToGoogleAnalytics);
Observer.subscribe(sendToCustomAnalytics);
Observer.subscribe(sendToEmail);

// index.js

const observers = [];

export default Object.freeze({
  notify: (data) => observers.forEach((observer) => observer(data)),
  subscribe: (func) => observers.push(func),
  unsubscribe: (func) => {
    [...observers].forEach((observer, index) => {
      if (observer === func) {
        observers.splice(index, 1);
      }
    });
  },
});

// package.json

{
  "name": "observer-pattern",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

✅ 关注点分离 — 观察者可以随时与被观察对象解耦。

❌ 性能下降 — 过多的订阅者或复杂的观察者处理可能会导致通知所有订阅者时出现延迟。

工厂模式

使用工厂模式来创建对象

const createUser = (firstName, lastName) => ({
  id: crypto.randomUUID(),
  createdAt: Date.now(),
  firstName,
  lastName,
  fullName: `${firstName} ${lastName}`,
});

createUser("John", "Doe");
createUser("Sarah", "Doe");
createUser("Lydia", "Hallie");

✅ DRY（don't repeat yourself） — 可以创建具有相同属性的多个对象

❌ 不是一个真正的设计模式 — 本质上是一个返回对象的函数

原型模式

共享相同类型的多个对象之间的属性

class Dog {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  bark() {
    console.log(`${this.name} is barking!`);
  }

  wagTail() {
    console.log(`${this.name} is wagging their tail!`);
  }
}

const dog1 = new Dog('Max', 4);
const dog2 = new Dog('Sam', 2);
const dog3 = new Dog('Joy', 6);
const dog4 = new Dog('Spot', 8);

console.log({ dog1, dog2, dog3, dog4 });

dog1.bark(); // Max is barking!
console.log(dog1.bark === dog2.bark); // true

✅ 内存高效 — 常见的方法和属性移动到原型中。

❌ 可读性 — 多次扩展类可能导致追踪方法和属性来源变的困难。

原文链接： Javascript Patterns in ES6. 1. Module Pattern | by Akash Pal | Frontend Weekly | May, 2024 | Medium