JavaScript的设计模式经典之建造者模式
更新时间：2016年02月24日 14:07:16 投稿：mrr
建造者模式是设计模式的一种，将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。接下来通过本文给大家介绍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>
相关文章
这篇文章主要为大家详细介绍了js实现网页计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
JavaScript中清空数组的三种方法分享，需要的朋友可以参考下。2011-04-04
在输入框里面预设一段提示文字，当焦点在输入框的时候清空这段文字，这在目前来说已经不是什么新鲜事了。2011-03-03
当我们在开发Uni-app应用时,经常会遇到需要在不同页面之间传递参数的情况,为了实现跨页面传参,Uni-app提供了几种方式,所以本文小编将给大家介绍一下uniapp跨页面传参的几种方式,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-01-01
微信内置浏览器屏蔽了下载链接,如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,那么该如何判断用户是否是用微信浏览器呢?这篇文章主要给大家介绍了关于js代码判断是否处于微信浏览器内的两种方式,需要的朋友可以参考下2023-10-10
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
这篇文章主要介绍了web3.js增加eth.getRawTransactionByHash(txhash)方法步骤,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了在JavaScript中call()与apply()区别 的相关资料,需要的朋友可以参考下2016-01-01
下面小编就为大家分享一篇详谈DOM的简介,节点和获取元素，具有非常好的参考价值，一起跟随小编过来看看吧，希望对大家有所帮助2021-11-11
这篇文章主要介绍了关于moment.js的常用方法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
下面小编就为大家带来一篇浅谈JS中的常用选择器及属性、方法的调用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论