伏龙阁资源网

javascript设计模式 – 简单工厂模式原理与应用实例分析
站长资源 2024/11/25 佚名
2 0

本文实例讲述了javascript设计模式 – 简单工厂模式。分享给大家供大家参考，具体如下：

介绍：简单工厂模式是最常用的一类创建型设计模式。其中简单工厂模式并不属于GoF23个经典设计模式，它通常被作为学习其他工厂模式的基础。

定义：定义一个工厂类，它可以根据参数的不同返回不同的实例，被创建的实例通常都具有相同的父类，因为在简单工厂模式中创建实例的方法是静态方法，因此简单工厂模式又被称为静态工厂方法模式，它属于类创建型模式。

场景：我们需要写一个dialog工具类，在项目初期我们只需要考虑一个简单的弹窗实现，项目持续迭代，会衍生出各种类型的弹窗，带关闭按钮的，带确认按钮的…..

我见到最多的做法是根据一个type值来判断当前需要弹什么类型的窗口，这样的设计我之前没觉得有问题，但是看了前面介绍的设计原则，我们也来分析下这么做的缺点：

1. 存在多个if…else…代码块，代码冗长，阅读困难，维护困难，测试困难，影响系统性能。
2. dialog类职责过重，负责初始化所有弹窗实例，违反了单一职责原则，不利于重用和维护。
3. 当需要新增弹窗类型是，必须修改源代码，违反了开关原则。
4. 不同种类弹窗基础样式相同，会导致存在大量重复代码。
5. 各类弹窗的创建和使用都是在各个业务逻辑中，如果我想修改创建方式必须修改所有业务代码，违反了开关原则

示例：

var Dialog = (function(){
  var createNotice = function(){
    return '<div>notice</div>';
  }
  var createToast = function(){
    return '<div>toast</div>';
  }
  var createWarnin = function(){
 return '<div>warnin</div>';
  }
  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 -> <div>toast</div>
notice.show(); //notice is show -> <div>notice</div>
warnin.show(); //warnin is show -> <div>warnin</div>

以上的解决方案是自己理解着写的，对照着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 '<div>notice</div>'; };
Dialog.createToast = function(){ return '<div>toast</div>'; };
Dialog.createWarnin = function(){ return '<div>warnin</div>'; };
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 -> <div>notice</div>
warnin.show(); //createWarnin is show -> <div>warnin</div>
toast.show(); //createToast is show -> <div>toast</div>

这样当我做新增时，只需要要新增一条配置即可，不用去对公告内容做修改。满足了开关原则的对扩展支持对修改关闭。

简单工厂模式总结：

优点：
* 简单工厂模式实现了对象创建和使用的分离

缺点：
* 工厂模式集中了所有产品的创建逻辑，职责过重，一旦出现问题会影响到整个系统

适用场景：
* 适用于创建的对象比较少，由于创建的对象较少，不会造成工厂方法中的业务逻辑太过复杂
* 客户端只知道传入工厂类的参数，对于如何创建对象并不关心

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接