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写的操作系统
Apr 23 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
nginx下安装php7+php5
2016/07/31 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
JavaScript 的继承
2011/10/01 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
旷课检讨书2000字
2014/01/14 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
超市员工辞职信范文
2015/05/12 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL