怎样用Javascript实现建造者模式

 更新时间:2021年04月26日 09:20:03   作者:有梦想的咸鱼前端  
这篇文章主要介绍了怎样用Javascript实现建造者模式,想学习设计模式的同学,可以参考下

概述

建造者模式是相对比较简单的一种设计模式,属于创建型模式的一种;

定义:将一个复杂的对象分解成多个简单的对象来进行构建,将复杂的构建层与表现层分离,使相同的构建过程可以创建不同的表示模式;

优点:

  • 建造者模式的封装性比较好,创建对象和构建过程解耦;
  • 建造者模式很容易扩展,当我们需要扩展的时候,通过一个新的建造者就可以实现;

模式作用:

  • 分步创建一个复杂的对象
  • 解耦封装过程和具体创建组件
  • 无需关心组件如何组装

注意事项:

  • 一定要一个稳定的算法支持  
  • 加工工艺是暴露的,也就是说土豪可以随时去看房子建的怎么样了

白话解释:

某土豪想建一个房子,某土豪只需要找包工头,包工头再去找施工团队来建造房子,而不需要土豪自己去一个个的找工人搭建施工团队开始施工;包工头知道土豪的需求,也知道哪里能找到工人搭建施工团队,工人可以直接干活,中间节省了土豪直接和工人沟通的成本;土豪不需要知道房子该怎么建,土豪只需要最后能验收到房就行;

代码实现

在写代码之前我们先分析一下:

1、产出的东西是房子

2、包工头调用工人进行开工而且他要很清楚工人们具体的某一个大项

3、工人是盖房子的工人可以建卧室建客厅建厨房

4、包工头只是一个接口,他只对外说盖房子,他不用做事情;   

function Fangzi(){
    this.woshi = "";
    this.keting = "";
    this.chufang = "";
}

function Baogongtou(){
    this.jianfangzi = 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.wangong = function(){
        var fangzi = new Fangzi();
        fangzi.woshi = "ok";
        fangzi.keting = "ok";
        fangzi.chufang = "ok";
        return fangzi;
    }
}
let gongren = new Gongren();
let baogongtou = new Baogongtou();
//卧室建好了!
//客厅建好了!
//厨房建好了!
baogongtou.jianfangzi(gongren);
var my_fangzi = gongren.wangong();
/*
Fangzi={
       chufang: "ok"
       keting: "ok"
       woshi: "ok"
       }
*/
console.log(my_fangzi);            

上述代码中我们可以看到,Gongren()里面是具体的施工过程,也就是具体做的事情,Fangzi()里面一开始都是空的,没有客厅、厨房、卧室;Baogongtou()里面只是对外宣传可以建房子,然后传入工人方法调用工人进行施工;工人方法执行完了也就是施工完了,然后就是交房;一个新的方法里面实例化Fangzi()的方法,在新方法里面重新赋值即可;

以上就是怎样用Javascript实现建造者模式的详细内容,更多关于Javascript建造者模式的资料请关注脚本之家其它相关文章!

相关文章

  • js 概率计算(简单版)

    js 概率计算(简单版)

    这篇文章主要介绍了js 概率计算(简单版),需要的朋友可以参考下
    2017-09-09
  • js实现input的赋值小结

    js实现input的赋值小结

    这篇文章主要介绍了js实现input的赋值问题小结,在实际的开发中,为了页面的美观,可能用到一些框架,比如EasyUI框架,文中介绍了easyui的input框赋值代码,感兴趣的朋友一起看看吧
    2023-12-12
  • 详解微信小程序缓存--缓存时效性

    详解微信小程序缓存--缓存时效性

    这篇文章主要介绍了微信小程序缓存时效性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 微信小程序自定义可滑动日历界面

    微信小程序自定义可滑动日历界面

    这篇文章主要为大家详细介绍了微信小程序自定义可滑动日历界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JS集合set类的实现与使用方法示例

    JS集合set类的实现与使用方法示例

    这篇文章主要介绍了JS集合set类的实现与使用方法,结合具体实例形式分析了javascript集合的创建、元素添加、删除以及并集、交集、补集等运算相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 解决小程序无法触发SESSION问题

    解决小程序无法触发SESSION问题

    这篇文章主要介绍了解决小程序无法触发SESSION问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • JS 实现请求调度器

    JS 实现请求调度器

    这篇文章主要介绍了JS 实现请求调度器的方法,帮助大家更好的理解和学习使用js,感兴趣的朋友可以了解下
    2021-03-03
  • 移动端H5页面返回并刷新页面(BFcache)的方法

    移动端H5页面返回并刷新页面(BFcache)的方法

    这篇文章主要给大家介绍了关于移动端H5页面返回并刷新页面(BFcache)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • JavaScript ES6中类与模块化管理超详细讲解

    JavaScript ES6中类与模块化管理超详细讲解

    JavaScript中的模块化是指将每个js文件会被认为单独一个的模块。模块之间是互相不可见的。如果一个模块需要使用另一个模块,那么需要通过指定语法来引入要使用的模块,而且只能使用引入模块所暴露的内容
    2023-01-01
  • javascript返回顶部效果(自写代码)

    javascript返回顶部效果(自写代码)

    今天抽空用原生javascript写了个返回顶部效果,由于本人水平有限,如有问题请指出,在下很乐意接受,有需要的朋友可以参考下
    2013-01-01

最新评论