JavaScript设计模式(三)——建造者模式

一、建造者模式概念解读

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

         建造者模式主要用于“分步骤构建一个复杂的对象”,在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则经常变化。

         生活中的模型:

         一个白富美,要盖一座房子,她找到了工头,说明了自己的设计要求,工头则组织工人,去盖房子,白富美不需要care建造过程,工头作为指挥者分发任务,工人作为建造者完成开发。最后交付给白富美。

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

    模式作用:

           1.分布创建一个复杂对象

           2.解耦封装过程和具体的组建

           3.无须关心组建如何组装

    注意事项:

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

           2.加工工艺是暴露的

三、建造者模式的代码实战及总结

         其实jquery中存在很多的建造者模式:(粗糙代码) 

<script type="text/javascript">
    //1.发送一个请求
    //2.$.ajax 就充当了一个建造者模式  相当于包工头
    //3.工人 各种回调
    $.ajax({
        url:'a.php',
        success:function (argument) {
            //body
        }
    });
    //$('<p>hhh</p>') => jquery标签,jquery内部实现
</script>

         那么下面我们用客户,包工头,工人这三者的关系,来体现一下建造者模式,现在客户有需求,要盖一座房子,房子里面有客厅,厨房,卧室,然后把包工头当做接口,包工头觉得可以做,然后接了任务,但包工头是一个指挥者,他不参与实际建造,他只做任务的分派,真正的开发者是工人,而与此同时客户也不会和工人接触,最后工人完工之后进行交工。这里的类和变量使用拼音命名,方便大家阅读,但实际开发中不要这样去做。

<meta charset="UTF-8">
<script>
    //1.产出后的东西是房子
    //2.包工头 调用工人进行开工
    //3.工人是盖房子的 工人可以建造卧室 建客厅 建厨房
    //4.包工头只是一个接口,不干活
    function Fangzi() {
        this.woshi = "";
        this.keting = "";
        this.chufang = "";
    }
    
    function Banggongtou() {
        this.gaifangzi = function (gongren) {
            gongren.jian_woshi();
            gongren.jian_keting();
            gongren.jian_chufang();
        }
    }
    
    function Gongren() {
        this.jian_woshi = function () {
            console.log('卧室我盖好了');
        };
        this.jian_keting = function () {
            console.log('客厅我建造好了');
        };
        this.jian_chufang = function () {
            console.log('厨房我盖好了');
        }
        this.jiaogong = function () {
            var _fangzi = new Fangzi();
            _fangzi.woshi = "ok";
            _fangzi.keting = "ok";
            _fangzi.chufang = "ok";
            return _fangzi;
        }
    }

    var gongren = new Gongren();
    var baogongtou = new Banggongtou();
    baogongtou.gaifangzi(gongren);
    //主人要房子
    var myfangzi = gongren.jiaogong();

    console.log(myfangzi);

</script>

下面是输出的结果:

猜你喜欢

转载自blog.csdn.net/qq_41000891/article/details/82782011