[JS设计模式]：工厂模式3

简单工厂模式是由一个方法来决定到底要创建哪个类的实例,而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定，而是在执行期决定的情况。说的通俗点，就像公司茶水间的饮料机，要咖啡还是牛奶取决于你按哪个按钮。

var Car = (function () {
    var Car =  (model,year,miles) {
        this.model = model;
        this.year = year;
        this.miles = miles;
    };
    return new Car(model,miles);
    };
})();

var tom = new Car("Tom",2009,20000);
var dudu = new Car("Dudu",2010,5000);

不好理解的话，我们再给一个例子：

var productManager = {};

productManager.createProductA =  () {
    console.log('ProductA');
}

productManager.createProductB =  () {
    console.log('ProductB');
}
        
productManager.factory =  (typeType) {
     productManager[typeType];
}

productManager.factory("createProductA");

如果还不理解的话，那我们就再详细一点咯，假如我们想在网页面里插入一些元素，而这些元素类型不固定，可能是图片，也有可能是连接，甚至可能是文本，根据工厂模式的定义，我们需要定义工厂类和相应的子类，我们先来定义子类的具体实现（也就是子函数）：

var page = page || {};
page.dom = page.dom || {};
//子函数1：处理文本
page.dom.Text = this.insert =  (where) {
        var txt = document.createTextNode(this.url);
        where.appendChild(txt);
    };
};

子函数2：处理链接
page.dom.Link = var link = document.createElement('a');
        link.href = .url;
        link.appendChild(document.createTextNode(.url));
        where.appendChild(link);
    };
};

子函数3：处理图片
page.dom.Image = var im = document.createElement('img');
        im.src = .url;
        where.appendChild(im);
    };
};

那么我们如何定义工厂处理函数呢？其实很简单：

page.dom.factory =  (type) {
     page.dom[type];
}

使用方式如下：

var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);

什么时候使用工厂模式

以下几种情景下工厂模式特别有用：

对象的构建十分复杂
需要依赖具体环境创建不同实例
处理大量具有相同属性的小对象

什么时候不该用工厂模式

不滥用运用工厂模式，有时候仅仅只是给代码增加了不必要的复杂度，同时使得测试难以运行下去。

实际上在js里面，所谓的构造函数也是一个简单工厂。只是批了一件new的衣服. 我们扒掉这件衣服看看里面。

通过这段代码,在firefox,chrome等浏览器里，可以完美模拟new.

 A( name ){
  this.name = name;
}

 ObjectFactory(){
  var obj = {},Constructor = Array.prototype.shift.call( arguments );
  obj.__proto__ =  typeof Constructor.prototype === 'number'  ? Object.prototype :  Constructor.prototype;
  var ret = Constructor.apply( obj,arguments );
  typeof ret === 'object' ? ret : obj;
}
var a = ObjectFactory( A,'mr mo' );
console.log ( a.name );  mr mo

这段代码来自es5的new和构造器的相关说明，可以看到，所谓的new，本身只是一个对象的复制和改写过程，而具体会生成什么是由调用ObjectFactory时传进去的参数所决定的。

看一下new一个构造函数进行了什么操作，如下代码：

 Person(name,age) {
     name;
    this.age = age;
}

var person1 = new Person('jessica',27);

当我们new Person()的时候到底发生了什么？

创建对象，设为o，即： var o = {};
每个对象都有__proto__属性，该属性指向一个对象，这里，将o对象的__Proto__指向构造函数Person的原型对象（Person.prototype）;
将o作为this去调用构造函数Person，从而设置o的属性和方法并初始化。

这样也就可以理解模拟new操作的代码了。

实现抽象工厂的示例，以生产智能手机为例，生产手机的基本组成是操作系统（Operating System，我们下面缩写作 OS）和硬件（HardWare）组成。（重点：抽象工厂不干活，具体工厂（ConcreteFactory）来干活！）

 创建手机抽象工厂
class MobilePhoneFactory {
     提供操作系统的接口
    createOS() {
        throw new Error('抽象工厂不允许直接调用，你需要将我重写');
    }
    
     提供硬件的接口
    createHardWare() {
        );
    }
}

 生产一种新的手机产品线（如：安卓高通手机）
class FakeStarFactory extends MobilePhoneFactory{
     操作系统
    createOs() {
         AndriodOS();
    }
    
     硬件
 QualCommHardWare();
    }
}

 定义操作系统这类产品的抽象产品类
class OS {
    controlHardWare() {
        new Error('抽象产品方法不允许直接调用，你需要将我重写');
    }
}

class AndriodOS extends OS {
    controlHardWare() {
        console.log('我会用安卓的方式来操作硬件');
    }
}

class AppleOS extends OS {
    controlHardWare() {
        console.log('我会用苹果的方式来操作硬件' 硬件类产品同理
// 定义手机硬件这类产品的抽象产品类
class HardWare {
     手机硬件的共性方法，这里提取了“根据命令运作”这个共性
    operateByOrder() {
         定义具体硬件的具体产品类
class QualCommHardWare extends HardWare {
    operateByOrder() {
        console.log('我会用高通的方式去运转');
    }
}

class MiHardWare extends HardWare {
    operateByOrder() {
        console.log('我会用小米的方式去运转');
    }
}


 生产一台高通安卓手机
var phone=  FakeStarFactory();
 拥有操作系统
var myOs = phone.createOs();
 拥有硬件
var myHardWare = phone.createHardWare();

 启动操作系统（输出“我会用安卓的方式来操作硬件”）
myOs.controlHardWare();
 唤醒硬件（输出“我会用高通的方式去运转”）
myHardWare.operateByOrder();

参考地址：

[JS设计模式]：工厂模式3

相关推荐