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

来源：互联网发布：vga 网络机顶盒编辑：程序博客网时间：2024/06/06 15:52

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 - 状态模式

阅读全文

0 0