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 mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
下拉框select的绑定示例
Sep 04 Javascript
JavaScript中的闭包
Feb 24 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
2006/12/14 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
用python读写excel的方法
2014/11/18 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
python db类用法说明
2020/07/07 Python
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
工作过失检讨书
2014/02/23 职场文书
六五普法规划实施方案
2014/03/21 职场文书