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拖拽并简单保存的实现代码
Nov 28 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP实现的简单缓存类
2015/07/29 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
javascript的内存管理详解
2013/08/07 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python实现按行切分文本文件的方法
2016/04/18 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
python实现聊天小程序
2018/03/13 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Python循环结构的应用场景详解
2019/07/11 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
团队精神演讲稿
2013/12/31 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
党小组意见范文
2015/06/08 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
python实现自定义日志的具体方法
2021/05/28 Python
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android