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 相关文章推荐
javascript去除字符串左右两端的空格
Feb 05 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
jQuery选择器实例应用
Jan 05 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
JS实现选项卡效果的代码实例
May 20 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
操作Oracle的php类
2006/10/09 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
Python 可视化神器Plotly详解
2020/12/26 Python
python定义具名元组实例操作
2021/02/28 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
《春笋》教学反思
2014/04/15 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
任命书格式
2014/06/05 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
股东授权委托书
2014/10/15 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
培训班开班主持词
2015/07/02 职场文书
采购员工作总结范文
2015/08/12 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python