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

来源：互联网发布：js接口安全域名作用编辑：程序博客网时间：2024/05/22 03:13

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();

文章列表

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

参考文章

javascript设计模式工厂模式
Javascript面向对象编程（二）：构造函数的继承

阅读全文

0 0