JavaScript建造者模式：原理、实现与优缺点详解

JavaScript建造者模式概述

本文通过具体实例详细解析JavaScript中的建造者模式及其实际应用，旨在为读者提供参考与学习素材。

建造者模式，亦被称为生成器模式，属于创建型设计模式的一种。尽管其使用频率相对其他模式较低，但结构较为复杂。该模式的核心在于为客户端返回一个由多个部件组装而成的复杂产品，而非单一简单对象。

其定义是将一个复杂对象的构建过程与其表示相分离，从而允许相同的构建过程能够创建出不同的表示形式。这是一种典型的对象创建型模式。

具体实现示例如下：

var Dialog = function (){
  this.type = '';
  this.name = '';
  this.element = '';
  this.show = function(){
    console.log(this.name + ': ' + this.type + this.element);
  }
}
 
var noticeBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'notice';
  }
  this.setName = function(){
    this.dialog.name = '公告';
  }
  this.setElement = function(){
    this.dialog.element = '<div>notice</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
var toastBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'toast';
  }
  this.setName = function(){
    this.dialog.name = '提示';
  }
  this.setElement = function(){
    this.dialog.element = '<div>toast</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
function construct(ab){
  ab.setType();
  ab.setName();
  ab.setElement();
  return ab.getDialog();
}
 
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = construct(notice);
var toastIns = construct(toast);
 
noticeIns.show(); //公告: notice<div>notice</div>
toastIns.show(); //提示: toast<div>toast</div>

在建造者模式的运作中，客户端需借助指挥类（通过construct方法）逐步构建出完整的产品。关键在于，即便构造流程相同，最终生成的产品对象可以截然不同。

该模式实现了复杂对象构建与其表示的解耦。用户只需指定所需产品的类型，无需关心具体的建造步骤与细节，系统即可利用相同的构建过程生成不同的表示层。

为了简化系统结构，可以移除construct参数，将construct方法直接合并到builder内部，从而简化调用逻辑。

var Dialog = function (){
  this.type = '';
  this.name = '';
  this.element = '';
  this.show = function(){
    console.log(this.name + ': ' + this.type + this.element);
  }
}
var Construct = function(){
  this.construct = function(){
    this.setType();
    this.setName();
    this.setElement();
    return this.getDialog();
  }
}
 
var noticeBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'notice';
  }
  this.setName = function(){
    this.dialog.name = '公告';
  }
  this.setElement = function(){
    this.dialog.element = '<div>notice</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
var toastBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'toast';
  }
  this.setName = function(){
    this.dialog.name = '提示';
  }
  this.setElement = function(){
    this.dialog.element = '<div>toast</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
noticeBuilder.prototype = new Construct();
toastBuilder.prototype = new Construct();
 
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = notice.construct();
var toastIns = toast.construct();
 
noticeIns.show(); //公告: notice<div>notice</div>
toastIns.show(); //提示: toast<div>toast</div>

对建造者模式进行总结：

优点： * 客户端无需了解产品内部组成的细节，实现了产品使用与创建的解耦，使得相同的创建过程能够生成不同的产品对象。 * 各个具体的建造类相互独立，便于替换和新增，符合开闭原则。

缺点： * 该模式适用于多个产品具有相同创建流程的场景。若产品间差异性较大，则不适合使用建造者模式。 * 若产品内部结构复杂且多变，需要定义大量的建造类来实现各种变化，这可能导致系统结构变得庞大且臃肿。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。