JavaScript设计模式之工厂模式

Posted 雨霖月寒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript设计模式之工厂模式相关的知识,希望对你有一定的参考价值。

工厂模式是一种最常用的实例化对象模式,是用工厂方法代替new操作的一种模式。在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来指向新创建的对象。因为工厂模式就相当于创建实例对象的new,在javascript中通常会使用new关键字来实例化对象,如A: a=new A(), 工厂模式也是用来创建实例对象的,所以以后new时就要多个心眼,是否可以考虑使用工厂模式,虽然这样做,可能多做一些工作,但会给你系统带来更大的可扩展性和尽量少的修改量。

 

设计意图:定义一个创建对象的接口,让其子类自己决定实例化哪一个工厂类,工厂模式使其创建过程延迟到子类进行。

 

主要解决的问题:主要解决接口选择的问题。

 

使用场景:我们明确地计划不同条件下创建不同实例时。

 

举个现实中的例子来理解工厂模式:现在有一个生成车辆的公司,生产的产品有自行车、摩托车、电动车三种。市场的需求在不断的变化,工厂是无法准确的确定当下市场需要多少的自行车、摩托车、电动车。如果某种车辆生产的太多,就会因为销售不出去而造成库存积压严重的问题。所以工厂的领导会议决定:往后自由在接收到车辆的具体订单时再生产具体的车辆,也就是说,如果接到的是自行车的订单就生产自行车,接到摩托车订单就生产摩托车,接到电动车订单就生产电动车。

 

最简单的工厂模式程序实例:

var Car = (function(){
                
    var Car = function(model, year, miles){
        this.model = model;
        this.year = year;
        this.miles = miles;
    };
                
    return function(model, year, miles){
        return new Car(model, year, miles);
    };
                
})();
            
var dika = new Car(‘Dika‘, 2008, 20000);

 

这是最简单的工厂模式,只用于创建一种实例对象。

 

再来看看复杂点的实例:

//工厂对象
var Factory = (function(){
                
    //工厂生产管理对象
    var productManager = {};
                
    //生产自行车
    productManager.createBicycle = function(){
        this.model = "Bicycle";
        console.log("product Bicycle!");
    };
                
    //生产摩托车
    productManager.createMoto = function(){
        this.model = "Moto";
        console.log("product Moto!");
    };
                
    //生产电动车
    productManager.createElectrocar= function(){
        this.model = "Electrocar";
        console.log("product Electrocar!");
    };
                
    //生产函数
    productManager.create = function(type){
        return new productManager[type];
    };
                
    return {
        productManager: productManager
    }
                
})();

var tom = Factory.productManager.create("createMoto");

 

接下来我们再看一个在网页中使用的一个实例:假如我们想在网页面里插入一些元素,而这些元素类型不固定,可能是图片,也有可能是连接,甚至可能是文本,根据工厂模式的定义,我们需要定义工厂类和相应的子类:

var page = (function(){
                
    var dom = {};
                
    //子类1:处理文本
    dom.Text = function(){
        this.insert = function(where, text){
            var txt = document.createTextNode(text);
            where.appendChild(txt);
        }
    };
                
    //子类2:处理链接
    dom.Link = function(){
        this.insert = function(where, url){
            var link = document.createElement("a");
            link.href = url;
            link.appendChild(document.createTextNode(url));
            where.appendChild(link);
        }
    };
                
    //子类3:处理图片
    dom.Image = function () {
        this.insert = function (where, url) {
            var img = document.createElement(‘img‘);
            img.src = url;
            where.appendChild(img);
        };
    };
                
    //创建函数
    dom.create = function(type){
        return new dom[type];
    };
                
    return {
        dom: dom
    }
                
})();
            
var t = page.dom.create(‘Text‘);
t.insert(document.body, "新建文本节点");

 

工厂模式的优缺点:

优点: 1、一个调用者想创建一个对象,只要知道其名称就可以了。 2、扩展性高,如果想增加一个产品,只要扩展一个工厂类就可以。 3、屏蔽产品的具体实现,调用者只关心产品的接口。

缺点:每次增加一个产品时,都需要增加一个具体类和对象实现工厂,使得系统中类的个数成倍增加,在一定程度上增加了系统的复杂度,同时也增加了系统具体类的依赖。这并不是什么好事。

 

以上是关于JavaScript设计模式之工厂模式的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript创建对象之单例工厂构造函数模式

设计模式-工厂模式(JavaScript)

JavaScript设计模式之工厂模式

Javascript设计模式之工厂模式

javascript的设计模式之抽象工厂模式

深入理解JavaScript系列(28):设计模式之工厂模式