前端设计之模式动机

模式动机

考虑一个简单的应用场景，一个系统可以提供多个外观不同的按钮（如圆形按钮、矩形按钮、菱形按钮等），这些按钮都源自同一个基类，不过在继承基类后不同的子类修改了部分属性从而使得它们可以呈现不同的外观，如果我们希望在使用这些按钮时，不需要知道这些具体按钮类的名字，只需要知道表示该按钮类的一个参数，并提供一个调用方便的方法，把该参数传入方法即可返回一个相应的按钮对象，此时，就可以使用简单工厂模式。

模式定义

简单工厂模式(Simple Factory Pattern)：又称为静态工厂方法(Static Factory Method)模式，它属于类创建型模式。在简单工厂模式中，可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。

模式结构

简单工厂模式包含如下角色：

• Factory：工厂角色
• Product：抽象产品角色
• ConcreteProduct：具体产品角色

模式分析

工厂方式典型代码：

 function createCar() {
    var oTempCar = new Object;
    oTempCar.color = "blue";
    oTempCar.doors = 4;
    oTempCar.mpg = 25;
    oTempCar.showColor = function () {
        alert(this.color);
    };
    return oTempCar;
}

var oCar1 = createCar();
var oCar2 = createCar();

实例分析

分析如下代码

 var pay = function (type) {
    if (type.toLowerCase() === 'cash') {
        //现金支付处理代码
    } else if (type.toLowerCase() === 'creditcard') {
        //信用卡支付处理代码
    } else if (type.toLowerCase() === 'voucher') {
        //代金券支付处理代码
    } else {}
}

重构后的代码：

// 定义具体工厂类
 var CashPay = function () {
    //现金支付处理代码
}
var CreditcardPay = function () {
    //信用卡支付处理代码
}
var VoucherPay = function () {
    //代金券支付处理代码
}

var PayMethodFactory = function (type) {
    if (type.toLowerCase() === 'cash') {
        return CashPay(salary);  //根据参数创建具体产品
    } else if (type.toLowerCase() === 'creditcard') {
        return CreditcardPay(salary);   //根据参数创建具体产品
    } else if (type.toLowerCase() === 'voucher') {
        return VoucherPay(salary);  //根据参数创建具体产品
    } else {
        // ...
    }
};

• 将对象的创建和对象本身业务处理分离可以降低系统的耦合度，使得两者修改起来都相对容易。
• 在调用工厂类的工厂方法时，由于工厂方法是静态方法，使用起来很方便，可通过类名直接调用，而且只需要传入一个简单的参数即可。
• 简单工厂模式最大的问题在于工厂类的职责相对过重，增加新的产品需要修改工厂类的判断逻辑，这一点与开闭原则是相违背的。
• 简单工厂模式的要点在于：当你需要什么，只需要传入一个正确的参数，就可以获取你所需要的对象，而无须知道其创建细节。

模式优缺点

优点

• 工厂类含有必要的判断逻辑，可以决定在什么时候创建哪一个产品类的实例，客户端可以免除直接创建产品对象的责任，而仅仅“消费”产品；简单工厂模式通过这种做法实现了对责任的分割，它提供了专门的工厂类用于创建对象。
• 客户端无须知道所创建的具体产品类的类名，只需要知道具体产品类所对应的参数即可，对于一些复杂的类名，通过简单工厂模式可以减少使用者的记忆量。

缺点

• 由于工厂类集中了所有产品创建逻辑，一旦不能正常工作，整个系统都要受到影响。
• 使用简单工厂模式将会增加系统中类的个数，在一定程序上增加了系统的复杂度和理解难度。
• 系统扩展困难，一旦添加新产品就不得不修改工厂逻辑，在产品类型较多时，有可能造成工厂逻辑过于复杂，不利于系统的扩展和维护。
• 简单工厂模式由于使用了静态工厂方法，造成工厂角色无法形成基于继承的等级结构。

适用场景

在以下情况下可以使用简单工厂模式：

• 工厂类负责创建的对象比较少：由于创建的对象较少，不会造成工厂方法中的业务逻辑太过复杂。
• 客户端只知道传入工厂类的参数，对于如何创建对象不关心：客户端既不需要关心创建细节，甚至连类名都不需要记住，只需要知道类型所对应的参数。

应用

在我们的dashboard中就广泛使用了简单工厂模式，比如util中的各种工具类。

	/**
     *  构造下拉框options
     */
    static genOptions(data = [], nameField, valField) {
        return data.map((item) => {
            return (<Option
                value={item[valField]}
                key={`${nameField}${item[valField]}`}
                disabled={item.disabled}
            >{Decode.decode(item[nameField])}</Option>);
        });
    } 

 	/**
     * 转换moment时间
     * @param {*} momentDate 转换时间
     * @param {*} isStartTime 是否是开始时间 即00:00:00分
     * @param {*} isMonth 是否是月份转换 即转换成XX月01日
     */
    static transDate(momentDate, isStartTime, isMonth) {
        const formatStr = isMonth ? 'YYYY-MM-01' : 'YYYY-MM-DD';
        const dateStr = isStartTime ? momentDate.format(`${formatStr} 00:00:00`) :
            momentDate.format(`${formatStr} 23:59:59`);
        const newDate = moment(dateStr, 'YYYY-MM-DD HH:mm:ss');
        const secends = newDate.toDate().getTime();
        return parseInt(String(secends / 1000), 10);
    }