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 相关文章推荐
再论Javascript下字符串连接的性能
Mar 05 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
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
linux iconv方法的使用
2011/10/01 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
代码生成器 document.write()
2007/04/15 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
js Calender控件使用详解
2015/01/05 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中bisect的用法
2014/09/23 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python实现图片文件批量重命名
2020/03/23 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python安装gdal的两种方法
2019/10/29 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
旷课检讨书大全
2014/01/21 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
公务员政审个人总结
2015/02/12 职场文书
经理聘任证明
2015/03/02 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
React列表栏及购物车组件使用详解
2021/06/28 Javascript