理解JavaScript设计模式中的建造者模式

 更新时间:2022年04月26日 14:30:57   作者:掘金安东尼  
这篇文章主要介绍了理解JavaScript设计模式中的建造者模式,文章基于JavaScript的相关资料展开箱子内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

我们在前面已经提过设计模式创建型模式的 3 种工厂模式 单例模式;本篇带来同属创建型模式的“建造者模式”

分分钟理解建造者模式_建造者

建造者模式(Builder Pattern)使用多个简单的对象一步一步构建成一个复杂的对象。它提供了一种创建对象的最佳方式。

一个 Builder 类会一步一步构造最终的对象。该 Builder 类是独立于其他对象的。

建造者模式:主要解决在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子对象用一定的算法构成;由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一起的算法却相对稳定。

它的优点是:

  • 1、建造者独立,易扩展。
  • 2、便于控制细节风险

缺点: 

  • 1、产品必须有共同点,范围有限制。
  • 2、如内部变化复杂,会有很多的建造类。

当我们需要生成的对象具有复杂的内部结构或需要生成的对象内部属性本身相互依赖时,会借助它来解决问题;

实战举例:

比如说,我们要建造一辆车:

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 = 'V8引擎'
},
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);

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

要注意:与工厂模式的区别是:建造者模式更加关注与零件装配的顺序。

到此这篇关于理解JavaScript设计模式中的建造者模式的文章就介绍到这了,更多相关JS建造者模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    这篇文章主要为大家详细介绍了Bootstrap导航条可点击和鼠标悬停显示下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • js Array对象的扩展函数代码

    js Array对象的扩展函数代码

    有时候我们需要对js的array对象扩展一些功能,这里简单介绍下,方便需要的朋友
    2013-04-04
  • JavaScript 随机验证码的生成实例代码

    JavaScript 随机验证码的生成实例代码

    这篇文章主要介绍了JavaScript 随机验证码的生成实例代码的相关资料,需要的朋友可以参考下
    2016-09-09
  • 微信小程序图片右边加两行文字的代码

    微信小程序图片右边加两行文字的代码

    这篇文章主要介绍了微信小程序图片右边加两行文字的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 基于JS实现将JSON数据转换为TypeScript类型声明的工具

    基于JS实现将JSON数据转换为TypeScript类型声明的工具

    在TypeScript 项目中,我们经常需要使用声明一系列的ts类型。然而,手动写的效率实在太低,本文就实现一个工具将 JSON 数据转换为 TypeScript 类型定义,需要的可以参考一下
    2023-04-04
  • JavaScript包装对象使用详解

    JavaScript包装对象使用详解

    javascript代码运行的过程中基本类型会找到对应的包装对象,然后包装对象把所有的属性和方法给了基本类型,然后包装对象被系统进行销毁,所以理解了包装对象可以很好的理解之前写的代码为什么可以这样做了。
    2015-07-07
  • 利用JS判断客户端类型你应该知道的四种方法

    利用JS判断客户端类型你应该知道的四种方法

    这篇文章主要给大家总结介绍了关于利用JS判断客户端类型的四种方法,比如通过通过判断浏览器的userAgent、检查是否是移动端(Mobile)、ipad、iphone、微信、QQ等的方法,需要的朋友可以参考借鉴,下面
    2017-12-12
  • JS时间转换标准格式、时间戳转换标准格式的示例代码

    JS时间转换标准格式、时间戳转换标准格式的示例代码

    这篇文章主要介绍了JS时间转换标准格式、时间戳转换标准格式的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • js实现无缝滚动图(可控制当前滚动的方向)

    js实现无缝滚动图(可控制当前滚动的方向)

    本文主要分享了js实现无缝滚动图的示例代码,这个版本可以控制左右滚动,鼠标点击对应的广告会自动滑动把广告完全展示出来,当鼠标离开,接着继续滚动。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 利用PHP实现递归删除链表元素的方法示例

    利用PHP实现递归删除链表元素的方法示例

    这篇文章主要给大家介绍了关于如何利用PHP实现递归删除链表元素的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10

最新评论