189 8069 5689

javascript设计模式中工厂模式原理的示例分析-创新互联

这篇文章给大家分享的是有关javascript设计模式中工厂模式原理的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联公司主要从事成都网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务梅河口,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

介绍:简单工厂模式是最常用的一类创建型设计模式。其中简单工厂模式并不属于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设计模式中工厂模式原理的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网站标题:javascript设计模式中工厂模式原理的示例分析-创新互联
文章来源:http://jkwzsj.com/article/codcpd.html

其他资讯