Javascript设计模式-04-工厂模式

Javascript设计模式 - 04 -工厂模式（简单工厂，抽象工厂）

简介

工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类，该模式使一个类的实例化延迟到了子类，而子类可以重写接口方法以便创建的时候指定自己的对象类型

个人理解

简单工厂模式接受一个命令，然后将命令的处理分离出去，命名处理函数接受不同的命令，或者根据不同的环境返回不同的对象，返回的对象会在工厂中绑定一些公用的‘零件’（主要是方法）最后返回一个加工后的商品的实例

    // 创建不同交通工具 Transport
    function Car() {
        this.name = 'transport-car';
    }

    function Train() {
        this.name = 'transport-train';
    }

    function Bike() {
        this.name = 'transport-bike';
    }

    // 定义命令处理函数
    function selectTransport(type) {
        var transport;

        switch (type) {
            case 'car':
                transport = new Car();
                break;
            case 'train':
                transport = new Train();
                break;
            case 'bike':
                transport = new Bike();
                break;
            default:
                transport = new Car();
                break;
        }

        return transport;
    }

    // 创建工厂
    function Factory() {
        this.count = 0;
    }

    Factory.prototype.create = function (type) {
        var me = this;
        var transport = selectTransport(type);
        // 绑定公有的方法
        transport.intro = function () {
            console.log('this is ' + this.name + ' count: ' + me.count++);
        }

        return transport;
    }

    // 实例化工厂
    var factory = new Factory();
    // 开始创建
    var train = factory.create('train');
    train.intro(); // this is transport-train count: 0
    // 再创建
    var bike = factory.create('bike');
    bike.intro(); // this is transport-bike count: 1

抽象工厂模式相比于简单工厂模式，真正使用的‘工厂’，是我们抽象出来的工厂的一个子类，同时，命令处理函数不在定义在外边，而是定义在子类的原型上，这样有不同的组装需求，只需要从抽象工厂上继承一个子类，在子类中定义新的命令处理方式就行了。

    // 创建一个用于继承的函数
    function extend(subClass, superClass) {
        // 定义一个中介类
        function F() {}
        // 原型指向父类的原型
        F.prototype = superClass.prototype;
        /*
            子类的原型指向中介类的一个实例，实现继承
            由于 subClass 的原型指向的是 F 的一个实例 而不是 F.prototype 也就是 父类的原型，
            所以子类原型的修改不会将父类的原型也修改掉
        */ 
        subClass.prototype = new F();
        // 上一步得到的子类的原型的构造函数是 Factory ，这里需要把它变回自己本身
        subClass.prototype.constructor = subClass;
    }

    // 创建不同交通工具 Transport
    function Car() {
        this.name = 'transport-car';
    }

    function Train() {
        this.name = 'transport-train';
    }

    function Bike() {
        this.name = 'transport-bike';
    }

    // 创建工厂
    function Factory() {
    }

    Factory.prototype.create = function (type) {
        var me = this;
        // 注：这里改为了调用自身的 selectTransport 方法，Factory 本身没有这个方法，这个方法是子类定义的
        var transport = this.selectTransport(type);
        // 绑定公有的方法
        transport.intro = function () {
            console.log('this is ' + this.name + ' count: ' + me.count++);
        }

        return transport;
    }

    // 新增子类的创建
    function TransportFactory() {
        this.count = 0;
    };
    extend(TransportFactory, Factory); // 继承工厂
    // 子类定义 selectTransport 方法，定义前一定要先继承父类，否则会被覆盖
    TransportFactory.prototype.selectTransport = function (type) {
        var transport;

        switch (type) {
            case 'car':
                transport = new Car();
                break;
            case 'train':
                transport = new Train();
                break;
            case 'bike':
                transport = new Bike();
                break;
            default:
                transport = new Car();
                break;
        }

        return transport;
    }


    // 实例化工厂
    var factory = new TransportFactory();
    // 开始创建
    var train = factory.create('train');
    train.intro();
    // 再创建
    var bike = factory.create('bike');
    bike.intro();

文章列表

1. javascript设计模式 – 设计原则
2. JavaScript设计模式–高阶函数
3. Javascript 设计模式 - 01 - 原型模式
4. Javascript 设计模式 - 02 - 单例模式
5. Javascript 设计模式 - 03 - 建造者模式
6. Javascript 设计模式 - 04 - 工厂模式
7. Javascript 设计模式 - 05 - 外观模式
8. Javascript 设计模式 - 06 - 代理模式
9. Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）
10. Javascript 设计模式 - 08 - 策略模式
11. Javascript 设计模式 - 09 - 命令模式
12. Javascript 设计模式 - 10 - 迭代器模式
13. Javascript 设计模式 - 11 - 职责链模式
14. Javascript 设计模式 - 12 - 适配器模式
15. Javascript 设计模式 - 13 - 模板方法
16. Javascript 设计模式 - 14 - 组合模式
17. Javascript 设计模式 - 15 - 享元模式
18. Javascript 设计模式 - 16 - 中介者模式
19. Javascript 设计模式 - 17 - 装饰者模式
20. Javascript 设计模式 - 18 - 状态模式

参考文章

• javascript设计模式 工厂模式

• Javascript面向对象编程（二）：构造函数的继承