JavaScript建造者模式详解:概念、结构与实战代码

作者:异步漫步时间:2026-10-29 22:20:09浏览:451

本文深入解析JavaScript中的建造者模式,阐述其将复杂对象构建与表示分离的核心概念。通过白富美建别墅的通俗案例说明分步构建与解耦封装的作用,并展示包含指挥者、建造者及具体产品的完整JavaScript代码实战,帮助开发者掌握如何稳定算法下创建不同表示的复杂对象。

建造者模式概念解析

一、建造者模式模式概念

建造者模式的核心在于将复杂对象的构建逻辑与其最终表现形式进行解耦。利用该模式,相同的构建流程可以生成不同形态的结果。用户只需指定所需对象的类型,而无需知晓具体的构建细节与内部实现。该模式通常涉及三个角色:指挥者(Director)负责调度构建流程,具体建造者(Builder)执行实际构建工作,以及客户(Client)通过指挥者获取最终产品。

该模式主要应用于“分步骤构建一个复杂的对象”场景。在此过程中,“分步骤”的执行顺序是一个相对稳定的算法,而复杂对象中各个组成部分的实现则可能频繁发生变化。

通俗理解:假设一位白富美需要建造别墅,她无需直接联系并管理众多工人,而是直接委托包工头。包工头负责协调工人完成别墅建设。白富美只需提出需求,无需了解具体施工细节,也节省了与工人直接沟通的成本。包工头清楚需求来源及工人资源,工人负责具体施工,最终白富美直接接收成品房屋。

建造者模式结构图

建造者模式概念解析

作用与注意事项

二、建造者模式的作用和注意事项

模式作用:

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>

作者最新文章