JavaScript的设计模式经典之建造者模式


Posted in Javascript onFebruary 24, 2016

一、建造者模式模式概念

建造者模式可以将一个复杂的对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类型就可以得到它们,而具体建造的过程和细节就不需要知道了。建造者模式实际就是一个指挥者,一个建造者,一个使用指挥者调用具体建造者工作得出结果的客户。

建造者模式主要用于“分步骤构建一个复杂的对象”,在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则经常变化。

通俗的说:就是一个白富美需要建一个别墅,然后直接找包工头,包工头再找工人把别墅建好。这其中白富美不用直接一个一个工人的去找。而且包工头知道白富美的需求,知道哪里可以找到工人,工人可以干活,中间节省了白富美的和工人之间沟通的成本,白富美也不需要知道房子具体怎么建,最后能拿到房就可以了。

建造者模式结构图

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>
Javascript 相关文章推荐
jquery.validate的使用说明介绍
Nov 12 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
JavaScript函数模式详解
Nov 07 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 #Javascript
jQuery实现验证年龄简单思路
Feb 24 #Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 #Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 #Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 #Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 #Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 #Javascript
You might like
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python 实现插入排序算法
2012/06/05 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
网吧消防安全制度
2014/01/28 职场文书
安全检查管理制度
2014/02/02 职场文书
关爱留守儿童标语
2014/06/18 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js