工厂模式

工厂模式

• 将new操作单独封装
• 遇到new时，就要考虑是否该使用工厂模式

类图

• 传统UML类图（java）

classDiagram class IProduc{ <<interface>> +function() int } class Product_A{ +function() int } class Product_B{ +function() int } class Creator{ +factory() IProduct } Creator --> Product_A Creator --> Product_B Product_A ..|> IProduc Product_B ..|> IProduc

• 简化后的UML类图

classDiagram class Creator{ +create(name) Product } class Product{ +name +init() +fn1() +fn2() } Creator --> Product

• 代码示例

/**
 * 工厂模式
 */

class Product{
    constructor(name) {
        this.name = name;
    }

    init(){
        alert('init');
    }

    fun1(){
        alert('fun1');
    }

    fun2(){
        alert('fun2');
    }
}

class Creator{
    create(name){
        return new Product(name);
    }
}


//测试
let creator = new Creator();
let p = creator.create('p1');
p.init();
p.fun1();

• 场景

  • jQuery - $('div')
  • React.CreateElement
  • vue异步组件

• 设计原则验证

  • 构造函数和创建者分离
  • 符合开放封闭原则