设计模式篇(1): 工厂模式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44746132/article/details/105515130

设计模式并不是某一门语言所特有的内容，它只是一个面向对象开发的代码设计规范，我们常说设计模式，其实设计模式并不是一个内容，我们需要将它分开：及设计，模式。给定的一个业务需求，我们需要先有一个好的需求分析和抽象设计，其次才是根据我们的设计采用一种比较合适的模式去进行编码实现。（当然对于设计没有办法去简单的说清楚，它应该是一种抽象的思维，需要从实际的生产中去不断的积累的过程，所以就直接记录一下学习设计模式中的模式块的内容）

今天将要说到的是23中设计模式中的工厂模式：

工厂模式：简单来说，可以将它理解成实际生活中的商品的生产过程：’‘我们去商场买东西，我们并不需要知道这些产品是怎么生产出来的，我们只是了解它是某个工厂生产出来的产品而已，而产品的生产是交给了工厂去完成’’
这里以一个简单的生活例子为例，那么我们为什么需要使用工厂模式呢?

工厂模式将实际的产品对象和产品的生产过程封装起来，给外界一个接口，外界只需要知道产品的名称即可通过相应的工厂生产得到相应的产品对象，这样也就保证了代码良好的封装性。
将产品的内容，工厂的生产过程相应的分割开来，降低代码的耦合性
使得代码易于扩展：当需要新增一个产品时，只需要重新单独创建一个产品的对象，使用工厂新增一个生产产品的方法即可，对于其他的代码不会产生任何的影响，这也遵循设计原则的开放封闭原则（对扩展开放，对修改封闭）
屏蔽了产品类，调用者并不需要了解产品类是如何实现的，只需要关心产品的生产接口，只要接口不发生改变，则系统中的上层调用模块就不需要发生任何的变动，而产品类的变动导致生产方式的改变都是由生产类帮助我们实现的
我们使用工厂类即可直接生产得到需要的产品，而不需要我们再使用new关键字去自己生产产品，这也符合里氏替换原则，工厂类生产出来的产品可以替换产品父类

这里说了这么多的好处，目的只是为了说明工厂模式的重要性和对我们编码设计的优势所在。说归说，我们举一个简单的例子进行编码：

需求提出：

有一个生产汽车的厂家，可以生产大众，宝马两类汽车
一个用户根据需要从工厂购买汽车

// 定义一个大众汽车类：
class Dazhong{
	constructor(name){
		this.name = name;
	}
	init(){
		console.log(`这是生产的大众${this.name}汽车`);
	}
}
// 定义一个宝马汽车类：
class Baoma{
	constructor(name){
		this.name = name;
	}
	init(){
		console.log(`这是生产的宝马${this.name}汽车`)
	}
}
// 定义工厂类进行大众和宝马汽车的生产：
class Creator{
	createDazhong(name){
		return new Dazhong(name)
	}
	createBaoma(name){
		return new Baoma(name)
	}
}

// 根据需要从工厂类中得到相应的产品：
const creator = new Creator()
// 生产得到大众汽车：
const huiteng = creator.createDazhong("huiteng")
//生产得到宝马汽车：
const x1 = creator.createBaoma("x1")

这里我们便使用工厂模式实现了需求，我们这里再做一下分析：
定义两个产品类： Dazhong和Baoma类，并且定义了一个Creator的工厂类来进行产品的生产，基于工厂模式的实现，当需要增加一个产品时，只需要新建一个产品的类并在Creator的工厂类中加入一个生产产品的方法即可，无需对之前的代码做任何的变动，这也是工厂模式的一个很大的优势所在。

可能有人觉得这样的需求不是很贴合开发的实际，这个例子也有点太简单，那么我们这里也Jquery库的实现为例，用工厂模式简单实现Jquery库：

/**
* 定义Jquery的类
* :注： 这里只是简单的实现一下Jquery的构造函数实现 $("")选取Dom元素
*/
class Jquery{
	constructor(selector){
		let slice = Array.prototype.slice
		let dom = slice.call(document.querySelectorAll(selector))
		let len = dom ? dom.length : 0
		for(let i = 0; i < len; i++){
			this[i] = dom[i]
		}
		this.length = len
		this.selector = selector || ""
	}
	append(node){
		// do append node to this dom
	}
	addClass(name){
		// add class to this dom classList
	}
	// .... Jquery的其他api
}

// 定义工厂函数得到Jquery的类实例
window.$ = function(selector){
	return new Jquery(selector)
}