简单工厂模式(Simple Factory Pattern)是属于创建型模式的一种,也被称为静态工厂方法模式(Static Factory Method Pattern)。在简单工厂模式中可以根据不同的参数返回不同的实例。
简单工厂模式包含以下三种角色:
1.Factory(工厂)
即工厂类,工厂类负责实现创建所有实例的内部逻辑,是简单工厂模式的核心。在工厂内中提供静态的工厂方法来返回一个抽象产品类。
2.Product(抽象产品)
抽象产品类是所有对象的父类,它描述了所有实例所共有的公共接口。
3.ConcreteProduct(具体产品)
它是简单工厂的创建目标,所有创建的对象都充当这个角色某个具体类的实例。
下面的代码简单展示了如何通过简单工厂模式创建不同颜色的div
-
- // 抽象产品类
- class AbstractDiv {
- constructor() {
- this.element = document.createElement("div");
- }
- // 抽象方法,需要由具体产品类实现
- setStyle() {}
- getElement() {
- return this.element;
- }
- }
- // 具体产品类 - RedDiv
- class RedDiv extends AbstractDiv {
- constructor() {
- super();
- this.setStyle();
- }
- setStyle() {
- this.element.style.backgroundColor = "red";
- this.element.style.width = "100px";
- this.element.style.height = "100px";
- this.element.style.margin = "10px";
- this.element.style.display = "inline-block";
- }
- }
- // 具体产品类 - GreenDiv
- class GreenDiv extends AbstractDiv {
- constructor() {
- super();
- this.setStyle();
- }
- setStyle() {
- this.element.style.backgroundColor = "green";
- this.element.style.width = "100px";
- this.element.style.height = "100px";
- this.element.style.margin = "10px";
- this.element.style.display = "inline-block";
- }
- }
- // 工厂类
- class DivFactory {
- constructor() {
- // 初始化一个数组来存储所有通过工厂创建的Div实例
- this.divs = [];
- }
- createDiv(color) {
- let div;
- if (color === "red") {
- div = new RedDiv();
- } else if (color === "green") {
- div = new GreenDiv();
- } else {
- throw new Error(`暂不支持${color}色`);
- }
- // 将新创建的Div实例添加到divs数组中
- this.divs.push(div);
- // 返回Div实例
- return div;
- }
- getAllDivs() {
- return this.divs;
- }
- }
-
- // 示例用法
- const container = document.getElementById("div-container"); // 假设页面上有这个元素
- // 创建DivFactory实例
- const divFactory = new DivFactory();
- // 创建并添加不同颜色的div到容器中
- const redDivInstance = divFactory.createDiv("red");
- const greenDivInstance = divFactory.createDiv("green");
- container.appendChild(redDivInstance.getElement());
- container.appendChild(greenDivInstance.getElement());
- // 如果需要,可以获取所有创建的Div实例
- const allDivs = divFactory.getAllDivs();
- console.log(allDivs);
-
图片简单描述:

作用:
简单工厂设计模式的主要作用是将对象的创建与使用分离。它隐藏了对象创建的具体细节,客户端只需要知道所需对象的类型或参数,而不必关心对象的创建过程。这样,客户端代码可以更加简洁和易于维护。
优点:
缺陷:
设计模式(第二版) 主编:刘伟 清华大学出版社