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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 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解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
jQuery length 和 size()区别总结
2018/04/26 jQuery
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python 剪切移动文件的实现代码
2018/08/02 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
从0开始的Python学习016异常
2019/04/08 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
通过Python实现一个简单的html页面
2020/05/16 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
小学生差生评语
2014/12/29 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL