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中getJSON的使用方法
Dec 13 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
详解vuex状态管理模式
Nov 01 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 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
短波的认识
2021/03/01 无线电
php 不使用js实现页面跳转
2014/02/11 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
常用jQuery代码分享
2015/07/14 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
React组件生命周期详解
2017/07/03 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python得到单词模式的示例
2018/10/15 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
中专生自我鉴定书范文
2013/12/28 职场文书
工作检讨书怎么写
2014/10/10 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js