{"id":30190849,"url":"https://github.com/z8264/design-patterns-es","last_synced_at":"2025-08-12T20:09:19.365Z","repository":{"id":39304376,"uuid":"252107279","full_name":"Z8264/design-patterns-es","owner":"Z8264","description":"📘 Design patterns (GoF)  implemented in ECMAScript. ","archived":false,"fork":false,"pushed_at":"2023-01-07T16:36:38.000Z","size":382,"stargazers_count":12,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T11:35:30.113Z","etag":null,"topics":["design-pattern","design-patterns","ecmascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Z8264.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-01T07:47:08.000Z","updated_at":"2023-07-28T21:58:40.000Z","dependencies_parsed_at":"2023-02-07T16:15:37.130Z","dependency_job_id":null,"html_url":"https://github.com/Z8264/design-patterns-es","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Z8264/design-patterns-es","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Z8264%2Fdesign-patterns-es","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Z8264%2Fdesign-patterns-es/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Z8264%2Fdesign-patterns-es/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Z8264%2Fdesign-patterns-es/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Z8264","download_url":"https://codeload.github.com/Z8264/design-patterns-es/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Z8264%2Fdesign-patterns-es/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270127392,"owners_count":24531793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-pattern","design-patterns","ecmascript"],"created_at":"2025-08-12T20:09:15.167Z","updated_at":"2025-08-12T20:09:19.335Z","avatar_url":"https://github.com/Z8264.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# 设计模式 Design Patterns in ECMAScript [dɪˈzaɪn] ['pætənz]\n\n[En](./README.md) | 中文\n\n使用 ECMAScript 实现 23 种经典设计模式 (GoF)。\n\n代码示例原则：\n\n* ES6\n* 极简 Minimalism [ˈmɪnɪməlɪzəm]\n* 抽象 Abstract [ˈæbstrækt]\n\n## 预览\n\n![Design Patterns](./design-patterns.svg)\n\n## 详情\n\n### 📗 创建模式 Creational Patterns [kri:ˈeiʃənəl] ['pætənz]\n\n创建模式，描述对象如何创建实例，关注类的实例化过程。\n\n#### 单例模式 Singleton [ˈsɪŋɡltən]\n\n保证一个类仅有一个实例。\n\n``` javascript\n// static\nclass Singleton {\n  constructor(name) {\n    this.name = name;\n    this.instance = null;\n  }\n\n  static create(name) {\n    if (!this.instance) this.instance = new Singleton(name);\n    return this.instance;\n  }\n}\n```\n\n``` javascript\n// constructor\nclass Singleton {\n  constructor(name) {\n    if (typeof Singleton.instance === 'object') {\n      return Singleton.instance;\n    }\n    Singleton.instance = this;\n\n    this.name = name;\n  }\n}\n```\n\n``` javascript\n// proxy\nclass Instance {\n  constructor(name) {\n    this.name = name;\n  }\n}\nclass Singleton {\n  constructor(name) {\n    if (!Singleton.instance) {\n      Singleton.instance = new Instance(name);\n    }\n    return Singleton.instance;\n  }\n}\n```\n\n#### 工厂模式 Factory [ˈfæktri]\n\n让其子类自己决定实例化哪一个工厂类。\n\n``` javascript\nclass A {\n  constructor() {\n    this.name = 'A';\n  }\n}\n\nclass B {\n  constructor() {\n    this.name = 'B';\n  }\n}\n\nclass C {\n  constructor() {\n    this.name = 'C';\n  }\n}\n\nclass Factory {\n  static create(product) {\n    switch (product.toUpperCase()) {\n      case 'A': return new A();\n      case 'B': return new B();\n      case 'C': return new C();\n      default:\n        throw new Error('no class');\n    }\n  }\n}\n```\n\n#### 抽象工厂模式 Abstract Factory [ˈæbstrækt] [ˈfæktri]\n\n创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。\n\n``` javascript\nclass A1 {\n  constructor() {\n    this.name = 'A1';\n  }\n}\nclass A2 {\n  constructor() {\n    this.name = 'A2';\n  }\n}\nclass B1 {\n  constructor() {\n    this.name = 'B1';\n  }\n}\nclass B2 {\n  constructor() {\n    this.name = 'B2';\n  }\n}\nclass FactoryA {\n  static create(product) {\n    switch (product.toUpperCase()) {\n      case 'A1':\n        return new A1();\n      case 'A2':\n        return new A2();\n      default:\n        throw new Error('no product');\n    }\n  }\n}\nclass FactoryB {\n  static create(product) {\n    switch (product.toUpperCase()) {\n      case 'B1':\n        return new B1();\n      case 'B2':\n        return new B2();\n      default:\n        throw new Error('no product');\n    }\n  }\n}\n\nclass AbstractFactory {\n  static create(factory) {\n    switch (factory.toUpperCase()) {\n      case 'A':\n        return FactoryA;\n      case 'B':\n        return FactoryB;\n      default:\n        throw new Error('no factory');\n    }\n  }\n}\n```\n\n#### 建造者模式 Builder [ˈbɪldə(r)]\n\n使用多个简单的对象一步一步构建成一个复杂的对象。\n\n``` javascript\nclass A {\n  constructor() {\n    this.name = 'A';\n  }\n}\n\nclass B {\n  constructor() {\n    this.name = 'B';\n  }\n}\n\nclass Builder {\n  constructor() {\n    this.a = new A();\n    this.b = new B();\n  }\n}\n```\n\n#### 原型模式 Prototype [ˈprəʊtətaɪp]\n\n用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。\n\n``` javascript\nclass Prototype {\n  constructor(name) {\n    this.name = name;\n  }\n\n  clone() {\n    return new Prototype(this.name);\n  }\n}\n```\n\n### 📘 结构模式 Structural Patterns [ˈstrʌktʃərəl] ['pætənz]\n\n结构模式，描述如何将类或者对象结合在一起形成更大、更复杂的结构，关注类和对象的组合。\n\n#### 适配器模式 Adapter [ə'dæptə]\n\n将一个类的接口转换成另外一个需要的接口，作为两个不兼容的接口之间的桥梁。\n\n``` javascript\nclass Standard {\n  execute() {\n    return false;\n  }\n}\n\nclass Instance {\n  action() {\n    return true;\n  }\n}\nclass Adapter {\n  static adapter(instance) {\n    instance.execute = instance.action;\n  }\n}\n```\n\n#### 桥接模式 Bridge [brɪdʒ]\n\n将抽象部分与实现部分分离，使它们都可以独立的变化。\n\n``` javascript\nclass Bridge {\n  execute(value) {\n    return value;\n  }\n}\n\nclass Instance {\n  constructor(value, bridge) {\n    this.value = value;\n    this.bridge = bridge;\n  }\n\n  execute() {\n    return this.bridge.execute(this.value);\n  }\n}\n```\n\n#### 组合模式 Composite [ˈkɒmpəzɪt]\n\n将对象组合成树形结构以表示\"部分-整体\"的层次结构。\n\n``` javascript\nclass Instance {\n  constructor(value) {\n    this.value = value;\n    this.children = [];\n  }\n\n  add(instance) {\n    this.children.push(instance);\n  }\n\n  toString() {\n    return this.value.toString() + this.children.map((child) =\u003e child.toString()).join('');\n  }\n}\n```\n\n#### 装饰模式 Decorator [ˈdekəreɪtə(r)]\n\n动态添加/覆盖对象现有对象中的行为。\n\n``` javascript\nclass Original {\n  constructor(value) {\n    this.value = value;\n  }\n\n  execute() {\n    return this.value;\n  }\n}\n\nclass Decorator extends Original {\n  superExecute() {\n    return this.value * 2;\n  }\n}\n```\n\n#### 外观模式 Facade [fəˈsɑːd]\n\n定义了一个高层接口，这个接口使得这一子系统更加容易使用。\n\n``` javascript\nclass A {\n  execute() {\n    return 'A';\n  }\n}\n\nclass B {\n  execute() {\n    return 'B';\n  }\n}\n\nclass C {\n  execute() {\n    return 'C';\n  }\n}\n\nclass Facade {\n  constructor() {\n    this.a = new A();\n    this.b = new B();\n    this.c = new C();\n  }\n\n  executeA() {\n    return this.a.execute();\n  }\n\n  executeB() {\n    return this.b.execute();\n  }\n\n  executeC() {\n    return this.c.execute();\n  }\n}\n```\n\n#### 享元模式 Flyweight [ˈflaɪweɪt]\n\n运用共享技术有效地支持大量细粒度的对象。\n\n``` javascript\nclass Flyweight {\n  constructor(value) {\n    this.value = value;\n  }\n}\n\nclass Instance {\n  constructor() {\n    this.items = [];\n  }\n\n  create(value) {\n    this.items.push(new Flyweight(value));\n    return this;\n  }\n}\n```\n\n#### 代理模式 Proxy [ˈprɒksi]\n\n为其他对象提供一种代理以控制对这个对象的访问。\n\n``` javascript\nclass Instance {\n  constructor() {\n    this.value = true;\n  }\n}\n\nclass Proxy {\n  constructor() {\n    return new Instance();\n  }\n}\n```\n\n### 📙 行为模式 Behavioral Patterns [bi'heivjərəl] ['pætənz]\n\n行为模式，描述如何清晰的划分类与对象的职责，关注对象之间的通信。\n\n#### 职责链模式 Chain Of Responsibility [tʃeɪn] [əv] [rɪˌspɒnsəˈbɪləti]\n\n将多个对象连接成一条链，沿着这条链传递请求，并处理该请求。\n\n``` javascript\nclass Start {\n  constructor(instance) {\n    this.instance = instance;\n  }\n\n  execute(value) {\n    this.instance.value += value * 1;\n  }\n}\n\nclass Process {\n  constructor(instance) {\n    this.instance = instance;\n  }\n\n  execute(value) {\n    this.instance.value += value * 2;\n  }\n}\n\nclass End {\n  constructor(instance) {\n    this.instance = instance;\n  }\n\n  execute(value) {\n    this.instance.value += value * 3;\n  }\n}\n\nclass Instance {\n  constructor() {\n    this.value = 0;\n    this.chain = [\n      new Start(this),\n      new Process(this),\n      new End(this),\n    ];\n  }\n\n  execute(value) {\n    this.chain.forEach((obj) =\u003e {\n      obj.execute(value);\n    });\n  }\n}\n```\n\n#### 命令模式 Command [kəˈmɑːnd]\n\n将一个请求封装成一个对象，从而使您可以用不同的请求对实例进行参数化。\n\n``` javascript\nclass Executor {\n  constructor() {\n    this.state = false;\n  }\n\n  execute() {\n    this.state = true;\n  }\n}\n\nclass Command {\n  constructor(instance) {\n    this.instance = instance;\n  }\n\n  execute() {\n    this.instance.execute();\n  }\n}\n\nclass Commander {\n  constructor(command) {\n    this.command = command;\n  }\n\n  execute() {\n    this.command.execute();\n  }\n}\n```\n\n#### 解释器模式 Interpreter [ɪnˈtɜːprətə(r)]\n\n实现了一个表达式接口，该接口解释一个特定的上下文。\n\n``` javascript\nclass Interpreter {\n  static execute(commend) {\n    return commend + 1;\n  }\n}\n\nclass Command {\n  constructor(commend) {\n    this.commend = commend;\n  }\n\n  execute() {\n    return Interpreter.execute(this.commend);\n  }\n}\n```\n\n#### 迭代器模式 Iterator [ɪtə'reɪtə]\n\n提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。\n\n``` javascript\nclass Iterator {\n  constructor(arr) {\n    this.i = 0;\n    this.arr = arr;\n  }\n\n  next() {\n    this.i += 1;\n    return this.arr[this.i];\n  }\n\n  hasNext() {\n    return this.index \u003c this.arr.length;\n  }\n}\n```\n\n#### 中介者模式 Mediator [ˈmiːdieɪtə(r)]\n\n提供了一个中介类处理不同类之间的通信，从而使其耦合松散。\n\n``` javascript\nclass Mediator {\n  static execute(instanceA, instanceB) {\n    instanceA.execute(instanceB.value);\n  }\n}\n\nclass Instance {\n  constructor(value) {\n    this.value = value;\n  }\n\n  execute(value) {\n    this.value = value;\n  }\n}\n```\n\n#### 备忘录模式 Memento [məˈmentəʊ]\n\n保存一个对象的某个状态，以便在适当的时候恢复对象。\n\n``` javascript\nclass Memento {\n  constructor() {\n    this.value = '';\n  }\n\n  set(value) {\n    this.value = value;\n  }\n\n  get() {\n    return this.value;\n  }\n}\n\nclass Instance {\n  constructor(value) {\n    this.value = value;\n  }\n\n  save(memento) {\n    memento.set(this.value);\n  }\n\n  restore(memento) {\n    this.value = memento.get();\n  }\n}\n```\n\n#### 观察者模式 Observer [əbˈzɜːvə(r)]\n\n当一个对象被修改时，则会自动通知依赖它的对象。\n\n``` javascript\nclass Instance {\n  constructor(value) {\n    this.value = value;\n    this.children = [];\n  }\n\n  add(observer) {\n    this.children.push(observer);\n  }\n\n  execute(value) {\n    this.value = value;\n    this.children.forEach((child) =\u003e child.execute(this));\n  }\n}\n\nclass Observer {\n  constructor(rate) {\n    this.value = 0;\n    this.rate = rate;\n  }\n\n  execute(instance) {\n    this.value = this.rate * instance.value;\n  }\n}\n```\n\n#### 状态模式 State [steɪt]\n\n允许对象在内部状态发生改变时改变它的行为。\n\n``` javascript\nclass State {\n  constructor(name) {\n    this.name = name;\n  }\n\n  execute() {\n    return this.name;\n  }\n}\n\nclass Instance {\n  constructor(state) {\n    this.state = state;\n  }\n\n  change(state) {\n    this.state = state;\n  }\n\n  execute() {\n    return this.state.execute();\n  }\n}\n```\n\n#### 策略模式 Strategy [ˈstrætədʒi]\n\n定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。\n\n``` javascript\nconst METHODS = {\n  addition: (a, b) =\u003e a + b,\n  subtraction: (a, b) =\u003e a - b,\n  multiplication: (a, b) =\u003e a * b,\n  division: (a, b) =\u003e a / b,\n  max: (a, b) =\u003e (a \u003e b ? a : b),\n  min: (a, b) =\u003e ((a \u003c b) ? a : b),\n};\n\nclass Strategy {\n  constructor(a, b) {\n    this.a = a;\n    this.b = b;\n  }\n\n  execute(method) {\n    return METHODS[method](this.a, this.b);\n  }\n}\n```\n\n#### 模板模式 Template [ˈtempleɪt]\n\n定义一个抽象类实现方法的框架，从而允许其子类实现具体的行为。\n\n``` javascript\nclass Template {\n  start() {}\n\n  end() {}\n\n  execute() {\n    return this.start() + this.end();\n  }\n}\n\nclass Instance extends Template {\n  constructor(a, b) {\n    super();\n    this.a = a;\n    this.b = b;\n  }\n\n  start() {\n    return this.a;\n  }\n\n  end() {\n    return this.b;\n  }\n}\n```\n\n#### 访问者模式 Visitor [ˈvɪzɪtə(r)]\n\n通过将方法的层次结构移动到一个对象中，将算法与对象结构分离。\n\n``` javascript\nclass Instance {\n  constructor(value) {\n    this.value = value;\n  }\n\n  execute(visitor) {\n    return visitor.execute(this);\n  }\n}\n\nclass Visitor {\n  constructor(rate) {\n    this.rate = rate;\n  }\n\n  execute(instance) {\n    return instance.value * this.rate;\n  }\n}\n```\n\n## Support\n\nPlease star ⭐️ the repository to show your support!\n\n## License\n\n[![License: CC BY-NC-ND 3.0](https://img.shields.io/badge/License-CC%20BY--NC--ND%203.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-nd/3.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz8264%2Fdesign-patterns-es","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fz8264%2Fdesign-patterns-es","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz8264%2Fdesign-patterns-es/lists"}