Javascript设计模式 - 03 - 建造者模式

简介

建造者模式可以将一个复杂的对象的构建与其表示相分离，使得同样的构建过程可以创建不同的表示，用户只要指定需要建造的类型，其他具体的建造过程和细节不需要知道，就可以得出对应的结果，总结：拆解流程，各司其职

作用和注意事项

作用

分步骤构建一个复杂的对象解耦封装过程和具体创建的组件无需关心组件如何组装提供一种封装机制来隔离出复杂对象的‘各个部分’的变化,将复杂对象的‘各个部分’的子对象通过一定的算法合成，这样在需求变化时，只需要改变‘各个部分’的子对象，而不需要改变将他们组合在一起的算法，这样就可以保持构建算法的相对稳定

注意事项

稳定的算法进行支撑，约束

个人理解

像建造房子一样，创建一份计划，把每一步需要的东西罗列出来，分步骤按照固定的流程构建；每一步需要的东西分离出去分别交给不同的创建，每一步具体创建过程的变化不影响房子的构建流程。

代码

// 创建框架的构造函数 function Frame(quality) { this.name = 'frame'; this.quality = quality; } // 创建填充的构造函数 function Fill(quality) { this.name = 'fill'; this.quality = quality; } // 创建包装的构造函数 function Pack(quality) { this.name = 'pack'; this.quality = quality; } // 创建产品类，最终产品为他的实例 function Product() { // 假设一件产品需要有 框架、填充、包装 三个属性 // 三个属性设置为私有，这样外部就不会不小心修改掉 var frame, fill, pack; // 设定修改和获取方法 this.setFrame = function (val) { frame = new Frame(val); } this.getFrame = function () { return frame; } this.setFill = function (val) { fill = new Fill(val); } this.getFill = function () { return fill; } this.setPack = function (val) { pack = new Pack(val); } this.getPack = function () { return pack; } // 定义查看产品信息的方法 this.showInfo = function () { console.log(` 框架：${frame.name} - ${frame.quality} 填充：${fill.name} - ${fill.quality} 包装：${pack.name} - ${pack.quality} `); } } // 建造者原型，封装建造方法，这里可以根据不同的需求，定制不同的建造者 function Builder() { // 创建产品的实例 var product = new Product(); // 建造者创建产品的函数 this.buildFrame = function () { product.setFrame(100); } this.buildFill = function () { product.setFill(60); } this.buildPack = function () { product.setPack(40); } this.exportProduct = function () { return product; } } // 指导者，控制规范建造的流程 function Director() { // 实例化具体的建造者 var builder = new Builder(); // 指导者的开始建造命令 this.build = function () { builder.buildFrame(); builder.buildFill(); builder.buildPack(); return builder.exportProduct(); } } // 使用阶段 // 创建一个指导者，规划生产流程 var director = new Director(); // 根据流程创建商品 var product = director.build(); // 查看生产产品详情 product.showInfo(); // 查看某一个属性 console.log(product.getFrame());

文章列表

javascript设计模式 – 设计原则JavaScript设计模式–高阶函数Javascript 设计模式 - 01 - 原型模式Javascript 设计模式 - 02 - 单例模式Javascript 设计模式 - 03 - 建造者模式Javascript 设计模式 - 04 - 工厂模式Javascript 设计模式 - 05 - 外观模式Javascript 设计模式 - 06 - 代理模式Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）Javascript 设计模式 - 08 - 策略模式Javascript 设计模式 - 09 - 命令模式Javascript 设计模式 - 10 - 迭代器模式Javascript 设计模式 - 11 - 职责链模式Javascript 设计模式 - 12 - 适配器模式Javascript 设计模式 - 13 - 模板方法Javascript 设计模式 - 14 - 组合模式Javascript 设计模式 - 15 - 享元模式Javascript 设计模式 - 16 - 中介者模式Javascript 设计模式 - 17 - 装饰者模式Javascript 设计模式 - 18 - 状态模式