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 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
vue生命周期的探索
Apr 03 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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程序效率优化的一些策略小结
2010/07/17 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
jQuery对表单的操作代码集合
2011/04/06 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
Vue.use源码分析
2017/04/22 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python爬虫基本知识
2018/03/05 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
酒店led欢迎词
2014/01/09 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
质量标语大全
2014/06/12 职场文书
基层党支部整改方案
2014/10/25 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
拖欠货款起诉状
2015/05/20 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
Linux中sftp常用命令整理
2022/06/28 Servers