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 相关文章推荐
使用javascript做的一个随机点名程序
Feb 13 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
Vue计算属性的使用
Aug 04 Javascript
实例讲解JavaScript预编译流程
Jan 24 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
用header 发送cookie的php代码
2007/03/16 PHP
php 字符串函数收集
2010/03/29 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
PHP经典面试题
2016/09/03 面试题
介绍一下JNDI的基本概念
2013/07/26 面试题
施工人员岗位职责
2013/12/12 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
信息技术研修心得体会
2016/01/08 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server