JavaScript中的设计模式-代理模式

前言

设计模式在我们编程中是十分重要的！

设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

什么是设计模式？

在软件设计过程中，针对特定问题的简洁而优雅的解决方案。

把之前的经验总结并且合理运用到某处场景上，能够解决实际的问题。

设计模式五大设计原则（SOLID）

• S-单一职责原则

  即一个程序只做好一件事

• O-开放封闭原则

  可扩展开放，对修改封闭

• L-里氏置换原则

  子类能覆盖父类，并能出现在父类出现的地方

• I-接口独立原则

  保持接口的单一独立

• D-依赖导致原则

  使用方法只关注接口而不关注具体类的实现

为什么需要设计模式？

• 易读性

  使用设计模式能够提升我们的代码可读性，提升后续开发效率

• 可拓展性

  使用设计模式对代码解耦，能很好的增强代码的yi修改性和拓展性

• 复用性

  使用设计模式可以复用已有的解决方案，无需重复相同工作

• 可靠性

  使用设计模式能够增加系统的健壮性，使代码编写真正工程化

代理模式

定义：为一个对象提供一个代用品或者占位符，以便控制对它的访问。替身对象可对请求预先进行处理，再决定是否转交给本体对象。

假如项目中一个图片过大，短时间内加载不出来的时候，用户只能看见白屏，体验感就会非常糟糕，这时候我们就可以用一个替身来暂时替代图片。

当真身被访问的时候，我们先访问替身对象，让替身代替真身去做一些事情，之后在转交给真身处理。

应用场景：当我们不方便直接访问某个对象时，或不满足需求时，可考虑使用一个替身对象来控制该对象的访问。

来看这段代码：

// 原生函数
const rawImage = (() => {
	const imgNode = document.createElement("img");
	document.body.appendChild(imgNode);
	return {
		setSrc:(src)=> {
			imgNode.src = "./loading.gif";
			const img = new Image();
			img.src = src;
			img.onload = () => {
				imgNode.src = this.src;
			}
		}
	}
})();

rawImage.setSrc("http://xxx.gif");

这个xxx.gif的加载时间可能要到10s左右，我们首先预加载了一个loading图，用户看到的过程是最开始看见loading，当xxx加载完成后，也就是onload执行完后，就会做一个替换的效果，完成了这个功能。

思考：这段代码是不是耦合性太强了啊？

是的，loading的逻辑跟我们实际加载的逻辑是耦合在一起的，我们要做两个事情，一个是设置loading，一个是设置图片链接。那我们给他分开，用代理函数去做预处理，加载loading，用原生函数提供一个设置图片链接的功能。

实现一下：

// 原生函数
const rawImage = (() => {
	const imgNode = document.createElement("img");
	document.body.appendChild(imgNode);
	return {
		setSrc:(src)=> {
			imgNode.src = src;
		},
	};
})();

// 代理函数
const proxyImage = (() => {
	const img = new Image();
	img.onload = () =>{
		rawImage.setSrc(this.src);
	};
	return {
		setSrc:(src) => {
			rawImage.setSrc("./loading.gif");
			img.src = src;
		},
	};
})();

proxyImage.setSrc("http://xxx.gif");

我们通常会进行一些请求的预处理的时候使用代理模式。