热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Javascript设计模式理论与编程实战之简单工厂模式

简单工厂模式是由一个方法来决定到底要创建哪个类的实例,而这些实例经常都拥有相同的接口.这种模式主要用在所实例化的类型在编译期并不能确定,而是在执行期决定的情况。说的通俗点,就像公司茶水间的饮料机,要咖啡还是牛奶取决于你按哪个按钮

阅读目录

基本介绍
举例说明
总结说明

简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况。 说的通俗点,就像公司茶水间的饮料机,要咖啡还是牛奶取决于你按哪个按钮。

简单工厂模式在创建ajax对象的时候也非常有用.

通常我们创建对象最常规的方法就是使用new关键字调用构造函数,这会导致对象之间的依赖性。工厂模式是一种有助于消除类之间依赖性的设计模式,它使用一个方法来决定要实例化哪一个类。本文详细介绍了简单工厂模式的理论,并且举例说明了简单工厂模式的具体应用。

基本介绍

简单工厂模式是工厂模式中最基本的一种。通过定义一个工厂类,根据参数实例化具体的某个产品类。

举例说明

我们举个例子进行说明:假设我们开发一个旅游行业网站,网站上面销售机票,酒店等产品。一个用户准备购买一张机票。我们可以定义相关类如下:

 var productEnums = {
   flight: "flight",
   hotel: "hotel"
 };
 function Flight() {
   console.log("This is Flight");
 }
 function Hotel() {
   console.log("This is Hotel");
 }
 function User() {
   this.shopCart = [];
 }
 User.prototype = {
   constructor: User,
   order: function (productType) {
     var product = null;
     switch (productType) {
       case productEnums.flight:
         product = new Flight();
       case productEnums.hotel:
         product = new Hotel();
       default:
     }
     this.shopCart.push(product);
   }
 }
 var user = new User();
 user.order(productEnums.flight);

这段代码定义了三个类:用户类User,机票类Flight,酒店类Hotel,其中User包含预订方法。用户预订的时候直接传入产品类型即可。这段代码乍一看没什么问题,但是需求和业务是随时变化的,如果公司业务扩展,增加了签证业务,我们就要去修改User类来保证它支持签证。我们当然可以这么做,但直接去修改User类有什么不好呢,有没有更好的方法呢?

首先要说的是User类,这个类是表示用户类,而用户类本质上跟具体的某一类业务是无关的,也就是说,业务有可能随时增加,但是用户关于业务方面的代码也就是创建产品订单。新增的签证业务本质上和已经存在的机票和酒店没有什么区别,如果每增加一种业务就要去修改User类,这对代码的稳定性和可维护性大大的不好,更好的解决方法是有一个专门的创建订单的类在管理不同的业务,这个类就是简单工厂。

我们修改代码如下:

var productFactory = (function () {
   var productFactories = {
     "flight": function () {
       return new Flight();
     },
     "hotel": function () {
       return new Hotel();
     }
   };
   return {
     createProduct: function (productType) {
       return productFactories[productType]();
     }
   }
 })();
 User.prototype = {
   constructor: User,
   order: function (productType) {
     this.shopCart.push(productFactory.createProduct(productType));
   }
 }

这段代码主要修改的地方有两点:

(1)增加了一个产品工厂,根据不同的产品类型返回不同的对象

(2)修改User类的order方法为调用工厂类中的创建产品方法。

这样做的好处是:

(1)使User的order方法更加专注,只做预订产品这一功能,而提取创建产品订单到专门的工厂类中,代码更简洁清晰

(2)一个专门管理product的factory,添加新产品很容易,不用再去修改User类

总结说明

简单工厂模式的主要特点是将对象的创建和使用进行了分离,主要有3个部分组成:

1.对象使用类,该类是被工厂创造出来的使用者,与对象的种类和创建过程无关

2.工厂类,工厂类根据传入的参数创建不同的对象并返回给对象使用类,包含了不同对象的创建过程,如果有不同的对象,则要修改该类

3.对象类,不同业务产生的不同类,就是工厂生产的产品

简单工厂模式优点

1.工厂类集中了所有对象的创建,便于对象创建的统一管理

2.对象的使用者仅仅是使用产品,实现了单一职责

3.便于扩展,如果新增了一种业务,只需要增加相关的业务对象类和工厂类中的生产业务对象的方法,不需要修改其他的地方。

适用场景

1.需要根据不同参数产生不同实例,这些实例有一些共性的场景

2.使用者只需要使用产品,不需要知道产品的创建细节

注意:除非是适用场景,否则不可滥用工厂模式,会造成代码的复杂度。


推荐阅读
  • 基于SSM框架的在线考试系统:随机组卷功能详解
    本文深入探讨了基于SSM(Spring, Spring MVC, MyBatis)框架构建的在线考试系统中,随机组卷功能的设计与实现方法。 ... [详细]
  • Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]
  • 近期尝试从www.hub.sciverse.com网站通过编程手段获取数据时遇到问题,起初尝试使用WebBrowser控件进行数据抓取,但发现使用GET方法翻页时,返回的HTML代码始终相同。进一步探究后了解到,该网站的数据是通过Ajax异步加载的,可通过HTTP查看详细的JSON响应。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 本文介绍了如何正确配置Ajax POST请求,以确保前端发送的数据能够被后端正确解析。重点在于前端JSON对象的键名需要与后端实体类的字段名严格匹配。 ... [详细]
  • 本文介绍如何使用JavaScript中的for循环来创建一个九九乘法表,适合初学者学习循环结构的应用。 ... [详细]
  • HTML:  将文件拖拽到此区域 ... [详细]
  • Bootstrap Paginator 分页插件详解与应用
    本文深入探讨了Bootstrap Paginator这款流行的JavaScript分页插件,提供了详细的使用指南和示例代码,旨在帮助开发者更好地理解和利用该工具进行高效的数据展示。 ... [详细]
  • 本文介绍了如何通过 XMLHttpRequest 对象在不同浏览器中实现 AJAX 的 POST 和 GET 请求,并详细说明了 XMLHttpRequest 的五个状态及其含义。 ... [详细]
  • 本文探讨了在使用HTML原生表单提交数据时,前端开发者应如何有效地调试和检查表单字段的数据传输情况。 ... [详细]
  • Spring Boot使用AJAX从数据库读取数据异步刷新前端表格
      近期项目需要是实现一个通过筛选选取所需数据刷新表格的功能,因为表格只占页面的一小部分,不希望整个也页面都随之刷新,所以首先想到了使用AJAX来实现。  以下介绍解决方法(请忽视 ... [详细]
  • 本文详细介绍了使用 Selenium 2 进行测试的各种类型和注意事项,包括静态内容测试、链接测试、功能测试、动态元素测试、Ajax 测试以及断言与验证的区别。 ... [详细]
  • 使用 jQuery 实现页面加载进度条
    页面加载进度条是提升用户体验的重要工具,通过在页面头部显示一个加载状态,并在页面完全加载后隐藏,可以有效减少用户的等待焦虑。本文将详细介绍如何使用 jQuery 实现这一功能。 ... [详细]
  • 在现代Web开发中,HTML5 Canvas常用于图像处理和绘图任务。本文将详细介绍如何将Canvas中的图像导出并上传至服务器,适用于拼图、图片编辑等场景。 ... [详细]
author-avatar
哈行小DWW_421
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有