前端设计模式之工厂模式
什么是设计模式
设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。
项目中合理的运用设计模式可以完美的解决很多问题，每种模式在现在中都有相应的原理来与之对应，每一个模式描述了一个在我们周围不断重复发生的问题，以及该问题的核心解决方案，这也是它能被广泛应用的原因。
- 模式：在某些场景下，针对某类问题的某种通用的解决方案
- 场景：项目所在的环境
- 问题：约束条件，项目目标等
- 解决方案：通用、可复用的设计，解决约束达到目标
为什么前端需要了解设计模式
使用设计模式是为了可复用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。
在日常开发中大部分前端都在开发的中，进行组件、方法等封装、提炼的时候或多或少已经使用了一些设计模式的理念， 但是由于对设计模式的概念模糊，理解不够，从而导致设计整体架构的时候，会有各种局限性，拓展性、可读性、维护性变差，不得不多次重构甚至重写。
在 ts 在前端开发中加速推进的同时，合理的设计模式使得项目从架构、设计、迭代、维护都有一定质量的保障。
设计模式之工厂模式
简单工厂模式
简单工厂模式最大的优点在于实现对象的创建和对象的使用分离，将对象的创建交给专门的工厂类负责，但是其最大的缺点在于工厂类不够灵活，增加新的具体产品需要修改工厂类的判断逻辑代码，而且产品较多时，工厂方法代码逻辑将会非常复杂
举个栗子，宠物有很多种，我们目前有
class Dog { // 狗狗
constructor(name) { console.log(name) }
}
class Cat { // 小猫
constructor(name) { console.log(name) }
}
class Mouse { // 小老鼠
constructor(name) { console.log(name) }
}
我们正常需要去各个进货点去购买对应的小宠物
new Dog('Spike')
new Cat('Tom')
new Mouse('Jerry')
首先上述是同属一类的实例，我们如果要去各个进货点购买小宠物的话，劳累又伤神，所以我们可以去一家宠物店挑选我们需要的小宠物
class Pet { // 小小的宠物店
constructor(type, name) {
this.pet = ""
switch (type) {
case 'dog': this.pet = new Dog(name); break;
case 'cat': this.pet = new Cat(name); break;
case 'mouse': this.pet = new Mouse(name); break;
default: this.pet = '你还没有小宠物，快去买一只吧';
}
}
}
// 购买新的小宠物
new Pet('dog', 'Spike')
new Pet('cat', 'Tom')
new Pet('mouse', 'Jerry')
简单工厂模式其实并不算是一种设计模式，更多的时候是一种编程习惯。
抛开class类，我们采用方法来写一个类简单工厂模式的代码
function getFunction(path, params) { // get请求
console.log(path, params)
}
function postFunction(path, params) { // post请求
console.log(path, params)
}
function putFunction(path, params) { // put请求
console.log(path, params)
}
function ajaxSend(type, path, params) { // ajax发送请求
switch (type) {
case 'post': {
postFunction(path, params)
break;
};
case 'put': {
putFunction(path, params)
break;
};
default:
getFunction(path, params)
}
}
ajaxSend('get', 'path', 'params')
如上就是我们日常对 ajax 发送请求方法的简单封装，根据传入的 type 类型来匹配不同的发送请求的通用方法，在同一种类型的方法各自实现自己的逻辑，比如 get 请求参数放在 query 从 url 传递给后台，而 post 跟 put 的参数则是放在 body 里面发送给后台。
工厂方法模式(Factory Method)
工厂方法模式是对简单工厂的进一步优化， 在工厂方法模式中，我们不再提供一个统一的工厂类来创建所有的对象，而是针对不同的对象提供不同的工厂。也就是说每个对象都有一个与之对应的工厂。说的好像挺复杂，简单来说就是解决简单工厂模式存在不方便添加新的类的问题，因为添加新的类以后依然需要修改工厂函数。
那我们再接着上面的宠物例子，讲小宠物店升级一番
const Pet = (() => { // 宠物店升级啦
const pets = {
dog(name) { console.log(name) },
cat(name) { console.log(name) },
mouse(name) { console.log(name) },
duck(name) { // 我是新来的宠物小鸭子
console.log(name)
}
}
return class {
constructor(type, name) {
try { return pets[type](name) }
catch (error) { console.log('你还没有小宠物，快去买一只吧') }
}
}
})()
// 重新购买小宠物
new Pet('dog', 'Spike')
new Pet('cat', 'Tom')
new Pet('duck', 'Duck')
宠物店升级之后，我们在宠物店进货的时候，想加入新宠物-小鸭子，只需要将 duck 这个小鸭子直接上架即可，而在简单工程模式中，我们不仅仅要去小鸭子的场地进一只小鸭子，还需要在 Pet 宠物店将小鸭子上架。
如上所示，我们也可以将之前的 ajax 请求方法改造一波
const ajaxType = {
get(path, params) {
console.log(path, params, 'query')
},
post(path, params) {
console.log(path, params, 'body')
},
put(path, params) {
console.log(path, params, 'body')
}
}
function ajaxSend(way, path, params) { // ajax发送请求
try { ajaxType[way](path, params) }
catch (error) { console.log('暂无匹配方法') }
}
ajaxSend('get', 'path', 'params')
抽象工厂模式(Abstract Factory)
抽象工厂模式（Abstract Factory Pattern）是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。
在抽象工厂模式中，接口是负责创建一个相关对象的工厂，不需要显式指定它们的类。每个生成的工厂都能按照工厂模式提供对象。
上面我们已经开了一个普通宠物店，而我们的生意慢慢的有了起色，这个时候想要做大做强，除了引入新的小宠物之外还需要不断的创新，于是我们开了一家水族馆。
class headPet { // 宠物总店
sellpet(name) { // 出售宠物
console.log('出售一只宠物', name)
}
desert(name) { // 遗弃宠物
console.log('遗弃一只宠物', name)
}
operation(name, type) {
switch (type) {
case 'sell': {
this.sellpet((name))
break
}
default: {
this.desert((name))
}
}
}
}
class normalPet extends headPet { // 普通宠物分店
constructor() {
super()
}
dog(name, type) {
this.operation(name, type)
}
cat(name, type) {
this.operation(name, type)
}
mouse(name, type) {
this.operation(name, type)
}
}
class fishPet extends headPet { // 水族馆分店
constructor() {
super()
}
shark(name, type) {
this.operation(name, type)
}
whale(name, type) {
this.operation(name, type)
}
}
function selectPet(shop) {
switch (shop) {
case 'normal': {
return new normalPet()
}
case 'fish': {
return new fishPet()
}
default: {
console.log('暂无此分店哦！')
}
}
}
const normal = selectPet('normal')
normal.dog('Spike', 'sell') // 出售一只狗狗
normal.cat('Tom', 'desert') // 遗弃一只病猫
normal.mouse('Jerry', 'sell') // 出售一只小老鼠
const fish = selectPet('fish')
fish.shark('Shark', 'desert') // 遗弃一条死鱼
fish.whale('Whale', 'sell') // 出售一只鲸鱼
如上我们通过选择不同的类型进入不同的店铺购买或遗弃小宠物，用抽象工厂完成了一个简单去各分店的功能，接下来用类似方法，我们也顺便改造一波 ajax 请求
function getFunction(path, params) { // get请求
console.log(path, params)
}
function postFunction(path, params) { // post请求
console.log(path, params)
}
function putFunction(path, params) { // put请求
console.log(path, params)
}
function ajaxInterface(type, path, params) { // ajax发送抽象
switch (type) {
case 'post': {
return postFunction(path, params)
break;
};
case 'put': {
return putFunction(path, params)
break;
};
default:
return getFunction(path, params)
}
}
function user() {
const USER_URL_MAP = {
getUser: 'getUserUrl',
updateUser: 'updateUserUrl',
}
return {
getUser(params) {
return ajaxInterface('get', USER_URL_MAP['getUser'], params)
},
updateUser(params) {
return ajaxInterface('post', USER_URL_MAP['getUser'], params)
}
}
}
function order() {
const ORDER_URL_MAP = {
getOrder: 'getOrderUrl',
getOrderList: 'getOrderUrl',
setOrder: 'setOrderUrl',
delOrder: 'delOrderUrl',
updateOrder: 'updateOrderUrl',
}
return {
getOrder(params) {
return ajaxInterface('get', ORDER_URL_MAP['getOrder'], params)
},
getOrderList(params) {
return ajaxInterface('get', ORDER_URL_MAP['getOrderList'], params)
},
delOrder(params) {
return ajaxInterface('post', ORDER_URL_MAP['delOrder'], params)
}
}
}
function senUrl(businessType) {
switch (businessType) {
case 'user': {
return user
break
}
case 'order': {
return order
break
}
default: {
console.log('无此业务类型')
}
}
}
const userAction = senUrl('user')
userAction().getUser('用户信息哦')
const orderAction = senUrl('order')
orderAction().getOrder('订单信息哦')
上面用类似抽象工厂的方法实现了一个 ajax 请求方法的封装，将业务层报了一层，底层跟业务层剥离，可以针对各个业务自己实现部分的业务，仅供参考。
附加信息
完整的 demo 地址：项目实战 demo，喜欢的朋友可以 star 一下，后续会根据设计模式博文的推出，逐步的将此项目继续拓展出来。
如对文章内容以及实例有任何疑问、见解可添加微信 沟通。
另外关注公众号 Cookieboty1024，欢迎加入前端小兵成长营
手动狗头镇楼
