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 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
Angular的事件和表单详解
Dec 26 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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面向对象的方法重载两种版本比较
2008/09/08 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
Python中的迭代器漫谈
2015/02/03 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Python 定义只读属性的实现方式
2020/03/05 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python 字典中的所有方法及用法
2020/06/10 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
八一建军节感言
2014/02/28 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
公司员工安全协议书
2014/11/21 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers