JavaScript设计模式之建造者模式实例教程


Posted in Javascript onJuly 02, 2018

本文实例讲述了JavaScript设计模式之建造者模式。分享给大家供大家参考,具体如下:

一、建造者模式模式概念

建造者模式可以将一个复杂的对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类型就可以得到它们,而具体建造的过程和细节就不需要知道了。建造者模式实际就是一个指挥者,一个建造者,一个使用指挥者调用具体建造者工作得出结果的客户。

建造者模式主要用于“分步骤构建一个复杂的对象”,在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则经常变化。

通俗的说:就是一个白富美需要建一个别墅,然后直接找包工头,包工头再找工人把别墅建好。这其中白富美不用直接一个一个工人的去找。而且包工头知道白富美的需求,知道哪里可以找到工人,工人可以干活,中间节省了白富美的和工人之间沟通的成本,白富美也不需要知道房子具体怎么建,最后能拿到房就可以了。

二、建造者模式的作用和注意事项

模式作用:

1.分步创建一个复杂的对象

2.解耦封装过程和具体创建组件

3.无需关心组件如何组装

注意事项:

1.一定要一个稳定的算法进行支持

2.加工工艺是暴露的--白富美不用关心如何建房子,但可以随时去看房子建得怎么样

三、建造者模式代码和实战总结

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>建造者模式</title>
</head>
<body>
<script>
 //1.产出东西是房子
 //2.包工头调用工人进行开工 而且他要很清楚工人们具体的某一个大项
 //3.工人是盖房子的 工人可以建卧室 建客厅 建厨房
 //4.包工头只是一个接口而已 他不干活 他只对外说我能建房子
 function Fangzi(){//Fangzi可以理解为单例模式
  if(!(this instanceof Fangzi)){
   return new Fangzi();
  }
  this.woshi = "";
  this.keting = "";
  this.chufang = "";
 }
 function Baogongtou(){
  if(!(this instanceof Baogongtou)){
   return new Baogongtou();
  }
  this.jianfangzi = function(gongren){
   gongren.jian_chufang();
   gongren.jian_keting();
   gongren.jian_woshi();
  }
 }
 function Gongren(){
  if(!(this instanceof Gongren)){
   return new Gongren();
  }
  this.jian_woshi = function(){
   console.log("建卧室");
  }
  this.jian_keting = function(){
   console.log("建客厅");
  }
  this.jian_chufang = function(){
   console.log("建厨房");
  }
  this.jiaofang = function(){
   var _fangzi = new Fangzi();
   _fangzi.woshi = "ok";
   _fangzi.keting = "ok";
   _fangzi.chufang = "ok";
   return _fangzi;
  }
 }
 var gongren = new Gongren();
 var baogongtou = new Baogongtou();
 baogongtou.jianfangzi(gongren);
 var myfangzi = gongren.jiaofang();
 console.log(myfangzi);
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

JavaScript设计模式之建造者模式实例教程

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
JS定时器实例
Apr 17 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 #Javascript
JS内部事件机制之单线程原理
Jul 02 #Javascript
JS将网址url转化为JSON格式的方法
Jul 02 #Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 #Javascript
JS限制输入框输入的实现代码
Jul 02 #Javascript
webpack手动配置React开发环境的步骤
Jul 02 #Javascript
Angularjs中的$apply及优化使用详解
Jul 02 #Javascript
You might like
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python使用socket连接远程服务器的方法
2015/04/29 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python生成九宫格图片
2018/11/19 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
如何用python免费看美剧
2020/08/11 Python
技校毕业生的自我评价
2013/12/27 职场文书
党员入党表决心的话
2014/03/11 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
导游词之无锡梅园
2019/11/28 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技