工厂模式的名字就很直白,封装的模块就像一个工厂一样批量的产出需要的对象。常见工厂模式的一个特征就是调用的时候不需要使用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);
领取专属 10元无门槛券
私享最新 技术干货