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自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
jQuery手风琴的简单制作
May 12 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
Vue实现PopupWindow组件详解
Apr 28 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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面向对象全攻略 (五) 封装性
2009/09/30 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python numpy 常用函数总结
2017/12/07 Python
python next()和iter()函数原理解析
2020/02/07 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
UNIX文件类型
2013/08/29 面试题
高三英语教学反思
2014/01/13 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
如何写早恋检讨书
2014/09/10 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
分享Python异步爬取知乎热榜
2022/04/12 Python