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中for..in循环陷阱介绍
Nov 12 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
javascript中indexOf技术详解
May 07 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
JavaScript实现商品评价五星好评
Nov 30 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
QQ登录简单实现代码
2021/03/09 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
浅析Python 序列化与反序列化
2020/08/05 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
小学教师岗位职责
2013/11/25 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书