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获取data-的自定义属性
Nov 10 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
vue中$nextTick的用法讲解
Jan 17 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 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
基于mysql的bbs设计(一)
2006/10/09 PHP
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
php简单中奖算法(实例)
2017/08/15 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
jquery tools之tooltip
2009/07/25 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
基于python实现雪花算法过程详解
2019/11/16 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
顶碗少年教学反思
2014/02/21 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
伏羲庙导游词
2015/02/09 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python