从今天开始，我将连续更新javascript的设计模式，资料来源主要是https://www.patterns.dev/ 这里涵盖了所有的设计模式，主要内容来自对这个网站的翻译加上自己的理解，也是自我学习的过程
前沿
设计模式是软件开发的基本组成部分，因为在大型的软件设计过程中，经常会出现一些设计模式，它可以用来优化我们一些代码逻辑和处理方式
过去的一段时间中，web整个开发体系发生了迅猛的变化，虽然一些设计模式可能已经没有了对应的价值，但是也有其中的一些设计模式已经发展到了解决一些现代问题
react相信大家都比较熟悉，在最近一段时间内获得了巨大的关注，哦不对，一直以来react都备受关注，从npm包的下载量就能很明显的看出来，react一直稳居几大框架榜首
也由于react的流行，传统的设计模式已经被修改优化，并且创建了新的设计模式，以便于在现代web开发中提供对应的价值，比如react的hook特性，可以替代很多传统设计模式，所以才有了这个专题，希望能够通过一起学习将设计模式的实现、好处、缺陷以及面试统统拿下
单例模式
单例表示的是可以实例化一次的类，并且可以全局访问。这个单一的实例可以在我们的应用程序中共享，所以单例模式非常适合管理应用程序中的全局状态
我们看一下单例到底是一个什么样的内容，我们可以构建一个Counter类，它有以下方法
- 返回实例（getInstance）
- 返回计数器当前的值（getCount）
- count值加一（increment）
- count值减一（decrement）
let counter = 0
class Counter {
getInstance() {
return this
}
getCount() {
return counter
}
increment() {
return counter
}
decrement() {
return --counter
}
}虽然上述的功能都实现了，但是这个类实际上是不符合标准的，标准规定的是这个类只能实例化一次，但是上面的代码我们可以创建很多Counter实例
代码语言：javascript复制const counter1 = new Counter()
const counter2 = new Counter()
console.log(counter1.getInstance() == counter2.getInstance()) // false通过两次实例化的方式之后，获取到的实例并不相等，两个实例只是不同实例的引用
只能一个实例
确保我们只能创建一个实例的办法是创建一个名为instance的变量，在构造函数中，我们可以在创建实例的时候将实例设置为对实例的引用，然后检查instantce变量是否已经有值来防止重复实例化，如果已经实例化，则抛出错误让用户知道已经存在了实例
代码语言：javascript复制let counter = 0
let instance = null
class Counter {
constructor() {
if(instance) {
throw new Error("只能有一个Counter实例")
}
}
getInstance() {
return this
}
getCount() {
return counter
}
increment() {
return counter
}
decrement() {
return --counter
}
}
const counter1 = new Counter();
const counter2 = new Counter();
// Error: You can only create one instance!这样就不能创建多个实例了
Object.freeze
这个时候我们需要导出我们的实例，但是在导出之前，我们应该使用Object.freeze方法确保初始化实例不会被修改，降低使用风险
代码语言：javascript复制const singletonCounter = Object.freeze(new Counter());
export default singletonCounter;这样我们就将singletonCounter导出了，我们可以在任意JavaScript文件使用singletonCounter
在不同的文件调用，数据都是共享的，都能够改变counter值，并且能够读取到最新的值
优缺点
将实例化限制为一个实例会节省大量内存空间，不用每次都给新的实例分配内存，在整个应用中这个实例都能够被引用，但是单例模式被认为是一种反模式，应该在JavaScript中避免
其它的编程语言中，比如java或者c ，不可能跟javascript一样直接创建对象，在面向对象的编程语言中，需要创建一个类，这个类会创建一个对象，该创建的对象具有类实例的值，就像javascript中的实例值一样
其实上面的一系列的操作，完全可以使用一个简单的常规对象来替代，比如
代码语言：javascript复制let count = 0;
const counter = {
increment() {
return count;
},
decrement() {
return --count;
}
};
Object.freeze(counter);
export { counter };这样可以实现Counter类等价的效果
还有一些隐藏风险，比如我们在一个单例中引入了另一个单例，这里我们创建了一个superCounter的实例，其中引入了Counter实例，在别的文件中如果引入Counter实例可能就会造成风险，一旦调用了super Counter，那Counter也会被改变
代码语言：javascript复制import Counter from "./counter";
export default class SuperCounter {
constructor() {
this.count = 0;
}
increment() {
Counter.increment();
return (this.count = 100);
}
decrement() {
Counter.decrement();
return (this.count -= 100);
}
}总结
一个单例实例应该能够在整个应用中被引用，拥有全局行为也会被觉得是一个糟糕的设计，因为你可以随意更改它，但是你并不知道你到底在哪里更改了它
在react中，经常通过redux或者react context等状态管理工具来进行全局状态管理，而不是使用单例模式，即使它们看起来这么像单例模式，这些工具提供了只读状态而不是单例的可变状态，使用redux时，只有纯函数的reducer可以在组建内部通过调度程序发送action进行状态更新，这些工具也存在全局状态的缺点，但是它可以让全局状态按照我们制定的规则或者顺序发生改变
