前端常用的设计模式-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端常用的设计模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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();//延迟加载 加载图片