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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
vue如何使用外部特殊字体的操作
Jul 30 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
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
详解爬虫被封的问题
2019/04/23 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
司机辞职报告范文
2014/01/20 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
大学课外活动总结
2014/07/09 职场文书
婚内分居协议书范文
2014/11/26 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server