深入理解JavaScript系列(27):设计模式之建造者模式详解

作者:代码拾荒

时间:2026-10-28

浏览:286

本文详解JavaScript中的建造者模式,旨在解决复杂对象构建中部分频繁变化而组合算法稳定的问题。通过封装构建过程与表示的分离,该模式实现了构建算法的稳定性与对象表示的灵活性。文章结合getBeerById异步请求及jQuery DOM创建实例,展示如何通过回调机制或链式调用实现职责分离,降低耦合度,使复杂对象的创建过程更加灵活且易于维护。

文章目录

介绍

介绍

在软件开发过程中,常遇到“复杂对象”的创建需求,这类对象通常由多个子对象按特定算法组合而成。由于业务需求变更,复杂对象的各个组成部分往往频繁变动,但其组合逻辑却相对固定。面对这种变化,如何设计一种“封装机制”来隔离“复杂对象各部分”的变动,从而确保“稳定构建算法”不受需求变更影响?这正是本文要探讨的建造者模式的核心价值所在。

建造者模式的核心在于将复杂对象的构建过程与其最终表示进行分离。这意味着,相同的构建流程可以生成不同表现形式或类型的对象。采用该模式后,用户只需指定所需构建的目标类型,而无需知晓具体的构建步骤与内部细节,从而简化了客户端代码的复杂度。

正文

正文

该模式相对直观,下面先通过代码示例进行说明,随后展开详细解析。

代码如下:

function getBeerById(id, callback) {
// 使用ID来请求数据,然后返回数据.
asyncRequest('GET', 'beer.uri?id=' + id, function (resp) {
// callback调用 response
callback(resp.responseText);
    });
}
var el = document.querySelector('#test');
el.addEventListener('click', getBeerByIdBridge, false);
function getBeerByIdBridge(e) {
 getBeerById(this.id, function (beer) {
 console.log('Requested Beer: ' + beer);
 });
}

根据建造者模式的定义,这里的“表象”体现为回调函数。也就是说,数据获取后的展示与处理逻辑完全取决于回调函数的实现。反之,在编写回调函数时,开发者无需关心数据是如何被获取的,实现了关注点的分离。类似的场景也常见于jQuery的Ajax方法中,通过success、error等多种回调函数处理不同状态,其核心目的同样在于职责分离。

再来看一个jQuery的示例:

代码如下:

$('<div class= "foo"> bar </div>');

在此场景中,开发者只需传入待生成的HTML字符串,而无需关心底层HTML对象的具体生成机制。

总结

总结

建造者模式主要应用于“分步骤构建复杂对象”的场景。其中,“分步骤”构成了一个相对稳定的算法框架,而复杂对象的各个组成部分则可能经常发生变化。该模式的优势在于:其“加工工艺”是公开透明的,这使得建造者模式具有更高的灵活性。同时,它解耦了组装过程与具体部件的创建,开发者无需深入了解每个部件的具体组装细节,即可构建出完整的复杂对象。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章