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 相关文章推荐
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
Angular实现form自动布局
Jan 28 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
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中date()日期函数有关参数整理
2011/07/19 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
js闭包实例汇总
2014/11/09 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
django框架cookie和session用法实例详解
2019/12/10 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
《理想》教学反思
2014/02/17 职场文书
2014年计生标语
2014/06/23 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
求职信范文怎么写
2015/03/19 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏