JavaScript 设计模式 - 第 1 章

🤓 简介

▶ 让我们开始吧

🙄 什么是模式？

🏷 设计模式的类别

构造函数模式

📝 摘要

🙏 感谢您的阅读！

🤓 简介

在这篇博客中，我将讨论并帮助您理解使用 JavaScript 编程语言的设计模式。我将尝试向您解释什么是模式，如何使用模式，它们的结构是什么等等。

不不不！别跟我装作 Michael Scott 的样子！一切都好，我会尽量信守承诺，保持简短、亲切、简洁。因此，我会把这篇文章分解成一个系列，叫做🎉 JavaScript 设计模式系列。🎉（……有点普通，但……🤷‍♂️）

▶ 让我们开始吧

编写可维护代码的最重要方面之一是能够注意到代码中重复出现的结构和功能并对其进行优化。设计模式提供的知识在编写可维护代码方面非常宝贵。

设计模式之父是克里斯托弗·沃尔夫冈·亚历山大（Christopher Wolfgang Alexander），一位具有广泛影响力的英裔美国建筑师、设计理论家，现任加州大学伯克利分校名誉教授。

🙄 什么是模式？

模式代表一种可复用的解决方案，可以应用于软件设计中常见的问题。我们可以简单地说，模式代表着解决问题的模板。

💡 实践智慧时刻：软件工程是一门解决问题的学科！

为什么要使用设计模式？

• 模式是经过验证的解决方案：它们使用经过验证的解决方案提供解决软件开发中问题的可靠方法，这些解决方案反映了帮助定义和改进它们的开发人员为模式带来的经验和见解。
• 模式易于重用：模式通常体现了一种开箱即用的解决方案，可以根据您的具体需求进行调整。这一特性使其非常健壮。
• 模式可以具有表现力：当您查看模式时，通常会有一组结构，因此可以说所提出的解决方案的“词汇”可以帮助相当优雅地表达相当大的解决方案。

模式提供通用的解决方案，可以防止应用程序开发过程中的小问题演变成大问题。设计模式通常可以减少文件大小，同时丰富开发人员的词汇量，从而加快沟通速度。

反复出现的现象

对某种模式的额外要求之一是证明它是一种重复出现的现象。这通常需要至少三个关键领域来证明，即所谓的“三法则”。

• 目的适用性——如何认为模式成功
• 实用性——为什么该模式被认为是成功的
• 适用性——该设计是否值得成为一种模式，因为它具有更广泛的适用性

#🏗 设计模式结构

模式以规则的形式呈现，建立以下之间的关系：

• 上下文
• 在这种背景下产生的一种力量体系
• 允许这些力量在上下文中自行解决的配置

设计模式成分

• 图案名称
• 上下文概要——模式能够有效满足用户需求的上下文
• 问题陈述——对所要解决的问题的陈述，以便我们理解模式的意图
• 解决方案——以易于理解的步骤和看法列表描述如何解决用户的问题
• 设计
• 实施——关于如何实施该模式的指南
• 插图——模式中类的直观表示
• 示例- 以最小形式实现模式
• 共同要求——可能需要哪些其他模式来支持所描述的模式的使用
• 关系
• 已知用途
• 讨论

🏷 设计模式的类别

创建型设计模式

创建型设计模式专注于处理对象创建机制，其中对象以适合您工作情况的方式创建。属于此类别的一些模式包括：

• 构造函数
• 工厂
• 抽象的
• 原型
• 单例模式
• 建造者

结构设计模式

结构模式关注对象组合，通常识别
实现不同对象之间关系的简单方法。它们有助于确保当系统的某个部分发生变化时，整个系统结构无需发生改变。属于此类别的一些模式包括：

• 装饰器
• 正面
• 蝇量级
• 适配器
• 代理人

行为设计模式

行为模式专注于改进或简化系统中不同对象之间的通信。一些行为模式包括：

• 迭代器
• 调解员
• 观察者
• 游客

构造函数模式

如果你已经是 JavaScript 高手🧙‍♂️，那么你可能对构造函数很熟悉。构造函数用于创建特定类型的对象。构造函数负责准备对象以供使用，并接受参数，这些参数用于在对象首次创建时设置成员变量的值。

🛑 重要提示：JavaScript 中不存在基于类的 OOP 意义上的类。JavaScript 使用对象。如果要将一些函数和属性封装在一起，则应该创建一个包含函数和属性的对象，而不是类。

在 JavaScript 中，构造函数通常被认为是实现实例的合理方法。正如我们之前所见，JavaScript 不支持类的概念，但它支持特殊的构造函数。只需在构造函数调用前加上关键字“new”，就可以告诉 JavaScript，该函数的行为类似于构造函数，并实例化一个新对象。

构造函数模式的最简单版本...

function SuperHero(name, superPower, age, height, weight){
   this.that = this; //these are member variables
   this.name = name;
   this.superPower= superPower;
   this.age = age;
   this.height = height;
   this.weight = weight;
}

//A prototype function that prints out data about our 🦸‍♂️
SuperHero.prototype.getSuperHero= function(){
     return "Superhero stats: name="+this.name+", super power="+this.superPower
     +",age="+this.age+", height="+this.height+" feet, weight="+this.weight+" pounds";
}

//Instantiating objects with new keyword, and passing data to our SuperHero //constructor
var IronMan = new SuperHero('Tony Stark', 'Genious, Playboy, Philantropist', 30, 6, 225);
var Hulk = new SuperHero('Bruce Banner', 'Green scary monster', 30, 8, 1400);

console.log(IronMan.getSuperHero());
console.log(Hulk.getSuperHero());

让我们创建一个实现相同功能的 ES6 类。

//syntactic sugar on top of the prototype-based programming model
class SuperHero{
   constructor(name, superPower, age, height, weight){ //"classes constructor
     this.that = this; //these are member variables
     this.name = name;
     this.superPower= superPower;
     this.age = age;
     this.height = height;
     this.weight = weight;
   }

   //a "class" member function that prints out data about our 🦸‍♂️
   getSuperHero(){
      return "Superhero stats: name="+this.name+", super power="+this.superPower
     +",age="+this.age+", height="+this.height+" feet, weight="+this.weight+" pounds";
   }   
}

//Instantiating objects with new keyword, and passing data to the constructor of
//our superhero "class"
const IronMan =new SuperHero('Tony Stark', 'Genious, Playboy, Philantropist', 30, 6, 225);
const Hulk = new SuperHero('Bruce Banner', 'Green scary monster', 30, 8, 1400);

console.log(IronMan.getSuperHero());
console.log(Hulk.getSuperHero());

这就是我们使用和实现构造函数模式的方式。

在下一章中，我们将讨论一个独特的小家伙，单例模式！:)

📝 摘要

• 模式代表一种可重复使用的解决方案，可以应用于软件设计中常见问题。
• 模式提供了通用的解决方案，可以防止应用程序开发过程中的小问题引发大问题。
• 在 JavaScript 中，不存在基于类的 OOP 意义上的类。JavaScript 使用对象来工作。
• 构造函数用于创建特定类型的对象。构造函数负责准备对象以供使用，并接受**参数，构造函数会在对象首次创建时使用这些参数来设置成员变量的值。**

🙏 感谢您的阅读！

请留下评论，告诉我关于您自己、您的工作、评论您的想法，并通过Twitter或LinkedIn与我联系。

让今年成为你的年份，让今年成为我们的年份。直到下次打字……

祝你玩得愉快！

☕ 支持我，让我保持专注！ 😊