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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
JavaScript函数基础详解
Feb 03 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
深入了解JavaScript 防抖和节流
Sep 12 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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
基于php-fpm 参数的深入理解
2013/06/03 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
类似框架的js代码
2006/11/09 Javascript
javascript中的有名函数和无名函数
2007/10/17 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
全面理解闭包机制
2016/07/11 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
python进行两个表格对比的方法
2018/06/27 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
小学英语教学反思
2014/01/30 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
调研报告的主要写法
2019/04/18 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
iPhone13再次曝光
2021/04/15 数码科技