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

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());

文章列表

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