JavaScript 23 种设计模式之 5 建造者模式

Bertha 。 2023-03-13 01:55 46阅读 0赞

### JavaScript 23 种设计模式之 5 建造者模式 ###

*  概念与特点
 *  结构与实现
 *  应用场景
 *  应用实例
 *  总结

# 概念与特点 #

概念：  
将一个复杂对象的构造和它的表现分离。使同样的构建过程可以创建不同的表示。将复杂的对象分解成一个个简单的对象，然后一步步构建而成。将变与不变分离，产品的组成部分是不变的，但每一部分是可以灵活选择的。

特点：

1.  各个具体的建造者相互独立，有利于系统的拓展。
2.  客户端不必知道产品内部组成的细节，便于控制细节风险。
3.  产品的组成部分必须相同，限制了使用范围。
4.  如果产品内部结构复杂，会增加很多建造者类。

# 结构与实现 #

建造者模式由产品、抽象建造者、具体建造者、指挥者 4 个要素构成。  
产品：包含多个组成部件的复杂对象。  
抽象建造者：创建产品各个子部件的抽象方法以及返回产品的方法。  
具体建造者：实现建造者接口，完成复杂产品的各个零部件的的具体方法。  
指挥者：调用建造者对象中的部件构造与装配方法完成复杂对象的创建。指挥者中不涉及产品的具体信息。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        //客厅-包含多个组成部件(刷墙，买电视，买沙发)
        function LivingRoom(wall,tv,sofa) { 
            var wall,tv,sofa;
            this.setWall = function (wall) { 
                this.wall = wall;
            };
            this.setTv = function (tv) { 
                this.tv = tv;
            };
            this.setSofa = function (sofa) { 
                this.sofa = sofa;
            };
            this.show = function () { 
                console.log(this.wall,this.tv,this.sofa)
            }
        }
        //抽象建造者-包含创建子部件的抽象方法及返回产品的方法
        function Builder() { 
            this.product = new LivingRoom();
            this.getResult = function () { 
                return this.product;
            }
        }
        Builder.prototype.buildWall = function () { }
        Builder.prototype.buildTv = function () { }
        Builder.prototype.buildSofa = function () { }
        //具体建造者
        function ConcreteBuilder() { }
        ConcreteBuilder.prototype = new Builder();
        ConcreteBuilder.prototype.buildWall = function (){ 
            this.product.setWall("刷墙");
            console.log(this.product)
        };
        ConcreteBuilder.prototype.buildTv = function (){ 
            this.product.setTv("安装电视");
        };
        ConcreteBuilder.prototype.buildSofa = function (){ 
            this.product.setSofa("安装沙发");
        };
        //指挥者
        function Director(builder) { 
            //获取产品方法
           this.getProduct = function () { 
               //刷墙
               builder.buildWall();
               //安装电视
               builder.buildTv();
               //安装沙发
               builder.buildSofa();
               //返回客厅
               return builder.getResult();
           }
        }
        var concreteBuild = new ConcreteBuilder();
        var director= new Director(concreteBuild);
        var product = director.getProduct();
        product.show();
    </script>
    </body>
    </html>

# 应用场景 #

1.  需要创建由多个部件组成的对象。
2.  产品的创建与表示是独立的。

# 应用实例 #

暂无。

# 总结 #

建造者模式就是一种组装的概念，由不同的零件组装成一个复杂的产品。但需要注意的是零件之间的构造顺序是稳定的。

与工厂方法不同的是建造者模式更注重的是零件的组装过程，而工厂方法注重的是零件的创建过程。

在使用建造者模式时，如果产品种类只需要一个具体建造者，则可以省略掉抽象建造者和指挥者。