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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
AngularJS自动表单验证
Feb 01 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 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
我的论坛源代码(六)
2006/10/09 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
常用jQuery代码分享
2015/07/14 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python 互换字典的键值对实例
2019/02/12 Python
Django实现文件上传下载功能
2019/10/06 Python
django序列化serializers过程解析
2019/12/14 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
费城故事观后感
2015/06/10 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Redis实战高并发之扣减库存项目
2022/04/14 Redis