javascript设计模式

设计模式 是针对常见问题所采用的最佳实践和解决方案。这些模式帮助开发者编写出更易于维护、扩展和复用的代码。

一般指《设计模式：可复用面向的对象软件的基础》一书提到的23中常见的软件开发模式。

单例模式

单例对象整个系统需要保证只有一个存在

单例方法

调用方法获取单例对象，重复获取不会创建新的对象

class SingleTon{
  static #instance

  static getInstance(){
    if(this.#instance === undefined){
      this.#instance = new SingleTon();
    }
    return this.#instance;
  }
}


//------测试代码-------
const s1 = SingleTon.getInstance();
const s2 = SingleTon.getInstance();
console.log(s1 === s2);//true

vant中的toast和notify组件

toast轻提示组件-默认使用单例模式

function getInstance(){
 if (!queue.length || allowMultiple){
   const instance = new createInstance();
   queue.push(instance);
 }
 return queue[queue.length - 1];
}

notify通知组件

单例思想

vue2/vue3中use方法

工厂模式

在JavaScript中，工厂模式指的是一个函数调用，该函数返回一个新对象的函数。

示例

//工厂模式
function FoodFfactory(name,color){
  return {
    name:name,
    color:color
    }
}
const apple = FoodFfactory('apple','red');

//构造函数
function Food(name,color){
  this.name = name;
  this.color = color;
}
const apple1 = new Food('apple','red');

开发实例-Vue3-createApp

1.避免在测试其间，全局配置污染其余测试用例。

2.全局改变Vue实例的行为，移到Vue实例上。

axios-create

允许自定义配置创建新实例。

观察者模式

在对象之间定义一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

发布订阅模式

发布订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。 与观察者模式区别：有一个中间商事件总线

原型模式

原型模式是创建型模式的一种。特点在于通过复制原型对象来创建新对象，从而避免了手动创建对象的麻烦。

1.Object.create()将对象作为原型创建新对象

const food = {
  name:'apple',
  eat(){
    console.log(`${this.name} is eating`);
  }
}

const apple = Object.create(food);

代理模式

代理模式，它为另一个对象提供一种代理以控制对这个对象的访问。

用户通过代理访问对象，而不必直接访问对象。

代理模式-缓存代理

迭代器模式

迭代器模式，它提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示。遍历

for in 和for of

for in 遍历对象除了symbol以外的可枚举属性，包括继承的可枚举属性

for of 遍历包括数组、字符串、Set、Map、Generator、DOM等可迭代对象，遍历的是可迭代对象的值，不包含索引

迭代器模式-迭代协议

迭代协议，本质是一种协议而非语法。它定义了可迭代对象和迭代器之间的一种关系，使得可迭代对象可以通过迭代器进行遍历。