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最常用与实用的创建类的代码
Aug 12 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
前端vue如何使用高德地图
Nov 05 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/10/09 PHP
php 函数中使用static的说明
2012/06/01 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
JavaScript实现区块链
2018/03/14 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python计算N天之后日期的方法
2015/03/31 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
个人求职信范文
2014/05/24 职场文书
中秋手机店促销方案
2014/06/16 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
运动会广播稿200字
2014/10/18 职场文书
停水通知
2015/04/16 职场文书
小学生手册家长意见
2015/06/03 职场文书
担保书格式范文
2015/09/22 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP