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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP类的封装与继承详解
2015/09/29 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python reduce 函数使用详解
2017/12/05 Python
Python版名片管理系统
2018/11/30 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
计算机求职信
2013/12/01 职场文书
模范教师事迹材料
2014/02/10 职场文书
品牌宣传方案
2014/03/21 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
社区母亲节活动总结
2015/02/10 职场文书
Python访问Redis的详细操作
2021/06/26 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL
Redis 限流器
2022/05/15 Redis