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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
JavaScript表单验证实现代码
May 22 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
js实现验证码功能
Jul 24 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
Zerg兵种介绍
2020/03/14 星际争霸
PHP数据库开发知多少
2006/10/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
聚美优品励志广告词
2014/03/14 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript