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实现键盘方向键翻页功能的代码
Jun 03 Javascript
js类中获取外部函数名的方法
Aug 19 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
Yii分页用法实例详解
2014/12/04 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
JS 日期比较大小的简单实例
2014/01/13 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
jQuery事件用法详解
2016/10/06 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python取代netcat过程分析
2018/02/10 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python实现Event回调机制的方法
2019/02/13 Python
OpenCV 边缘检测
2019/07/10 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
消防验收申请报告
2015/05/15 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis