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中实现命名空间
Nov 23 Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
php中关于换行的实例写法
2019/09/26 PHP
经验几则 推荐
2006/09/05 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
详解Python 函数如何重载?
2019/04/23 Python
PyTorch预训练的实现
2019/09/18 Python
python实现在一个画布上画多个子图
2020/01/19 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
基于Python绘制个人足迹地图
2020/06/01 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
学习十八届三中全会精神实施方案
2014/02/17 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
商铺租赁意向书
2014/04/01 职场文书
优秀员工推荐材料
2014/12/20 职场文书
学生会任命书范本
2015/09/21 职场文书
通知怎么写?
2019/04/17 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis