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 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 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
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
两款万能的php分页类
2015/11/12 PHP
php中this关键字用法分析
2016/12/07 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python框架中flask知识点总结
2018/08/17 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
大学开学计划书
2014/04/30 职场文书
交通志愿者活动总结
2014/06/27 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
2014年市场部工作总结
2014/11/25 职场文书
优秀员工推荐材料
2014/12/20 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL