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 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
javascript实现完美拖拽效果
May 06 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
python笔记(2)
2012/10/24 Python
python判断windows隐藏文件的方法
2014/03/21 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
清洁工表扬信
2014/01/08 职场文书
高中生期末评语
2014/01/28 职场文书
升国旗仪式主持词
2014/03/19 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
十月围城观后感
2015/06/08 职场文书
新郎新娘致辞
2015/07/31 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js