理解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建造者模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript中闭包(Closure)详解

    javascript中闭包(Closure)详解

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。小编之前一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,本文把自己的理解些出来分享一下,希望不理解JavaScript闭包的朋友们看了之后能够理解闭包!
    2016-01-01
  • 小程序自定义导航栏兼容适配所有机型(附完整案例)

    小程序自定义导航栏兼容适配所有机型(附完整案例)

    这篇文章主要介绍了小程序自定义导航栏兼容适配所有机型(附完整案例),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 微信小程序进入广告实现代码实例

    微信小程序进入广告实现代码实例

    这篇文章主要介绍了微信小程序进入广告实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js实例入门(简单展开或关闭)

    js实例入门(简单展开或关闭)

    简直的展开或关闭
    2008-11-11
  • 详解微信小程序中组件通讯

    详解微信小程序中组件通讯

    在本篇文章里我们给大家分享了微信小程序中组件通讯的相关知识点以及相关实例代码,有兴趣的朋友们学习分享下。
    2018-10-10
  • 基于JS实现bookstore静态页面的实例代码

    基于JS实现bookstore静态页面的实例代码

    本文给大家分享一段核心代码基于js实现的bookstore静态页面,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-02-02
  • js parseInt的陷阱分析小结

    js parseInt的陷阱分析小结

    js parseInt的陷阱分析小结,当第一个字符为0时,Js会把它看成一个8进制数字,其他8进制之外的字符都回被忽略掉。
    2011-03-03
  • 关于uniapp中onReachBottomDistance属性的使用

    关于uniapp中onReachBottomDistance属性的使用

    这篇文章主要介绍了关于uniapp中onReachBottomDistance属性的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • js和jquery判断数据类型的4种方法总结

    js和jquery判断数据类型的4种方法总结

    这篇文章主要给大家介绍了关于js和jquery判断数据类型的4种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • input type=file 选择图片并且实现预览效果的实例

    input type=file 选择图片并且实现预览效果的实例

    下面小编就为大家带来一篇input type=file 选择图片并且实现预览效果的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论