• 设计模式(4)[JS版]-JavaScript如何实现建造者模式?


    目录

    1 什么是建造者模式

    2 建造者模式的作用和注意事项

    3.代码实现

    4 总结


    1 什么是建造者模式

     

    建造者模式(Builder)可以将一个复杂对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式,那么用户只需要指定需要建造的类型就可以得到所需要的东西,而具体建造的过程和细节不需要知道。建造者模式实际,就是一个指挥者,一个建造者和一个用户。用户调用指挥者,指挥者调用具体建造者工作,建造者建造出具体的东西给用户。

    建造者模式我们在代码中经常用到,比如Jquery中的ajax请求:

    //1 用户发送一个请求
    //2 $.ajax建造者模式(指挥者) 
    //3 具体实现 (建造者)
    $.ajax({
       url:'www.albertyy.com',
       success:function(argument){
          
        }
    });

    2 建造者模式的作用和注意事项

    Builder模式允许客户端仅通过指定类型和内容来构造一个复杂的对象。构造细节完全对客户端隐藏。使用Builder的最常见的作用是简化创建复杂对象的客户端代码。客户端可以指导建造者创建,而不需要知道实际工作是如何完成的。

    模式作用:

    1 分步创建一个复杂的对象。

    2 解耦封装过程和具体创建的组件。

    3 无需关心组件如何组装。

    注意事项:

    1 要有一个稳定的算法进行支持。

    2 加工工艺是暴露的。

    3.代码实现

    建造者模式的参与者主要有:product产品类、Builder建造者类、Director指挥者类。由于JavaScript不支持抽象类,因此未使用AbstractBuilder。在下面的代码中,有一个Shop(Director )和两个Builder建造者类:CarBuilder和TruckBuilder。Shop的构造方法接受一个Builder实例,然后执行一系列组装步骤:step1和step2。Builder的get方法返回新组装的产品(Car对象和Truck对象)。客户通过向商店提供不同的构建器,可以控制实际对象的构建过程。

    主要的流程是:

    1. 客户提出需求。

    2. 指挥者根据用户需求,指挥建造者去完成需求的各个部分。

    3. 建造者完成相应的部分。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script>
            //商店:Director指挥者类
            function Shop() {
                this.construct = function(builder) {
                    builder.step1();
                    builder.step2();
                    return builder.get();
                }
            }
            //汽车制造商:建造者类
            function CarBuilder() {
                this.car = null;
    
    
                this.step1 = function() {
                    this.car = new Car();
                };
    
    
                this.step2 = function() {
                    this.car.addParts();
                };
    
    
                this.get = function() {
                    return this.car;
                };
            }
            //卡车制造商:建造者类
            function TruckBuilder() {
                this.truck = null;
    
    
                this.step1 = function() {
                    this.truck = new Truck();
                };
    
    
                this.step2 = function() {
                    this.truck.addParts();
                };
    
    
                this.get = function() {
                    return this.truck;
                };
            }
            //产品类:car
            function Car() {
                this.doors = 0;
    
    
                this.addParts = function() {
                    this.doors = 4;
                };
    
    
                this.say = function() {
                    log.add("我是一辆" + this.doors + "门汽车");
                };
            }
            //产品类:Truck
            function Truck() {
                this.doors = 0;
    
    
                this.addParts = function() {
                    this.doors = 2;
                };
    
    
                this.say = function() {
                    log.add("我是一辆" + this.doors + "门卡车");
                };
            }
    
    
            // 日志打印
            var log = (function() {
                var log = "";
                return {
                    add: function(msg) {
                        log += msg + "
    ";
                    },
                    show: function() {
                        alert(log);
                        log = "";
                    }
                }
            })();
            
            //运行程序
            function run() {
                var shop = new Shop();
                var carBuilder = new CarBuilder();
                var truckBuilder = new TruckBuilder();
                //客户通过向商店提供不同的汽车构建器,得到不同的汽车
                var car = shop.construct(carBuilder);
                var truck = shop.construct(truckBuilder);
    
                car.say();
                truck.say();
    
                log.show();
            }
            
            run();
        </script>
    </html>

    4 总结

    建造者模式主要用于“分布构建一个复杂的对象”,它很容易进行扩展。如果有新的需求,通过实现一个新的建造者类就可以完成,并且建造者模式解耦了对象本身与构建过程,使得我们不用关心具体的建造过程。

    通过以上对建造者模式的学习,你应该掌握了以下知识:

    1 知道什么是建造者模式。

    2 掌握建造者模式的作用和使用注意事项。

    3 掌握建造者设计模式代码编写。

    你可以使用这些技巧来改善一下你曾经的代码。如果想继续提高,欢迎关注我写的其他JavaScript设计模式的系列文章。

  • 相关阅读:
    Python random() 生成随机数
    【centos7】添加开机启动服务/脚本
    SSH远程会话管理工具
    resolv.conf 的超时(timeout)与重试(attempts)机制
    Linux系统中sysctl命令详解
    NMI watchdog: BUG: soft lockup
    nginx实现最简单的直播
    Linux下编译PHP常见错误及解决方法
    zbb20180919 db 数据库的水平分割和垂直分割
    zbb20180918 java servlet 重定向与请求转发的区别
  • 原文地址:https://www.cnblogs.com/yangxianyang/p/13675551.html
Copyright © 2020-2023  润新知