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的简单图片切换效果
Jan 06 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
JavaScript Array对象详解
Mar 01 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
zTree树形插件异步加载方法详解
Jun 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
php源码的安装方法和实例
2019/09/26 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
JS backgroundImage控制
2009/05/19 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
python中管道用法入门实例
2015/06/04 Python
python如何在循环引用中管理内存
2018/03/20 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
set在python里的含义和用法
2019/06/24 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
办公室主任职责范文
2013/11/08 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
学习新党章思想汇报
2014/01/09 职场文书
档案接收函
2014/01/13 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
《乞巧》教学反思
2014/02/27 职场文书
实习单位鉴定评语
2014/04/26 职场文书
职务任命书范本
2014/06/05 职场文书
土建工程师岗位职责
2014/06/10 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
个人总结格式范文
2015/03/09 职场文书
人事任命通知
2015/04/20 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL