JavaScript工厂模式

工厂模式的名字就很直白，封装的模块就像一个工厂一样批量的产出需要的对象。常见工厂模式的一个特征就是调用的时候不需要使用new，而且传入的参数比较简单。但是调用次数可能比较频繁，经常需要产出不同的对象，频繁调用时不用new也方便很多。一个工厂模式的代码结构如下所示:

function factory(type) { switch(type) { case 'type1': return new Type1(); case 'type2': return new Type2(); case 'type3': return new Type3(); }}

上述代码中，我们传入了type，然后工厂根据不同的type来创建不同的对象。

实例: 弹窗组件

下面来看看用工厂模式的例子，假如我们有如下需求：

我们项目需要一个弹窗，弹窗有几种：消息型弹窗，确认型弹窗，取消型弹窗，他们的颜色和内容可能是不一样的。

针对这几种弹窗，我们先来分别建一个类：

function infoPopup(content, color) {}function confirmPopup(content, color) {}function cancelPopup(content, color) {}

如果我们直接使用这几个类，就是这样的:

let infoPopup1 = new infoPopup(content, color);let infoPopup2 = new infoPopup(content, color);let confirmPopup1 = new confirmPopup(content, color);

每次用的时候都要去new对应的弹窗类，我们用工厂模式改造下，就是这样：

// 新加一个方法popup把这几个类都包装起来function popup(type, content, color) { switch(type) { case 'infoPopup': return new infoPopup(content, color); case 'confirmPopup': return new confirmPopup(content, color); case 'cancelPopup': return new cancelPopup(content, color); }}

然后我们使用popup就不用new了，直接调用函数就行:

let infoPopup1 = popup('infoPopup', content, color);