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 错误处理的几种方法
Jun 13 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 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
smarty模板引擎基础知识入门
2015/03/30 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
php实现json编码的方法
2015/07/30 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
中学生期末评语
2014/02/03 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
陈欧广告词
2014/03/14 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
升学宴家长致辞
2015/07/27 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
Redis高可用集群redis-cluster详解
2022/03/20 Redis