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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
javascript实现获取中文汉字拼音首字母
May 19 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
php 可变函数使用小结
2018/06/12 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
美国钻石商店:Zales
2016/11/20 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
大学四年个人总结
2015/03/03 职场文书
自主招生自荐信格式
2015/03/04 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers