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


Posted in Javascript onJuly 03, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun测试运行效果如下:

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

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

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

Javascript 相关文章推荐
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
element多个表单校验的实现
May 27 Javascript
js实现各浏览器全屏代码实例
Jul 03 #Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 #Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 #Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 #Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 #Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 #Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 #Javascript
You might like
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
javascript文件加载管理简单实现方法
2015/07/25 Javascript
js的三种继承方式详解
2017/01/21 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
Python调用服务接口的实例
2019/01/03 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
大学教师个人总结
2015/02/10 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
党支部鉴定意见
2015/06/02 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS