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入门学习资料收集整理篇
Jul 06 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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字符串截取的简单方法
2013/07/04 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
js变量提升深入理解
2016/09/16 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
微信小程序中为什么使用var that=this
2019/08/27 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
Python类属性与实例属性用法分析
2015/05/09 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python格式化输出%s和%d
2018/05/07 Python
对python:print打印时加u的含义详解
2018/12/15 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
医科大学生毕业的自我评价分享
2013/11/12 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
优秀党员先进材料
2014/12/18 职场文书
学生会辞职信
2015/03/02 职场文书
停课通知书
2015/04/24 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
Python装饰器的练习题
2021/11/23 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python