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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
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使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
php格式化时间戳
2016/12/17 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
python如何实现单链表的反转
2020/02/10 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
银行出纳岗位职责
2013/11/25 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
审计专业自荐信范文
2014/04/21 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
超市食品安全承诺书
2015/04/29 职场文书
离职信范本
2015/06/23 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js