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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 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利用imagick生成组合缩略图
2016/02/19 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
p5.js绘制创意自画像
2019/11/04 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
深入理解Python爬虫代理池服务
2018/02/28 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
flask实现验证码并验证功能
2019/12/05 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python中logger日志模块详解
2020/08/04 Python
Python和Bash结合在一起的方法
2020/11/13 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
中式婚礼主持词
2014/03/13 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
综合实践活动总结
2014/05/05 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
班主任寄语2016
2015/12/04 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
Java使用Unsafe类的示例详解
2021/09/25 Java/Android