JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析


Posted in Javascript onJuly 26, 2018

本文实例讲述了JavaScript设计模式之工厂模式和抽象工厂模式定义与用法。分享给大家供大家参考,具体如下:

1、工厂模式:

虽然Object构造函数和对象字面量都可以用来创建单个对象,但这个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复的代码。为了解决这个问题,开始使用工厂模式。

利用工厂模式,可以实现不指定特定的类而创建出对象,也就是说,不需要使用new关键字来创建特定类或子类的实例。

var TravelTeam = function(){};
TravelTeam.prototype = {
 register : function(model){
  var person;
  switch(type){
   case "student":
    person = new Student();
    break;
   case "teacher":
    person = new Teacher();
    break;
   default:
    person = new Doctor();
    break;
  }
  return person;
 }
}
var team = new TravelTeam();
team.register(student");

问题:大多数情形下使用没有问题,但扩展性不好,如需要添加一些新的队员类型,必须修改switch部分。

解决:工厂模式,把相同的部分单独出来交给一个简单的工厂对象:

var TeamFactory = {
 createTeam:function(type){
  var person;
  switch(type){
   case "student":
    person = new Student();
    break;
   case "teacher":
    person = new Teacher();
    break;
   default:
    person = new Doctor();
    break;
  }
  return person;
 }
}

TeamFactory是一个脱离于TravelTeam的单体,能降低耦合度,当需要添加一些新的队员类型的时候,只要修改TeamFactory工厂单体对象就行。

var TravelTeam = function(){};
TravelTeam.prototype = {
 register:function(type){
  var person = TeamFactory.createTeam(type);
  return person;
 }
}

工厂模式的问题:虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即不知道对象的类型)。

解决:构造器模式,请见://3water.com/article/144495.htm。

2、抽象工厂模式

在工厂模式的基础上进行更高层次的抽象,根据共同的用途或主题来抽象出一个最高层基础工厂类,其他具有相似行为的工厂类将继承于此工厂类。

最典型的例子是了解HTML5与HTML4表单域的不同之处后,抽象出最高层的表单域工厂类,HTML5表单域工厂类和HTML4表单域工厂类都继承自该类。

工厂模式与抽象工厂模式的不同:

① 当需要在代码的其余所有部分通过屏蔽较为复杂的对象创建方法来简化某些特定对象的创建过程时,使用工厂模式很适合;

② 当需要从现有代码中的多个类中,根据这些类之间共有的目的或通用的主题,创建出一个额外的抽象层,以降低应用程序的其余开发工作的复杂性时,使用抽象工厂模式很适合。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
JS模板实现方法
Apr 03 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
原生js实现放大镜
Feb 20 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
JS实现放烟花效果
Mar 10 Javascript
js代码实现轮播图
May 04 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 #Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 #Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 #Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 #Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
PHP安全配置
2006/12/06 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
JQuery中的事件及动画用法实例
2015/01/26 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
实例讲解vue源码架构
2019/01/24 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python常用的json标准库
2019/02/19 Python
基于Python中的yield表达式介绍
2019/11/19 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
同学聚会主持词
2014/03/18 职场文书
公司业务员岗位职责
2014/03/18 职场文书
创文明城市标语
2014/06/16 职场文书
画展邀请函
2015/01/31 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Django使用redis配置缓存的方法
2021/06/01 Redis
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
HttpClient实现表单提交上传文件
2022/08/14 Java/Android