一、简单工厂模式

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

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中并没有抽象类的概念,只能模拟。

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

  1. 用于创建抽象类的函数
  2. 抽象类
  3. 具体类
  4. 实例化具体类

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

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, 设计模式

添加新评论