重学前端 理解JavaScript设计模式之建造者模式

2021-05-27 22:10 前端研究所

图片

后台回复【福利】领取JavaScript零基础入门课程

很多时候,我们在学习前端开发的时候,都以为只要学习好前端开发的语法就行了,或者说做做几个动效,能写出来就行了,却都不知道,其实前端开发的设计模式也很重要!

什么是设计模式

设计模式(design pattern)是一套反复使用、思想成熟、经过分类和无数实战设计经验的总结。

是为了代码可重用、可扩展、可解耦、更容易被人理解和保证代码可靠性。

设计模式共有23种,之前已经给大家讲过使用比较多的工厂模式了,今天我们来讲的是建造者模式,其他模式我们后面会继续给大家讲

建造者模式

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

优点

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

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

适用场景

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


建造者模式在代码中的实现

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

主要的流程是:

  1. 客户提出需求。

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

  3. 建造者完成相应的部分。

我们来看一下相应的代码:

产品类为一辆加工的空壳汽车。

图片

接下来看一下建造者类:

图片

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

指挥者类:

图片

最后就是使用方法:

图片

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

最后总结一下

建造者模式主要用于“分布构建一个复杂的对象”,它很容易进行扩展。

如果有新的需求,通过实现一个新的建造者类就可以完成,并且建造者模式解耦了对象本身与构建过程,使得我们不用关心具体的建造过程。

好了,今天建造者模式就讲那么多,我们下次再聊聊别的内容,我们下次再见!



图片

本文章转载自公众号:WEBqdyjs

首页 - 前端 相关的更多文章: