JavaScript设计模式系列三:建造者模式

本篇文章给大家分享的是javascript设计模式系列三:建造者模式,有感兴趣的朋友可以看一下

建造者模式

建造者模式(builder pattern)比较简单,它属于创建型模式的一种,将一个复杂的对象分解成多个简单的对象来进行构建,将复杂的构建层与表示层分离,使得相同的构建过程可以创建不同的表示的模式便是建造者模式。

优点

建造者模式的封装性很好,对象本身与构建过程解耦。

建造者模式很容易进行扩展。如果有新的需求,通过实现一个新的建造者类就可以完成。

适用场景

需要生成的对象具有复杂得内部结构;且内部属性本身相互依赖

立即学习“Java免费学习笔记(深入)”;

建造者模式的代码实现

建造者模式主要有4个部分:product产品类、Builder建造者类、Director指挥者类、客户。

主要的流程是:

客户提出需求。

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

建造者完成相应的部分。

我们来看一下相应的代码:
产品类为一辆加工的空壳汽车。

/** * 产品类:car 目前需要构建一辆车。 */function car () {    this.name = '',    this.number = '',    this.wheel = '',    this.engine = ''}

登录后复制

接下来看一下建造者类:

/* *    建造者类,里面有专门负责各个部分的工人*/function carBuilder () {    this.nameBuilder = function () {        this.name = '很厉害的车'    },    this.numberBuilder = function () {        this.number = '88888888'    },    this.wheelBuilder = function () {        this.wheel =  '高级橡胶做的轮子'    },    this.engineBuilder = function () {        this.engine =  '很厉害的引擎'    },    this.getCar = function () {        var Car = new car()        Car.name = this.name;        Car.number= this.number;        Car.wheel = this.wheel;        Car.engine = this.engine;        return Car;    }}

登录后复制

再这里我们可以看到各个部分的工人以及他们的工作,他们的各自的工作最终合并成一辆汽车。

指挥者类:

/** *   指挥者类,指挥各个部分的工人工作 */function director () {    this.action = function (builder) {        builder.nameBuilder();        builder.numberBuilder();        builder.wheelBuilder();        builder.engineBuilder();    } }

登录后复制

最后就是使用方法:

/** *    使用方法 */var builder = new carBuilder();var director = new director();director.action(builder);var Car = builder.getCar();console.log(Car);

登录后复制

最终客户通过getCar方法得到了这辆车,并且不需要知道其中得建造细节。

总结

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

相关推荐:

JavaScript设计模式系列一:工厂模式

JavaScript设计模式系列二:单例模式

以上就是JavaScript设计模式系列三:建造者模式的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2776298.html

(0)
上一篇 2025年3月8日 14:46:51
下一篇 2025年2月26日 11:18:24

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript设计模式系列四:原型模式

    本篇文章给大家分享的是关于javascript设计模式系列四:原型模式,有感兴趣的朋友可以看一下 本系列代码已上传到GitHub地址JavaScript设计模式demo 什么是原型模式 原型模式 (Prototype pattern):通俗…

    编程技术 2025年3月8日
    200
  • JavaScript设计模式系列五:适配器模式

    本片文章给大家分享的是javascript设计模式系列五:适配器模式,有感兴趣的朋友可以看一下 什么是适配器模式 所谓 适配器模式 就是用一个新的接口对现有的接口进行包装,处理类与API的不匹配。使用这种模式的对象又叫作包装器。比如我们有一…

    编程技术 2025年3月8日
    200
  • Ajax+json实现购物车结算

    这次给大家带来Ajax+json实现购物车结算,Ajax+json实现购物车结算的注意事项有哪些,下面就是实战案例,一起来看一下。 全选 商品 单价 数量 小计 操作 全选 删除选中产品 总价:¥0 登录后复制 body,html,ul,l…

    2025年3月8日
    200
  • JavaScript设计模式系列六:桥接模式

    本篇文章给大家分享的是javascript设计模式系列六:桥接模式 ,有感兴趣的朋友可以看一下 桥接模式 桥接(Bridge)是用于把抽象化与现实化解耦,使得二者可以独立变化,这种类型的设计模式属于结构型模式,它通过提供抽象化和现实化之间的…

    编程技术 2025年3月8日
    200
  • JavaScript设计模式七:装饰者模式

    本篇文章给大家分享了javascript设计模式七:装饰者模式,有兴趣的朋友可以看一下 装饰者模式 装饰者模式提供比继承更有弹性的替代方案。装饰者用于包装同接口的对象,用于通过重载方法的形式添加新功能,该模式可以在被装饰者的前面或后面加上自…

    编程技术 2025年3月8日
    200
  • AJAX跨域请求JSONP获取JSON数据步骤详解(附代码)

    这次给大家带来AJAX跨域请求JSONP获取JSON数据步骤详解(附代码),AJAX跨域请求JSONP获取JSON数据的注意事项有哪些,下面就是实战案例,一起来看一下。 Asynchronous JavaScript and XML (Aj…

    编程技术 2025年3月8日
    200
  • JavaScript设计模式系列八:外观模式

    本篇文章给大家分享了javascript设计模式系列八:外观模式,有感兴趣的朋友可以看一下 外观模式 外观模式是指提供一个统一的接口去访问多个子系统的多个不同的接口,为子系统中的一组接口提供统一的高层接口。使得子系统更容易使用,不仅简化类中…

    编程技术 2025年3月8日
    200
  • JS实现AJAX局部刷新(附代码)

    这次给大家带来JS实现AJAX局部刷新(附代码),JS实现AJAX局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下。 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),…

    编程技术 2025年3月8日
    200
  • ajax响应json字符串和json数组的方法

    这次给大家带来ajax响应json字符串和json数组的方法,ajax响应json字符串和json数组的注意事项有哪些,下面就是实战案例,一起来看一下。 最近上班太忙,晚上抽空整理一下ajax请求中,后台返回json字符串和json数组的场…

    2025年3月8日
    200
  • js优化原则

    本篇文章给大家及分享的是js优化原则 ,内容挺不错的,有感兴趣的朋友可以看一下 首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略。例如FF、O…

    2025年3月8日
    200

发表回复

登录后才能评论