javascript设计模式 ? 抽象工厂模式原理与应用实例分析


Posted in Javascript onApril 09, 2020

本文实例讲述了javascript设计模式 ? 抽象工厂模式原理与应用。分享给大家供大家参考,具体如下:

介绍:基于工厂模式,继续升级。来解决工厂模式存在多个工厂类的问题。主要的思想是将一些相关的产品组成一个产品族,由同一个工厂来统一生产。

定义:抽象工厂模式提供一个创建一系列相关或相互依赖的接口,而无须指定他们具体的类。抽象工厂模式又称kit模式,它是一种对象创建型模式。

场景:还是上面的Dialog类,如果继续向后发展,会有各种各样的弹窗,如果新增一个弹窗包含了notice和toast。这样的情况下,我们不需要再单独新增一个工厂类。我们需要对这一类具有同样特征的弹窗进行聚合。

示例:

var Dialog = function(){
  this.show = function(){
    console.log(this.name + ' is show -> ' + this.element);
  }
};
 
Dialog.createNotice = function(){
  var _dialog = new Dialog();
  _dialog.element = '<div>notice</div>';
  _dialog.name = 'notice';
  return _dialog;
};
 
Dialog.createToast = function(){
  var _dialog = new Dialog();
  _dialog.element = '<div>toast</div>';
  _dialog.name = 'toast';
  return _dialog;
};
 
Dialog.createWarnin = function(){
  var _dialog = new Dialog();
  _dialog.element = '<div>warnin</div>';
  _dialog.name = 'warnin';
  return _dialog;
};
 
 
var Factory = {};
 
Factory.ConvergeFactory = function(){
  return {
    getNotice: function(){
      return Dialog.createNotice();
    },
    getToast: function(){
      return Dialog.createToast();
    },
 getWarnin: function(){
     return Dialog.createWarnin();
 }
  }
}
 
var converge = Factory.ConvergeFactory();
var notice = converge.getNotice();
var toast = converge.getToast();
var warnin = converge.getWarnin();
notice.show(); //notice is show -> <div>notice</div>
toast.show(); //toast is show -> <div>toast</div>
warnin.show(); //warnin is show -> <div> warnin </div>

抽象工厂模式主要解决的是Factory过多的问题,经过组合产生新的产品族。

我们这里的举例有些牵强,换个场景,如果我们有很多按钮啊,输入框之类的组件,要通过单独的工厂进行获取实例。

抽象工厂模式就是将特定的组件经过聚合产生新的工厂。

但这样的结果好还是不好,增加新的产品族时遵守了开关原则,但是在对新的产品族结构进行修改时就会发现需要从业务到工厂到子类挨个修改,也违反了开关原则。

所以抽象工厂模式的使用场景需要特别严谨,要在设计之初全面考虑,不要轻易对产品族结构进行修改。

抽象工厂模式总结:

优点:
* 当产品族被使用后,隔离了具体类的实现
* 新增产品族时很方便,无需修改已有结构,符合开关原则

缺点:
* 修改已有产品族结构时,需要修改工厂以及所有使用的业务代码。

前面我们介绍了三种工厂模式,在前端使用的过程中,要灵活的应用,使用其思想而不是生搬硬套。

工厂模式核心是通过不同参数来生成不同产品。抽象工厂和工厂是在实际场景下进行优化而来。

这也提醒我们,要不断地对代码进行思考,进行优化。

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

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

Javascript 相关文章推荐
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
js实现小时钟效果
Mar 25 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 #Javascript
微信小程序纯文本实现@功能
Apr 08 #Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 #Javascript
vue与iframe之间的信息交互的实现
Apr 08 #Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 #Javascript
You might like
使用PHP获取网络文件的实现代码
2010/01/01 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Vue不能观察到数组length的变化
2018/06/08 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python NumPy库安装使用笔记
2015/05/18 Python
python微信好友数据分析详解
2018/11/19 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python函数参数分类原理详解
2020/05/28 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python中的With语句的使用及原理
2020/07/29 Python
flask框架中的cookie和session使用
2021/01/31 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
创业者是否需要商业计划书?
2014/02/07 职场文书
初中生期末评语大全
2014/04/24 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2014年网管工作总结
2014/12/11 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
被告代理词范文
2015/05/25 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
解析目标检测之IoU
2021/06/26 Python