一、简单工厂模式

简单工厂模式，就是在工厂中预先定义了几类具体的产品，你需要一个产品，就请求工厂返回这个产品。如果工厂没有定义这样的产品，是生产不出来的：

function factory(type){
    function apple(){
        this.name = '苹果';
        this.sayName = function(){
            console.log('我是苹果');
        }
    }

    function banana(){
        this.name = '香蕉';
        this.sayName = function(){
            console.log('我是香蕉');
        }
    }

    switch(type){
        case 'apple':
            return new apple();
            break;
        case 'banana':
            return new banana();
            break;
    }
}

var apple = factory('apple');
apple.sayName(); // "我是苹果"

如果需要增加一种水果，就需要在factory中新增一个函数，还要修改switch，所以可以改成下面这样：

function factory(type){
    function fruit(option){
        this.name = option.name;
        this.sayName = function(){
            console.log('我是' + option.nameToSay)
        };
    }

    switch(type){
        case 'apple':
            return new fruit({
                name: '苹果',
                nameToSay: '大苹果'
            });
            break;
        case 'banana':
            return new fruit({
                name: '香蕉',
                nameToSay: '大香蕉'
            });
            break;
    }
}

var apple = factory('apple');
apple.sayName(); // "我是大苹果"

二、工厂方法模式

工厂方法模式跟简单工厂模式差不多，但是把具体的产品放到了工厂函数的prototype中。这样一来，扩展产品种类就不必修改工厂函数了，也可以随时重写某种具体的产品。

function factory(type){
    if(this instanceof factory){
        return new this[type]();
    }else{
        return new factory(type);
    }
}

factory.prototype = {
    'apple': function(){
        this.name = '苹果';
        this.sayName = function(){
            console.log('我是苹果');
        }
    },
    'banana': function(){
        this.name = '香蕉';
        this.sayName = function(){
            console.log('我是香蕉');
        }
    }
}

核心的代码是这句：this instanceof factory。当我们调用factory时：

var apple = factory('apple')

factory是一个普通函数，this指向的是全局对象window，于是会执行else中的语句，实例化一个factory并传入type。构造函数实例化后是一个对象，此时this是factory的一个实例，所以会执行new this[type]()，返回一个产品实例。

三、抽象工厂模式

抽象类就是存在仅定义，并没有真正实现的方法的类。JavaScript中并没有抽象类的概念，只能模拟。

抽象工厂模式分为四个部分：

用于创建抽象类的函数
抽象类
具体类
实例化具体类

我的理解是，这个模式的好处是既可以交由不同的部门/人定义抽象类，就好像一个超市可以卖水果，也可以卖蔬菜；又可以让再下一级的部门/人定义具体类，具体类可以继承抽象类规定好的属性和方法，就好像水果分为苹果、香蕉……，蔬菜分为西红柿、土豆……下面是抽象工厂模式的具体实现：

var factory = function(subType, supType){
    if(typeof factory[supType] === 'function'){
        // 如果让subType.prototype直接指向supType
        // 那么对subType.prototype的任何修改都会影响supType
        // 所以借用一个空对象完成继承
        function F(){};
        F.prototype = new factory[supType]();
        subType.prototype = new F();
        // 改变了subType.prototype后，
        // subType.constructor指向了F
        // 但是具体类是由抽象类构造的，
        // 这就导致了subType不能找到正确的constructor
        // 所以必须手动纠正
        subType.constructor = subType;
    }else{
        throw new Error('抽象类不存在');
    }
}

// 定义抽象类
factory.fruitType = function(){
    this.type = '水果';
};
factory.fruitType.prototype = {
    sayName: function(name){
        throw new Error('不能调用抽象方法，请实现该方法');
    }
};

factory.vegetableType = function(){
    this.type = '蔬菜';
};
factory.vegetableType.prototype = {
    sayName: function(name){
        throw new Error('不能调用抽象方法，请实现该方法');
    }
};

// 定义具体类
function fruit(name){
    this.name = name;
}
// 继承
factory(fruit, 'fruitType');
// 实现抽象方法
fruit.prototype.sayName = function(){
    console.log('我是' + this.name);
}

// 实例化水果
var apple = new fruit('苹果');
apple.type; // "水果"
apple.sayName(); // "我是苹果"

四、结尾

很多东西刚开始用的时候都是小心翼翼，甚至有些抵触，觉得使用它们是不“常规”的做法，觉得这样做“不稳定”。其实还是因为不懂得其原理。等到了解了其原理，用的多了，就会习以为常直至游刃有余。

End

[JavaScript]设计模式之工厂模式

一、简单工厂模式

二、工厂方法模式

三、抽象工厂模式

四、结尾

最新文章

分类