浏览器中的设计模式

单例模式

概念

单例模式是一种只允许创建一个实例的模式。在前端开发中，常用于创建全局唯一的对象，例如全局的状态管理器、日志记录器等。单例模式可以保证全局只有一个实例，避免了重复创建和资源浪费的问题。

function Person(name) {
    this.name = name;
}

Person.prototype.getName = function() {
    console.log(this.name);
}

function getInstance(name) {
    if(!this.instance) {
        this.instance = new Person(name);
    }

    return this.instance;
}

let a = getInstance('zhangsan');
let b = getInstance('lisi');

console.log(a==b);   // true

应用场景

缓存，全局状态管理等。

用单例模式实现请求缓存

↑ 如果是同一个请求，就会返回缓存🙋‍🙋

发布订阅模式（观察者模式）

概念

观察者模式是一种对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会自动更新。在前端开发中，常用于实现事件监听和消息订阅等。观察者模式可以降低对象间的耦合度，提高代码的可读性和可复用性。

应用场景

从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。

思想：
PubSub（发布订阅）：

1. list --> 对象形式，{type:订阅内容，subs: [订阅者]
2. publish --> 发布
3. subscribe --> 订阅

用发布订阅模式实现用户上线订阅

、

Javascript中的设计模式

原型模式

定义

复制已有对象来创建新的对象

应用场景

JS中对象创建的基本模式

代理模式

定义

可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。

应用场景

监控，代理工具，前端框架实现等等。

迭代器模式

定义

在不暴露数据类型的情况下访问集合中的数据。

应用场景

数据结构中有多种数据类型，链表，树等，提供通用操作接口。

前端框架中的设计模式

代理模式

前端框架中对DOM操作的代理

组合模式

定义

可多个对象组合使用，也可单个对象独立使用。

应用场景

DOM，前端组件，文件目录，部门。