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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
Vue Element UI自定义描述列表组件
May 18 Vue.js
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版(3)
2006/10/09 PHP
留言板翻页的实现详解
2006/10/09 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python多线程并发实例及其优化
2019/06/27 Python
python实现广度优先搜索过程解析
2019/10/19 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
有个性的自我评价范文
2013/11/15 职场文书
保密工作责任书
2014/04/16 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL