当前位置：首页 > news >正文

前端常用的设计模式

news 2025/8/21 13:12:36

设计模式：是一种抽象的编程思想，并不局限于某一特定的编程语言，而是在许多语言之间是相通的；它是软件设计中常见的问题的通用、可反复使用、多少人知晓的一种解决方案或者模板。一般对与从事过面向对象编程的人来说会更熟悉一些。
设计模式的意义：指导我们如何写出可维护、可复用、可扩展及灵活的代码。
接下来我们来简单了解一下前端开发过程中的一些常用的设计模式。

1.单例模式

使用场景

当需要一个对象去贯穿整个应用系统中，且这个对象中的数据是系统中全局共享的。比如，Vue 中的 Vuex 中的 store。

实现方式

通过隐藏指定的Class 构造函数来创建或获取唯一实例的一种实现方式；
使用闭包保存局部作用域中的单例对象并返回。

const SingleInstance = (function(){function SingleClas(){}let singleObj;return {getInstance:function(){if(!singleObj){singleObj = new SingleClas();}return singleObj;}}
})();const instance1 = SingleInstance.getInstance();
const instance2 = SingleInstance.getInstance();
console.log(instance1 === instance2);//true

注意事项

因为单例模式会引入全局状态，所以应用开发过程中尽量避免大量的单例模式的使用。

2. 发布-订阅模式（有的叫消息队列模式）

思想：

在发布-订阅模式中，有两种类型的对象：

发布者：是事件的发出者，通常维护一个事件列表，并且可以向列表中添加或者删除事件；当某个事件发生时，将这个事件通知给所有的订阅者。
订阅者：是事件的接收者，它们订阅了某个事件，并且在这个事件发生时接收对应的通知。

使用场景

他是一种将发布者和订阅者解耦的设计模式，在前端开发中，可以使用该模式实现组件之间的通信。这个模式应该是我们平时接触的最多的了，JavaScript 中的事件订阅响应机制。比如 Vue 中的事件总线

实现方式

//定义一个发布者
let publisher = {let events:{},//定义一个对象，用来存放事件列表//定义添加事件的方法，添加到事件列表中addEvent(event,callback){if(!events[event]){this.events[event] =[];}this.events[event].push(callback);},//定义删除事件的方法removeEvent(event,callback){if(this.events[event]){for(let i = 0;i<this.events[event].length; i++){if(this.events[event][i] === callback){this.events[event].splice(i,1);break;}}}},//发布事件publishEvent(event,data){if(this.events[event]){for(let i=0;i < this.events[event].length; i ++){this.events[event][i](data);}}}
};//定义一个订阅者
let subscriber1 = {//处理事件回调handleEvent(data){//...这里处理data操作}
};//订阅事件
publisher.addEvent('event1',subscriber1.handleEvent);//发布事件
publisher.publishEvent('event','Hi event1 happend');//取消订阅
publisher.removeEvent('event1',subscriber1.handleEvent);

3. 观察者模式 ‘等效于’ 发布-订阅模式

使用场景

该模式跟发布订阅模式有点像，有很多地方把这个模式等同于发布-订阅模式。
当对象间存在一对多的依赖关系时，可以使用观察者模式，当被观察的对象发生变化时，其所有的观察者都会收到通知并进行相应的操作。在 javascript 中可以使用回调函数或者事件监听来实现观察者模式。观察者模式通常被用来实现组件间的数据传递和事件处理。比如 React 中的 Redux 和事件处理库 EventEmitter

实现方式

定一个被观察对象 Subject，当其发生改变时通知所有的观察者；
定义观察者 Observer ，是观察被观察对象的对象，当Subject 发生改变时，会接收到通知并进行相应的处理。

class Subject{constructor(){ this.observers =[];}addObserver(observer){this.observers.push(observer);}removeObserver(observer){this.observers = this.observer.filter(ob => ob !== observer);}notify(data){this.observers.forEach(ob => ob.update(data));}
}class Observer{update(data){//...这里处理回调逻辑console.log(data+'data发生改变了');}
}const subject = new Subject();
const ob1 = new Observer();
const ob2 = new Observer();subject.addObserver(ob1);
subject.addObserver(ob2);
subject.notify('wow');
//wow data发生改变了
//wow data发生改变了

4. 装饰者模式

使用场景

动态的给一个对象或者组件添加额外的行为或样式。可以让我在不改变原有代码的情况下给组件添加新的行为和样式。这也是‘装饰’一词的由来，不改变原有的，继续往上添加行为或样式。

实现方式

方式一：通过扩展对象的属性或者方法实现

//原始对象
const obj = {f1(){console.log("我是 f1");}
}
//创建一个装饰函数，扩展 obj 的方法
const decoratorFn=(obj)=>{obj.f2 = ()=>{console.log("我是 f2");}return obj;
}const decObj = decoratorFn(obj);//装饰 obj
decObj.f1();//我是 f1
decObj.f2();//我是 f2

方式二：通过扩展对象的原型来实现

//定义一个原始对象
function F1(){}
//在对象的原向上定义一个方法
F1.prototype.f1 = ()=>{console.log("我是 f1");}
//定义一个装饰函数
const decoratorFn=(clazz)=>{clazz.prototype.f2= ()=>{console.log("我是 f2");}
}
//使用装饰器函数扩展原型
decoratorFn(F1);
const obj = new F1();
obj.f1();//我是 f1
obj.f2();//我是 f2

5. 代理模式

思想：

为一个对象提供一个替代品或者是占位符，以便控制对它的访问。在前端开发中该模式经常被用来处理一些复杂或者耗时的操作，它通过引入一个代理对象来控制对原是对象的访问，这个代理对象类似于原始对象的中介，客户跟中介交互，中介再跟原始对象交互。有的地方也叫 “中介者模式”。
比如：图片的懒加载、缓存等。

实现方式

//我们第一个原始的 image 对象
class Image{constructor(url){this.url = url;}//定义加载图片的方法load(){console.log('加载图片')}
}//定义一个代理对象 实现延迟加载图片
class ProxyImage{constructor(url){this.url = url;this.image = null;}//定义加载图片的方法load(){if(!this.image){this.image = new Image(this.url)console.log('延迟加载');//可以使用占位符代替}this.image.load();//加载图片}
}const img1 = new ProxyImage('http://...img1.png');
const img2 = new ProxyImage('http://...img2.png');
img1.load();//延迟加载， 加载图片
img1.load();//加载图片
img2.load();//延迟加载 加载图片