13518219792
这篇文章给大家分享的是有关javascript设计模式中工厂模式原理的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联致力于成都做网站、成都网站制作、成都外贸网站建设,成都网站设计,集团网站建设等服务标准化，推过标准化降低中小企业的建站的成本，并持续提升建站的定制化服务水平进行质量交付，让企业网站从市场竞争中脱颖而出。 选择成都创新互联，就选择了安全、稳定、美观的网站建设服务！
介绍：简单工厂模式是最常用的一类创建型设计模式。其中简单工厂模式并不属于GoF23个经典设计模式，它通常被作为学习其他工厂模式的基础。
定义：定义一个工厂类，它可以根据参数的不同返回不同的实例，被创建的实例通常都具有相同的父类，因为在简单工厂模式中创建实例的方法是静态方法，因此简单工厂模式又被称为静态工厂方法模式，它属于类创建型模式。
场景：我们需要写一个dialog工具类，在项目初期我们只需要考虑一个简单的弹窗实现，项目持续迭代，会衍生出各种类型的弹窗，带关闭按钮的，带确认按钮的…..
我见到最多的做法是根据一个type值来判断当前需要弹什么类型的窗口，这样的设计我之前没觉得有问题，但是看了前面介绍的设计原则，我们也来分析下这么做的缺点：
1. 存在多个if…else…代码块，代码冗长，阅读困难，维护困难，测试困难，影响系统性能。
2. dialog类职责过重，负责初始化所有弹窗实例，违反了单一职责原则，不利于重用和维护。
3. 当需要新增弹窗类型是，必须修改源代码，违反了开关原则。
4. 不同种类弹窗基础样式相同，会导致存在大量重复代码。
5. 各类弹窗的创建和使用都是在各个业务逻辑中，如果我想修改创建方式必须修改所有业务代码，违反了开关原则
示例：
var Dialog = (function(){
var createNotice = function(){
return 'notice';
}
var createToast = function(){
return 'toast';
}
var createWarnin = function(){
return 'warnin';
}
var Dialog = function(){
this.element = '';
this.name = '';
this.show = function(){
console.log(this.name + ' is show -> ' + this.element);
};
}
return {
factory: function(arg){
var _dialog;
if(arg === 'notice'){
_dialog = new Dialog();
_dialog.element = createNotice();
_dialog.name = 'notice';
}else if(arg === 'toast'){
_dialog = new Dialog();
_dialog.element = createToast();
_dialog.name = 'toast';
}else if(arg === 'warnin'){
_dialog = new Dialog();
_dialog.element = createWarnin();
_dialog.name = 'warnin';
}
return _dialog;
}
}
})();
var notice = Dialog.factory('notice');
var toast = Dialog.factory('toast');
var warnin = Dialog.factory('warnin');
toast.show(); //toast is show -> toast
notice.show(); //notice is show -> notice
warnin.show(); //warnin is show -> warnin以上的解决方案是自己理解着写的，对照着java的示例写了一个，实现的方式有很多种，你可以用原型链，用继承来实现都可以。我们这里主要讨论下为什么要这么写。
之前我们列出了5个缺点：我们主要解决了2，4和5,将共有的方法属性抽取出来写在父类上，减少了重复代码，将每种情况特有的代码抽取出来，解决了不符合单一职责原则的问题。
重要的是将所有弹窗的创建集中在工厂类中，当有修改时，只需要修改工厂类即可，不会影响业务代码。
这里我们思考一下：1.如何去掉那些if…else…？ 2.当我要新增一个error类型的弹窗时如何满足开关原则？
我自己试了一下：
var Dialog = function(){
this.element = '';
this.name = '';
this.show = function(){
console.log(this.name + ' is show -> ' + this.element);
};
}
Dialog.createNotice = function(){ return 'notice'; };
Dialog.createToast = function(){ return 'toast'; };
Dialog.createWarnin = function(){ return 'warnin'; };
Dialog.factory = function(arg){
var _dialog = new Dialog();
_dialog.element = Dialog[arg]();
_dialog.name = arg;
return _dialog;
};
var notice = Dialog.factory('createNotice');
var toast = Dialog.factory('createToast');
var warnin = Dialog.factory('createWarnin');
notice.show(); //createNotice is show -> notice
warnin.show(); //createWarnin is show -> warnin
toast.show(); //createToast is show -> toast这样当我做新增时，只需要要新增一条配置即可，不用去对公告内容做修改。满足了开关原则的对扩展支持对修改关闭。
简单工厂模式总结：
优点：
* 简单工厂模式实现了对象创建和使用的分离
缺点：
* 工厂模式集中了所有产品的创建逻辑，职责过重，一旦出现问题会影响到整个系统
适用场景：
* 适用于创建的对象比较少，由于创建的对象较少，不会造成工厂方法中的业务逻辑太过复杂
* 客户端只知道传入工厂类的参数，对于如何创建对象并不关心
感谢各位的阅读！关于“javascript设计模式中工厂模式原理的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
