JavaScript设计模式之工厂模式

2018-06-24 01:38:16来源：未知阅读 ()

工厂模式是一种最常用的实例化对象模式，是用工厂方法代替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, "新建文本节点");