前言

再js中存在与很多设计模式，例如常见的单例模式,观察者模式，发布订阅模式等，虽然再日常的开发中可能很少会用到这样的设计模式，但是对于有些地方确实用起来比较简洁舒适，例如，我现在定义了一组数据跨模块共享，可以跨模做数据处理，调用实例方法添加或者删除数据。这样除了使用到vuex pinia 还可以使用到我们的订阅发布模式。下面逐一讲解那些常见的设计模式

单例模式

单例模式的表现形式为，整个系统需要保证只有一个实例存在

class SingleTon {
 static #instance;
 static getInstance() {
   if (!this.#instance == undefined) {
     this.#instance = new SingleTon();
   }
   return this.#instance;
 }
}
const a = SingleTon.getInstance();
const b = SingleTon.getInstance();
console.log(a === b); // true

下面我们可以看一下vant组件库内使用到的单例模式，在vant组件内的Toast 和 Notify呢都是用到了单例模式，下面我们看一下他们的单例模式是如何进行实现的

function getInstance() {
 if (!queue.length || c) {
   const instance = createInstance();
   queue.push(instance);
 }
 return queue[queue.length - 1];
}
/**
* Display a text toast
*/
export function showToast(options: string | ToastOptions = {}) {
 if (!inBrowser) {
   return {} as ToastWrapperInstance;
 }
 const toast = getInstance();
 const parsedOptions = parseOptions(options);
 toast.open(
   extend(
     {},
     currentOptions,
     defaultOptionsMap.get(parsedOptions.type || currentOptions.type!),
     parsedOptions,
   ),
 );
 return toast;
}

这个是Toast组件的showToast方法， toast调用方法获取实例，那么此时getInstance内先判断queue的长度，此时queue的长度为0， 那么就睡进入if内首次创建实例push到queue内，那么下次就会变为false，allowMultiple默认为false，因为vant组件也支持创建多个。Notify呢也差不多就不讲了，感兴趣的可以再gitup上看一下。

工厂模式

工厂模式的表现形式为，只要调用即可返回一个全新的对象

//工厂模式
function a(name, age) {
 return { name, age };
}
const person1 = a('John', 30);
//构造函数
function b(name, age) {
   this.name = name;
   this.age = age;
}
const person2 = new b('Jane', 25);

这里为什么还要写一个构造函数呢，是因为这两个看起来效果是一样的，都是返回一个对象那么工厂模式的优势是什么呢。对于构造构造函数这种方式来说，同一个构造函数的每个根实例共享相同的全局配置，这样容易造成实例混乱。工厂模式的表现在于每个对象都有自己的实例，不会收到影响，例如axios，当我需要两个axios的时候使用axios.create是会给我返回了两个实例，那么他们两个之间就不会相互造成影响

import axios from "axios";
// 创建一个 axios 实例
const request = axios.create({
  baseURL: "/dev", // 设置基础 URL
  timeout: 10000, // 设置请求超时时间
});

观察者模式

观察者模式是我们都比较熟悉的，他呢是在对象之间定义一个一对多的依赖，当被观察者的状态被改变的时候所有的依赖都会自动接收到通知。

window.addEventListener('load',()=>{console.log('load触发了');})
// vue
watch: {
 obj(newvalue){
   console.log(newvalue);
 }
}

上方呢就是我们经常用到的观察者模式。观察者模式下目标对象只能存在一个,观察者可以是多个，当目标对象状态发生改变的时候观察者触发对应的函数