JavaScript设计模式之工厂模式简单实例教程

 更新时间:2018年07月03日 08:43:58   作者:CangoWu  
这篇文章主要介绍了JavaScript设计模式之工厂模式,结合完整实例形式分析了工厂模式的概念、原理及javascript定义与使用工厂模式的相关操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript设计模式之工厂模式。分享给大家供大家参考,具体如下:

一、工厂模式概念

工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型(抽象工厂)。

这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类定义需要创建的对象类型。

二、工厂模式的作用和注意事项

模式作用:

1、对象构建十分复杂--我们穿鞋很简单,但是制作鞋子的过程十分复杂

2、需要依赖具体的环境创建不同的实例--工厂可以做鞋子,做衣服,工厂可以做我需要的鞋子(鞋子不同),然后送到指定的地方(地方可以不同),可以理解为不同的实例

3、处理大量具有相同属性的小对象--比如买一双鞋,没必要找工厂生产

注意事项:

1、不能滥用工厂,有时候仅仅是给代码增加复杂度--如上3

三、工厂模式代码和实战总结

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>工厂模式</title>
</head>
<body>
<script>
 //1.工厂应该有厂长来决定运行到底哪条产品线
 //2.消费者-》子类
 var gongchang = {};
 gongchang.chanyifu = function(){
  this.gongren = 50;
  console.log("我们有"+this.gongren);
 }
 gongchang.chanxie = function(){
  this.gongren = 100;
  console.log("产鞋子");
 }
 gongchang.yunshu = function(){
  this.gongren = 10;
  console.log("运输");
 }
 gongchang.changzhang = function(para){
  return new gongchang[para]();
 }
 var we = gongchang.changzhang("chanyifu");
 var me = gongchang.changzhang("chanxie");
 console.log(me.gongren);
 var ys = gongchang.changzhang("yunshu");
 console.log(ys.gongren);
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下:

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

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

相关文章

  • electron 无边框窗口拖拽移动问题及解决办法

    electron 无边框窗口拖拽移动问题及解决办法

    在做一款uTools的插件,悬浮文本,窗口是没有标题栏的,所以需要找一个地方可以拖动移动位置,本文给大家介绍electron 无边框窗口拖拽移动问题及解决办法,感兴趣的朋友一起看看吧
    2023-12-12
  • JavaScript实现网页图片等比例缩放实现代码及调用方式

    JavaScript实现网页图片等比例缩放实现代码及调用方式

    为了保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,接下来将介绍的代码可以在图片加载完成后自动按比例调整图片大小,感兴趣的你可以参考下
    2013-02-02
  • 详解js中构造流程图的核心技术JsPlumb

    详解js中构造流程图的核心技术JsPlumb

    这篇文章主要介绍了js中构造流程图的核心技术JsPlumb,jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等,需要的朋友可以参考下
    2015-12-12
  • IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结

    IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结

    在不是js打开的页面上按window.close(),会有提示框,很烦,现在可以不用了,没有提示框直接关闭窗口。下面脚本之家编辑特为大家整理了一些。
    2009-09-09
  • 第一次接触神奇的Bootstrap导航条

    第一次接触神奇的Bootstrap导航条

    第一次接触神奇的Bootstrap导航条,Bootstrap让Web开发更迅速、更简单,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript之with的使用(阿里云、淘宝使用代码分析)

    javascript之with的使用(阿里云、淘宝使用代码分析)

    这篇文章主要介绍了javascript之with的使用(阿里云、淘宝使用代码分析),主要是发现了阿里云使用了这段比较有B格的代码,所以说下这个怎么样
    2016-10-10
  • 从历史讲起JavaScript基因里的函数式编程实例

    从历史讲起JavaScript基因里的函数式编程实例

    这篇文章主要为大家介绍了从历史讲起JavaScript基因里的函数式编程实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JavaScript Rxjs mergeMap 的使用场合

    JavaScript Rxjs mergeMap 的使用场合

    这篇文章主要介绍了JavaScript Rxjs mergeMap 的使用场合,mergeMap 接收一个函数作为输入参数,这个函数的输入参数就是通过 pipe 链接 mergeMap 的 Observable 里包含的元素
    2022-07-07
  • 深入解析Parcel如何进行自定义配置

    深入解析Parcel如何进行自定义配置

    Parcel 是现代前端开发中不可或缺的工具之一,以其“零配置”的特性迅速赢得了开发者的青睐,本文将通过几个实例详细介绍如何进行 Parcel 的自定义配置,感兴趣的小伙伴可以了解下
    2024-12-12
  • JavaScript实现随机点名器实例详解

    JavaScript实现随机点名器实例详解

    这篇文章主要介绍了JavaScript随机点名器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论