JavaScript 设计模式 – 通过示例进行解释.docx

? 大家好！在本文中，我将解释什么是设计模式以及它们为何有用。 目录 什么是设计模式？ 创意设计模式 单例模式 工厂方法模式 抽象工厂模式 建造者模式 原型模式 结构设计模式 适配器模式 装饰模式 立面图案 代理模式 行为设计模式 责任链模式 迭代器模式 观察者模式 什么是设计模式？ 设计模式因《设计模式：可重用面向对象软件的元素》一书而流行起来，该书由四位 C++ 工程师于 1994 年出版。 本书探讨了面向对象编程的功能和陷阱，并描述了 23 种有用的模式，您可以实现这些模式来解决常见的编程问题。 这些模式不是算法或特定的实现。它们更像是想法、观点和抽象概念，在某些情况下可用于解决特定类型的问题。 模式的具体实现可能会根据许多不同的因素而有所不同。但重要的是它们背后的概念，以及它们如何帮助我们为我们的问题找到更好的解决方案。 话虽这么说，请记住这些模式是在考虑 OOP C++ 编程的情况下想到的。当涉及更现代的语言（如 JavaScript 或其他编程范例）时，这些模式可能不会同样有用，甚至可能会向我们的代码添加不必要的样板文件。 尽管如此，我认为了解它们作为一般编程知识还是有好处的。 旁注：如果您不熟悉编程范例或OOP，我最近写了两篇关于这些主题的文章。 无论如何...现在我们已经完成了介绍，设计模式分为三个主要类别：创建模式、结构模式和行为模式。让我们简要探讨一下它们。 创意设计模式 创建模式由用于创建对象的不同机制组成。 单例模式 Singleton是一种设计模式，可确保一个类只有一个不可变的实例。简单地说，单例模式由一个无法复制或修改的对象组成。当我们想要为我们的应用程序提供一些不可变的单点事实时，它通常很有用。 举例来说，我们希望将应用程序的所有配置都放在一个对象中。我们希望禁止对该对象进行任何复制或修改。 实现此模式的两种方法是使用对象文字和类： const Config = { ?start: () = console.log(App has started), ?update: () = console.log(App has updated),}// We freeze the object to prevent new properties being added and existing properties being modified or removedObject.freeze(Config)Config.start() // App has startedConfig.update() // App has updatedConfig.name = Robert // We try to add a new keyconsole.log(Config) // And verify it doesnt work: { start: [Function: start], update: [Function: update] } 使用对象字面量 class Config { ? ?constructor() {} ? ?start(){ console.log(App has started) } ? ? ?update(){ console.log(App has updated) }} ?const instance = new Config()Object.freeze(instance) 使用类 工厂方法模式 工厂方法模式提供了一个用于创建对象的接口，这些对象在创建后可以进行修改。最酷的一点是，创建对象的逻辑集中在一个地方，从而简化并更好地组织我们的代码。 这种模式被大量使用，也可以通过两种不同的方式实现，通过类或工厂函数（返回对象的函数）。 class Alien { ? ?constructor (name, phrase) { ? ? ? ?this.name = name ? ? ? ?this.phrase = phrase ? ? ? ?this.species = alien ? ?} ? ?fly = () = console.log(Zzzzzziiiiiinnnnnggggg!!) ? ?sayPhrase = () = console.log(this.phrase)}const alien1 = new Alien(Ali, Im Ali the alien!)console.log(alien1.name) // output: Ali 使用类 function Alien(name, phrase) { ? ?this.name = name ? ?this.phrase =