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


Posted in Javascript onApril 09, 2020

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

介绍:前面我们介绍了简单工厂模式,简单工厂模式存在一个严重的问题:当需要扩展时必定要修改工厂类的源代码。我们虽然在第二个demo中做了一些优化,但是我们需在使用时明确指定执行方法的名字,这无疑提高了使用成本。那如何实现增加新产品而不影响已有代码?工厂模式应运而生。

定义:定义一个用于创建对象的接口,让子类决定将哪一个类实例化。工厂模式让一个类的实例化延迟到其子类。工厂模式又称为工厂方法模式,又可称为虚拟构造器模式或多态工厂模式。工厂模式是一种类创建型模式。

场景:还是基于简单工厂模式的场景,我们试着用工厂模式解决弹窗类的问题。

示例:

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.NoticeFactory = function(){
  return Dialog.createNotice();
}
 
Factory.ToastFactory = function(){
  return Dialog.createToast();
}
 
Factory.WarninFactory = function(){
  return Dialog.createWarnin();
}
 
var notice = Factory.NoticeFactory();
var toast = Factory.ToastFactory();
var warnin = Factory.WarninFactory();
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方法进行拆分

交由其子类也就是createToast方法实现

而将所有工厂入口拆成独立工厂类,之前的简单工厂模式在新增时需要修改工厂类,违反了开关原则

工厂模式保证新增时只做添加不做修改

项目足够大时,你可以将Factory和Dialog的子类拆成文件进行管理

在写工厂模式的这段时间,查了一些资料,发现每个人都有自己的理解

看到的一些工厂模式的demo更像是我们前面介绍简单工厂模式,为什么呢?

我们的demo参考的是java的书籍,这里面包含了抽象类这个概念,在前端只能靠自己的理解去描述

所以我们尽力通过一些差别来具体的介绍每一种模式

这里面的例子可能不是特别严谨,我后面会慢慢优化,写的详细一些只有一个目的

当有一天有人问我简单工厂模式和工厂模式的区别在哪,我希望我能给出一个我的理解

工厂模式总结:

优点:
* 增加新产品时,无需修改已存在的代码
* 只暴露工厂类,对具体实现封装在内部,使用时无需关注内部使用

缺点:
* 新增时还是需要新增具体实现以及提供具体的工厂类,一定程度增加了系统复杂度,会带来一些额外开销
* 每个工厂只生产一种产品,会导致存在大量的工厂类,大大增加了系统的维护成本和运行开销

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

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

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
vue实现单选和多选功能
Aug 11 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 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
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 #Javascript
You might like
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
详解php中的implements 使用
2017/06/13 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
如何查看python关键字
2021/01/17 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
电钳专业个人求职信
2014/01/04 职场文书
大学生旷课检讨书
2014/01/22 职场文书
九年级体育教学反思
2014/01/23 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
高一新生军训方案
2014/05/12 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
个人向公司借款协议书
2014/10/09 职场文书
实训报告范文大全
2014/11/04 职场文书
医院合作意向书范本
2015/05/08 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript