设计模式学习之策略模式在前端的应用

策略模式是23种基本设计模式中的对象行为型模式，在我的设计模式学习之策略模式一文中已经对其进行了简单的介绍，不过使用的是Java语言编写示例代码。本文将介绍这一模式在前端中的应用，我将使用js代码进行举例说明。

1 使用JS实现策略模式

策略模式本身的思想比较简单，就是在我们有众多实现方法可以选择的时候，如何封装代码以符合优秀代码的基本原则如封闭原则等。在Java中需要很多个类来实现，有策略接口类、其多个实现类、上下文Context类和调用类等等，在Js中就没有这么复杂了，看下面的例子：

假如现在你需要完成如下的需求：在疫情期间，你需要实现一个疫苗查询接口，能够根据输入的疫苗编码返回对应的疫苗数据，如：输入chinaVaccine返回中国疫苗，输入americaVaccine返回漂亮国疫苗，如果输入的字符无法识别，返回输入内容无效，使用JS的策略模式我们可以这么实现：

const vaccineDict = {
	chinaVaccine: () => {
		return "中国疫苗"
	},
	russiaVaccine: () => {
		return "俄罗斯疫苗"
	},
	americaVaccine: () => {
		return "漂亮国疫苗"
	}
}

class Strategy {
	getVaccineInfo(vaccineCode) {
		if (vaccineDict[vaccineCode]) {
			return vaccineDict[vaccineCode]();
		} else {
			return "输入内容无效"
		}
	}
}

const strategy = new Strategy();
strategy.getVaccineInfo('chinaVaccine');
strategy.getVaccineInfo('demo');

不要惊讶，使用JS实现策略模式就是这么简单，可以直接使用一个Object作为key和策略实现方法的映射，在使用的时候直接根据输入参数执行对应的策略方法即可。

关于JS的策略模式，我发现这篇知乎上的文章写的也很通俗易懂：JS设计模式之策略模式。