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 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 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
ajax+php控制所有后台函数调用
2015/07/15 PHP
phalcon框架使用指南
2016/02/23 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js快速排序的实现代码
2013/12/08 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
中文专业学生自我评价范文
2014/02/06 职场文书
小学安全教育材料
2014/02/17 职场文书
财务情况说明书范文
2014/05/06 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript