设计模式 Design Patterns in ECMAScript [dɪˈzaɪn] ['pætənz]

En | 中文

使用 ECMAScript 实现 23 种经典设计模式 (GoF)。

代码示例原则：

ES6
极简 Minimalism [ˈmɪnɪməlɪzəm]
抽象 Abstract [ˈæbstrækt]

预览

详情

📗 创建模式 Creational Patterns [kri:ˈeiʃənəl] ['pætənz]

创建模式，描述对象如何创建实例，关注类的实例化过程。

单例模式 Singleton [ˈsɪŋɡltən]

保证一个类仅有一个实例。

// static
class Singleton {
  constructor(name) {
    this.name = name;
    this.instance = null;
  }

  static create(name) {
    if (!this.instance) this.instance = new Singleton(name);
    return this.instance;
  }
}

// constructor
class Singleton {
  constructor(name) {
    if (typeof Singleton.instance === 'object') {
      return Singleton.instance;
    }
    Singleton.instance = this;

    this.name = name;
  }
}

// proxy
class Instance {
  constructor(name) {
    this.name = name;
  }
}
class Singleton {
  constructor(name) {
    if (!Singleton.instance) {
      Singleton.instance = new Instance(name);
    }
    return Singleton.instance;
  }
}

工厂模式 Factory [ˈfæktri]

让其子类自己决定实例化哪一个工厂类。

class A {
  constructor() {
    this.name = 'A';
  }
}

class B {
  constructor() {
    this.name = 'B';
  }
}

class C {
  constructor() {
    this.name = 'C';
  }
}

class Factory {
  static create(product) {
    switch (product.toUpperCase()) {
      case 'A': return new A();
      case 'B': return new B();
      case 'C': return new C();
      default:
        throw new Error('no class');
    }
  }
}

抽象工厂模式 Abstract Factory [ˈæbstrækt] [ˈfæktri]

创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。

class A1 {
  constructor() {
    this.name = 'A1';
  }
}
class A2 {
  constructor() {
    this.name = 'A2';
  }
}
class B1 {
  constructor() {
    this.name = 'B1';
  }
}
class B2 {
  constructor() {
    this.name = 'B2';
  }
}
class FactoryA {
  static create(product) {
    switch (product.toUpperCase()) {
      case 'A1':
        return new A1();
      case 'A2':
        return new A2();
      default:
        throw new Error('no product');
    }
  }
}
class FactoryB {
  static create(product) {
    switch (product.toUpperCase()) {
      case 'B1':
        return new B1();
      case 'B2':
        return new B2();
      default:
        throw new Error('no product');
    }
  }
}

class AbstractFactory {
  static create(factory) {
    switch (factory.toUpperCase()) {
      case 'A':
        return FactoryA;
      case 'B':
        return FactoryB;
      default:
        throw new Error('no factory');
    }
  }
}

建造者模式 Builder [ˈbɪldə(r)]

使用多个简单的对象一步一步构建成一个复杂的对象。

class A {
  constructor() {
    this.name = 'A';
  }
}

class B {
  constructor() {
    this.name = 'B';
  }
}

class Builder {
  constructor() {
    this.a = new A();
    this.b = new B();
  }
}

原型模式 Prototype [ˈprəʊtətaɪp]

用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。

class Prototype {
  constructor(name) {
    this.name = name;
  }

  clone() {
    return new Prototype(this.name);
  }
}

📘 结构模式 Structural Patterns [ˈstrʌktʃərəl] ['pætənz]

结构模式，描述如何将类或者对象结合在一起形成更大、更复杂的结构，关注类和对象的组合。

适配器模式 Adapter [ə'dæptə]

将一个类的接口转换成另外一个需要的接口，作为两个不兼容的接口之间的桥梁。

class Standard {
  execute() {
    return false;
  }
}

class Instance {
  action() {
    return true;
  }
}
class Adapter {
  static adapter(instance) {
    instance.execute = instance.action;
  }
}

桥接模式 Bridge [brɪdʒ]

将抽象部分与实现部分分离，使它们都可以独立的变化。

class Bridge {
  execute(value) {
    return value;
  }
}

class Instance {
  constructor(value, bridge) {
    this.value = value;
    this.bridge = bridge;
  }

  execute() {
    return this.bridge.execute(this.value);
  }
}

组合模式 Composite [ˈkɒmpəzɪt]

将对象组合成树形结构以表示"部分-整体"的层次结构。

class Instance {
  constructor(value) {
    this.value = value;
    this.children = [];
  }

  add(instance) {
    this.children.push(instance);
  }

  toString() {
    return this.value.toString() + this.children.map((child) => child.toString()).join('');
  }
}

装饰模式 Decorator [ˈdekəreɪtə(r)]

动态添加/覆盖对象现有对象中的行为。

class Original {
  constructor(value) {
    this.value = value;
  }

  execute() {
    return this.value;
  }
}

class Decorator extends Original {
  superExecute() {
    return this.value * 2;
  }
}

外观模式 Facade [fəˈsɑːd]

定义了一个高层接口，这个接口使得这一子系统更加容易使用。

class A {
  execute() {
    return 'A';
  }
}

class B {
  execute() {
    return 'B';
  }
}

class C {
  execute() {
    return 'C';
  }
}

class Facade {
  constructor() {
    this.a = new A();
    this.b = new B();
    this.c = new C();
  }

  executeA() {
    return this.a.execute();
  }

  executeB() {
    return this.b.execute();
  }

  executeC() {
    return this.c.execute();
  }
}

享元模式 Flyweight [ˈflaɪweɪt]

运用共享技术有效地支持大量细粒度的对象。

class Flyweight {
  constructor(value) {
    this.value = value;
  }
}

class Instance {
  constructor() {
    this.items = [];
  }

  create(value) {
    this.items.push(new Flyweight(value));
    return this;
  }
}

代理模式 Proxy [ˈprɒksi]

为其他对象提供一种代理以控制对这个对象的访问。

class Instance {
  constructor() {
    this.value = true;
  }
}

class Proxy {
  constructor() {
    return new Instance();
  }
}

📙 行为模式 Behavioral Patterns [bi'heivjərəl] ['pætənz]

行为模式，描述如何清晰的划分类与对象的职责，关注对象之间的通信。

职责链模式 Chain Of Responsibility [tʃeɪn] [əv] [rɪˌspɒnsəˈbɪləti]

将多个对象连接成一条链，沿着这条链传递请求，并处理该请求。

class Start {
  constructor(instance) {
    this.instance = instance;
  }

  execute(value) {
    this.instance.value += value * 1;
  }
}

class Process {
  constructor(instance) {
    this.instance = instance;
  }

  execute(value) {
    this.instance.value += value * 2;
  }
}

class End {
  constructor(instance) {
    this.instance = instance;
  }

  execute(value) {
    this.instance.value += value * 3;
  }
}

class Instance {
  constructor() {
    this.value = 0;
    this.chain = [
      new Start(this),
      new Process(this),
      new End(this),
    ];
  }

  execute(value) {
    this.chain.forEach((obj) => {
      obj.execute(value);
    });
  }
}

命令模式 Command [kəˈmɑːnd]

将一个请求封装成一个对象，从而使您可以用不同的请求对实例进行参数化。

class Executor {
  constructor() {
    this.state = false;
  }

  execute() {
    this.state = true;
  }
}

class Command {
  constructor(instance) {
    this.instance = instance;
  }

  execute() {
    this.instance.execute();
  }
}

class Commander {
  constructor(command) {
    this.command = command;
  }

  execute() {
    this.command.execute();
  }
}

解释器模式 Interpreter [ɪnˈtɜːprətə(r)]

实现了一个表达式接口，该接口解释一个特定的上下文。

class Interpreter {
  static execute(commend) {
    return commend + 1;
  }
}

class Command {
  constructor(commend) {
    this.commend = commend;
  }

  execute() {
    return Interpreter.execute(this.commend);
  }
}

迭代器模式 Iterator [ɪtə'reɪtə]

提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。

class Iterator {
  constructor(arr) {
    this.i = 0;
    this.arr = arr;
  }

  next() {
    this.i += 1;
    return this.arr[this.i];
  }

  hasNext() {
    return this.index < this.arr.length;
  }
}

中介者模式 Mediator [ˈmiːdieɪtə(r)]

提供了一个中介类处理不同类之间的通信，从而使其耦合松散。

class Mediator {
  static execute(instanceA, instanceB) {
    instanceA.execute(instanceB.value);
  }
}

class Instance {
  constructor(value) {
    this.value = value;
  }

  execute(value) {
    this.value = value;
  }
}

备忘录模式 Memento [məˈmentəʊ]

保存一个对象的某个状态，以便在适当的时候恢复对象。

class Memento {
  constructor() {
    this.value = '';
  }

  set(value) {
    this.value = value;
  }

  get() {
    return this.value;
  }
}

class Instance {
  constructor(value) {
    this.value = value;
  }

  save(memento) {
    memento.set(this.value);
  }

  restore(memento) {
    this.value = memento.get();
  }
}

观察者模式 Observer [əbˈzɜːvə(r)]

当一个对象被修改时，则会自动通知依赖它的对象。

class Instance {
  constructor(value) {
    this.value = value;
    this.children = [];
  }

  add(observer) {
    this.children.push(observer);
  }

  execute(value) {
    this.value = value;
    this.children.forEach((child) => child.execute(this));
  }
}

class Observer {
  constructor(rate) {
    this.value = 0;
    this.rate = rate;
  }

  execute(instance) {
    this.value = this.rate * instance.value;
  }
}

状态模式 State [steɪt]

允许对象在内部状态发生改变时改变它的行为。

class State {
  constructor(name) {
    this.name = name;
  }

  execute() {
    return this.name;
  }
}

class Instance {
  constructor(state) {
    this.state = state;
  }

  change(state) {
    this.state = state;
  }

  execute() {
    return this.state.execute();
  }
}

策略模式 Strategy [ˈstrætədʒi]

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

const METHODS = {
  addition: (a, b) => a + b,
  subtraction: (a, b) => a - b,
  multiplication: (a, b) => a * b,
  division: (a, b) => a / b,
  max: (a, b) => (a > b ? a : b),
  min: (a, b) => ((a < b) ? a : b),
};

class Strategy {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  execute(method) {
    return METHODS[method](this.a, this.b);
  }
}

模板模式 Template [ˈtempleɪt]

定义一个抽象类实现方法的框架，从而允许其子类实现具体的行为。

class Template {
  start() {}

  end() {}

  execute() {
    return this.start() + this.end();
  }
}

class Instance extends Template {
  constructor(a, b) {
    super();
    this.a = a;
    this.b = b;
  }

  start() {
    return this.a;
  }

  end() {
    return this.b;
  }
}

访问者模式 Visitor [ˈvɪzɪtə(r)]

通过将方法的层次结构移动到一个对象中，将算法与对象结构分离。

class Instance {
  constructor(value) {
    this.value = value;
  }

  execute(visitor) {
    return visitor.execute(this);
  }
}

class Visitor {
  constructor(rate) {
    this.rate = rate;
  }

  execute(instance) {
    return instance.value * this.rate;
  }
}

Support

Please star ⭐️ the repository to show your support!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README-CN.md

README-CN.md

设计模式 Design Patterns in ECMAScript [dɪˈzaɪn] ['pætənz]

预览

详情

📗 创建模式 Creational Patterns [kri:ˈeiʃənəl] ['pætənz]

单例模式 Singleton [ˈsɪŋɡltən]

工厂模式 Factory [ˈfæktri]

抽象工厂模式 Abstract Factory [ˈæbstrækt] [ˈfæktri]

建造者模式 Builder [ˈbɪldə(r)]

原型模式 Prototype [ˈprəʊtətaɪp]

📘 结构模式 Structural Patterns [ˈstrʌktʃərəl] ['pætənz]

适配器模式 Adapter [ə'dæptə]

桥接模式 Bridge [brɪdʒ]

组合模式 Composite [ˈkɒmpəzɪt]

装饰模式 Decorator [ˈdekəreɪtə(r)]

外观模式 Facade [fəˈsɑːd]

享元模式 Flyweight [ˈflaɪweɪt]

代理模式 Proxy [ˈprɒksi]

📙 行为模式 Behavioral Patterns [bi'heivjərəl] ['pætənz]

职责链模式 Chain Of Responsibility [tʃeɪn] [əv] [rɪˌspɒnsəˈbɪləti]

命令模式 Command [kəˈmɑːnd]

解释器模式 Interpreter [ɪnˈtɜːprətə(r)]

迭代器模式 Iterator [ɪtə'reɪtə]

中介者模式 Mediator [ˈmiːdieɪtə(r)]

备忘录模式 Memento [məˈmentəʊ]

观察者模式 Observer [əbˈzɜːvə(r)]

状态模式 State [steɪt]

策略模式 Strategy [ˈstrætədʒi]

模板模式 Template [ˈtempleɪt]

访问者模式 Visitor [ˈvɪzɪtə(r)]

Support

License

Files

README-CN.md

Latest commit

History

README-CN.md

File metadata and controls

设计模式 Design Patterns in ECMAScript [dɪˈzaɪn] ['pætənz]

预览

详情

📗 创建模式 Creational Patterns [kri:ˈeiʃənəl] ['pætənz]

单例模式 Singleton [ˈsɪŋɡltən]

工厂模式 Factory [ˈfæktri]

抽象工厂模式 Abstract Factory [ˈæbstrækt] [ˈfæktri]

建造者模式 Builder [ˈbɪldə(r)]

原型模式 Prototype [ˈprəʊtətaɪp]

📘 结构模式 Structural Patterns [ˈstrʌktʃərəl] ['pætənz]

适配器模式 Adapter [ə'dæptə]

桥接模式 Bridge [brɪdʒ]

组合模式 Composite [ˈkɒmpəzɪt]

装饰模式 Decorator [ˈdekəreɪtə(r)]

外观模式 Facade [fəˈsɑːd]

享元模式 Flyweight [ˈflaɪweɪt]

代理模式 Proxy [ˈprɒksi]

📙 行为模式 Behavioral Patterns [bi'heivjərəl] ['pætənz]

职责链模式 Chain Of Responsibility [tʃeɪn] [əv] [rɪˌspɒnsəˈbɪləti]

命令模式 Command [kəˈmɑːnd]

解释器模式 Interpreter [ɪnˈtɜːprətə(r)]

迭代器模式 Iterator [ɪtə'reɪtə]

中介者模式 Mediator [ˈmiːdieɪtə(r)]

备忘录模式 Memento [məˈmentəʊ]

观察者模式 Observer [əbˈzɜːvə(r)]

状态模式 State [steɪt]

策略模式 Strategy [ˈstrætədʒi]

模板模式 Template [ˈtempleɪt]

访问者模式 Visitor [ˈvɪzɪtə(r)]

Support

License