怀化热线

怀化热线 > 教育

建造者模式——帮你解决四大JavaScript问题

2020-03-30 17:59:56 来源: 阅读:-

全文共11238字,预计学习时长33分钟

图源:Pexels

在用JavaScript开发APP时,你可能会觉得创建一个复杂对象很困难。一旦这关系到代码中的某个细节,创建复杂对象就会变得更加复杂,因为它会使APP很占内存。

这样的困难一般有很多形式。一种是,在试图创建不同种类的复杂对象时,代码会变得很冗长;另一种,创建不同对象的过程会被拉长,因为同一等级模块中的逻辑需要梳理清晰。


这个时候,我们就需要运用到建造者模式(builderpattern)。一些问题运用建造者模式可以得到轻松改善。


首先,什么是建造者模式(builder pattern)?


建造者模式可以将一个复杂的对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类型就可以得到它们,而具体建造的过程和细节就不需要知道了。建造者模式实际就是一个指挥者,一个建造者,一个使用指挥者调用具体建造者工作得出结果的客户。


建造者模式主要用于“分步骤构建一个复杂的对象”,在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则经常变化。


通俗的说:就是一个白富美需要建一个别墅,然后直接找包工头,包工头再找工人把别墅建好。这其中白富美不用直接一个一个工人的去找。而且包工头知道白富美的需求,知道哪里可以找到工人,工人可以干活,中间节省了白富美的和工人之间沟通的成本,白富美也不需要知道房子具体怎么建,最后能拿到房就可以了。

图源:Pexels

今天的文章里,小芯就将和大家一起讨论文章开头提及的问题,以及如何在使用JavaScript的设计过程中解决这些问题。哪些问题可以通过建造者模式得到轻松改善?


首先来看一个不使用建造者模式的例子,再和使用建造者模式的例子进行对比,我们可以看到代码上的区别。


在下面的代码示例中,我们试图定义“frog(青蛙)”这一类。假设,为了让青蛙完全有能力在野外生存,它们需要两只眼睛、四条腿、嗅觉、味觉和心跳。


现在,很明显,在现实世界中,有更多事情牵涉其中,需要某一种气味才能生存听起来很荒谬,但我们不需要对每件事都完全实事求是,只要让它既简单又有趣就行了。


不用建造者模式


classFrog {

constructor(name, gender, eyes, legs, scent, tongue, heart, weight, height) {

this.name= name

this.gender = gender

this.eyes = eyes

this.legs = legs

this.scent = scent

this.tongue = tongue

this.heart = heart

if (weight) {

this.weight = weight

}

if (height) {

this.height= height

}

}

}

Frog.js hosted with ❤ by GitHub

使用建造者模式


classFrogBuilder {

constructor(name, gender) {

this.name= name

this.gender = gender

}

setEyes(eyes) {

this.eyes = eyes

returnthis

}

setLegs(legs) {

this.legs = legs

returnthis

}

setScent(scent) {

this.scent = scent

returnthis

}

setTongue(tongue) {

this.tongue = tongue

returnthis

}

setHeart(heart) {

this.heart = heart

returnthis

}

setWeight(weight) {

this.weight = weight

returnthis

}

setHeight(height) {

this.height= height

returnthis

}

}

FrogBuilder.js hosted with ❤ by GitHub

现在这看起来好像有点矫枉过正了,因为建造者模式下的代码量更大。


但是如果深入挖掘在开发过程可能发生的所有情况,您将发现,对比这两个示例,建造者模式下的代码示例将在促进简单性、可维护性和提供更多机会,从而在实现强大功能的方面更占优势。


下面四个是在JavaScript中利用建造者模式设计就可以轻松解决的大问题。


一、可读性

图源:Pexels

最近的代码示例已经变得有点难以阅读,因为我们必须同时处理多种变化。


如果想创造“青蛙”的实例,就没有办法对其置之不理,只能去理解整个过程。


此外,提供一些文档,否则不能理解为什么tongueWidth被重命名为width。这太荒谬了!


classFrogBuilder {

constructor(name, gender) {

// Ensure that the first character is always capitalized

this.name= name.charAt(0).toUpperCase() + name.slice(1)

this.gender = gender

}

formatEyesCorrectly(eyes) {

returnArray.isArray(eyes) ? { left: eye[0], right: eye[1] } : eyes

}

setEyes(eyes) {

this.eyes =this.formatEyes(eyes)

returnthis

}

setLegs(legs) {

if (!Array.isArray(legs)) {

thrownewError('"legs" is not an array')

}

this.legs = legs

returnthis

}

setScent(scent) {

this.scent = scent

returnthis

}

updateTongueWidthFieldName(tongue) {

constnewTongue= { ...tongue }

delete newTongue['tongueWidth']

newTongue.width= tongue.width

return newTongue

}

setTongue(tongue) {

constisOld='tongueWidth'in tongue

this.tongue = isOld

?this.updateTongueWidthFieldName(tongue, tongue.tongueWidth)

: tongue

returnthis

}

setHeart(heart) {

this.heart = heart

returnthis

}

setWeight(weight) {

if (typeof weight !=='undefined') {

this.weight = weight

}

returnthis

}

setHeight(height) {

if (typeof height !=='undefined') {

this.height= height

}

returnthis

}

build() {

returnnewFrog(

this.name,

this.gender,

this.eyes,

this.legs,

this.scent,

this.tongue,

this.heart,

this.weight,

this.height,

)

}

}

constlarry=newFrogBuilder('larry', 'male')

.setEyes([{ volume:1.1 }, { volume:1.12 }])

.setScent('sweaty socks')

.setHeart({ rate:22 })

.setWeight(6)

.setHeight(3.5)

.setLegs([

{ size:'small' },

{ size:'small' },

{ size:'small' },

{ size:'small' },

])

.setTongue({ tongueWidth:18, color:'dark red', type:'round' })

.build()

FrogBuilder.js hosted with ❤ by GitHub

从以下四个方面来获得提升代码可读性的能力:


1. 使方法的名称具有充分的自记录性


对我们来说,updateTongueWidthFieldName的用处和使用原因很容易被定义。


我们知道这是正在更新字段名。我们也知道其中的原因,因为update这个词已经意味着更新!这个自记录的代码帮助我们假设一个旧的字段名,需要更改以使用新的。


2. 简短的构造器


完全可以以后再设置别的属性!


3. 当启动一个新“frog”时,要清楚了解每个参数


就像读英语一样,你需要清楚地设置出“眼睛”“腿”,然后使用建造方法去构建“青蛙”。


4. 将每个逻辑隔离在单独的容易执行的代码块中


当你修改一些东西时,只需要专注于一件事,那就是在代码块中被隔离出来的东西。


二、样板文件(通过模板化解决)

图源:Unsplash

我们将来可能会遇到的一个问题是,最后会得到一些重复的代码。


例如,回顾“frog”实例时,你认为当我们想要创造某些特殊类型的青蛙时,它们会具有完全相同的特性吗?


在现实世界中,青蛙有不同的变种。例如,蟾蜍是青蛙的一种,但并非所有的青蛙都是蟾蜍。所以,这告诉我们蟾蜍有一些与普通青蛙不同的特性。


蟾蜍和青蛙的一个区别是,蟾蜍的大部分时间是在陆地上度过的,而普通青蛙是在水里。此外,蟾蜍的皮肤有干疙瘩,而正常青蛙的皮肤有点黏。


这意味着我们必须以某种方式确保每次青蛙被实例化时,只有一些值可以通过,也有一些值必须通过。


让我们回到Frog构造器,添加两个新参数:栖息地和皮肤:


将来可能会遇到的一个问题是,最终会得到一些重复的代码。


classFrog {

constructor(

name,

gender,

eyes,

legs,

scent,

tongue,

heart,

habitat,

skin,

weight,

height,

) {

this.name= name

this.gender = gender

this.eyes = eyes

this.legs = legs

this.scent = scent

this.tongue = tongue

this.heart = heart

this.habitat = habitat

this.skin = skin

if (weight) {

this.weight = weight

}

if (height) {

this.height= height

}

}

}

Frog.js hosted with ❤ by GitHub

在两次简单的更改后,这个构造器已经有点混乱了!这就是为什么推荐使用建造者模式。


如果把栖息地和皮肤参数放在最后,可能会出现错误,因为体重和身高可能很难确定,而这些又都是可变的!


又由于这种可选性,如果用户不传递这些信息,就会出现错误的栖息地和皮肤信息。


编辑FrogBuilder来支持栖息地和皮肤:


setHabitat(habitat) {

this.habitat = habitat

}

setSkin(skin) {

this.skin = skin

}

FrogBuilder.js hosted with ❤ by GitHub

现在假设需要两只分开的蟾蜍和一只正常的青蛙:


// frog

constsally=newFrogBuilder('sally', 'female')

.setEyes([{ volume:1.1 }, { volume:1.12 }])

.setScent('blueberry')

.setHeart({ rate:12 })

.setWeight(5)

.setHeight(3.1)

.setLegs([

{ size:'small' },

{ size:'small' },

{ size:'small' },

{ size:'small' },

])

.setTongue({ width:12, color:'navy blue', type:'round' })

.setHabitat('water')

.setSkin('oily')

.build()

// toad

constkelly=newFrogBuilder('kelly', 'female')

.setEyes([{ volume:1.1 }, { volume:1.12 }])

.setScent('black ice')

.setHeart({ rate:11 })

.setWeight(5)

.setHeight(3.1)

.setLegs([

{ size:'small' },

{ size:'small' },

{ size:'small' },

{ size:'small' },

])

.setTongue({ width:12.5, color:'olive', type:'round' })

.setHabitat('land')

.setSkin('dry')

.build()

// toad

constmike=newFrogBuilder('mike', 'male')

.setEyes([{ volume:1.1 }, { volume:1.12 }])

.setScent('smelly socks')

.setHeart({ rate:15 })

.setWeight(12)

.setHeight(5.2)

.setLegs([

{ size:'medium' },

{ size:'medium' },

{ size:'medium' },

{ size:'medium' },

])

.setTongue({ width:12.5, color:'olive', type:'round' })

.setHabitat('land')

.setSkin('dry')

.build()

FrogBuilder.js hosted with ❤ by GitHub

那么,这里的代码哪里重复了呢?


如果仔细观察,就会注意到我们必须重复蟾蜍的栖息地和皮肤设置。如果再有五个只属于蟾蜍的设置呢?那么每次输出蟾蜍或者是普通青蛙的时候,都要手动操作这个模板。


创建一个模板,按照惯例,通常称之为指导器(director)。


指导器负责执行创建对象的步骤——通常是在构建最终对象时可以预先定义一些公共结构,比如本例中的蟾蜍。


因此,不必手动设置蟾蜍之间的不同属性,可以让指导器直接生成:


classToadBuilder {

constructor(frogBuilder) {

this.builder = frogBuilder

}

createToad() {

returnthis.builder.setHabitat('land').setSkin('dry')

}

}

let mike =newFrogBuilder('mike', 'male')

mike =newToadBuilder(mike)

.setEyes([{ volume:1.1 }, { volume:1.12 }])

.setScent('smelly socks')

.setHeart({ rate:15 })

.setWeight(12)

.setHeight(5.2)

.setLegs([

{ size:'medium' },

{ size:'medium' },

{ size:'medium' },

{ size:'medium' },

])

.setTongue({ width:12.5, color:'olive', type:'round' })

.build()

ToadBuilder.js hosted with ❤ by GitHub

这样,就可以避免将蟾蜍的共享样板文件应用到所有,而只关注其所需属性。当蟾蜍有更多的独有属性时,这将变得更加有用。


三、代码混乱

图源:Unsplash

由于粗心大意地开发大型功能代码块而导致的错误和事故并不少见。此外,当一个代码块需要处理太多事情时,指令就很容易被搞错。


那么,当功能代码块(比如构造器)中有太多待处理时,会遇到什么情况?


回到第一个代码示例(在不用建造者模式的情况下实现),假设必须先添加一些额外的逻辑来接受传入的参数,然后才能将它们应用于实例:


classFrog {

constructor(name, gender, eyes, legs, scent, tongue, heart, weight, height) {

if (!Array.isArray(legs)) {

thrownewError('Parameter "legs" is not an array')

}

// Ensure that the first character is always capitalized

this.name= name.charAt(0).toUpperCase() + name.slice(1)

this.gender = gender

// We are allowing the caller to pass in an array where the first index is the left eye and the 2nd is the right

// This is for convenience to make it easier for them.

// Or they can just pass in the eyes using the correct format if they want to

// We must transform it into the object format if they chose the array approach

// because some internal API uses this format

this.eyes =Array.isArray(eyes) ? { left: eye[0], right: eye[1] } : eyes

this.legs = legs

this.scent = scent

// Pretending some internal API changed the field name of the frog's tongue from "tongueWidth" to "width"

// Check for old implementation and migrate them to the new field name

constisOld='tongueWidth'in tongue

if (isOld) {

constnewTongue= { ...tongue }

delete newTongue['tongueWidth']

newTongue.width= tongue.width

this.tongue = newTongue

} else {

this.tongue = newTongue

}

this.heart = heart

if (typeof weight !=='undefined') {

this.weight = weight

}

if (typeof height !=='undefined') {

this.height= height

}

}

}

constlarry=newFrog(

'larry',

'male',

[{ volume:1.1 }, { volume:1.12 }],

[{ size:'small' }, { size:'small' }, { size:'small' }, { size:'small' }],

'sweaty socks',

{ tongueWidth:18, color:'dark red', type:'round' },

{ rate:22 },

6,

3.5,

)

Frog.js hosted with ❤ by GitHub

构造器代码有点长,因为要处理不同参数,它的逻辑会被弄乱,因此在某些情况下,它甚至不需要很多的逻辑。这可能会让代码难懂,特别是在很久没有看到源代码的情况下。


如果我们在开发一个frog应用程序,并且想将其实例化,会有一个缺点:必须确保每个得到的参数在遵循函数签名方面接近100%完美,否则在构建阶段会有一些抛出。


如果需要在某个时候仔细检查“眼睛”的类型,就必须在杂乱的代码中寻找,才能得到我们要找的。


如果您最终找到了要查找的行,但随后意识到有另一行代码正在引用并影响50行之上的同一个参数,您会觉得困扰吗?


现在你必须回溯一下,才能明白会发生什么。


如果从前面的例子中再看一眼FrogBuilder构造函数,就能够简化构造器,使代码变得不混乱且自然。


四、缺少控制

图源:Unsplash

最重要的一项是从执行工作的更多控制中感受到好处。


在没有建造者示例的时候,通过构造器中可以编写更多的代码,但尝试在其中驻留的代码越多,可读性就越低,这会使代码不清楚。


由于我们可以将细节隔离到各自的功能块中,因此我们在许多方面有了更好的控制。


一种方法是,可以在不添加更多问题的情况下添加验证,从而使构建阶段更加坚实:


setHeart(heart) {

if (typeof heart !=='object') {

thrownewError('heart is not an object')

}

if (!('rate'in heart)) {

thrownewError('rate in heart is undefined')

}

// Assume the caller wants to pass in a callback to receive the current frog's weight and height that he or she has set

// previously so they can calculate the heart object on the fly. Useful for loops of collections

if (typeof heart ==='function') {

this.heart =heart({

weight:this.weight,

height:this.height

})

} else {

this.heart = heart

}

returnthis

}

validate() {

constrequiredFields= ['name', 'gender', 'eyes', 'legs', 'scent', 'tongue', 'heart']

for (let index =0; index < requiredFields.length; index++) {

constfield= requiredFields[index]

// Immediately return false since we are missing a parameter

if (!(field inthis)) {

returnfalse

}

}

returntrue

}

build() {

constisValid=this.validate(this)

if (isValid) {

returnnewFrog(

this.name,

this.gender,

this.eyes,

this.legs,

this.scent,

this.tongue,

this.heart,

this.weight,

this.height,

)

} else {

// just going to log to console

console.error('Parameters are invalid')

}

}

setHeart.js hosted with ❤ by GitHub

从这个例子可以看出,构建器的每一部分都是在添加验证或验证方法后独立的,以确保在最终构建Frog之前设置好了所有的必需字段。


还可以利用这些开放的机会添加更多自定义输入数据类型,以构建参数的原始返回值。


例如,添加更多自定义的使用“眼睛”传递信息的方式,从而简化整个过程:


formatEyesCorrectly(eyes) {

// Assume the caller wants to pass in an array where the first index is the left

// eye, and the 2nd is the right

if (Array.isArray(eyes)) {

return {

left: eye[0],

right: eye[1]

}

}

// Assume that the caller wants to use a number to indicate that both eyes have the exact same volume

if (typeof eyes ==='number') {

return {

left: { volume: eyes },

right: { volume: eyes },

}

}

// Assume that the caller might be unsure of what to set the eyes at this current moment, so he expects

// the current instance as arguments to their callback handler so they can calculate the eyes by themselves

if (typeof eyes ==='function') {

returneyes(this)

}

// Assume the caller is passing in the directly formatted object if the code gets here

return eyes

}

setEyes(eyes) {

this.eyes =this.formatEyes(eyes)

returnthis

}

FrogBuilder.js hosted with ❤ by GitHub

这样一来,对于来电者来说,输入什么样的数据类型就变得更灵活:


// variation 1 (left eye = index 1, right eye = index 2)

larry.setEyes([{ volume:1 }, { volume:1.2 }])

// variation 2 (left eye + right eye = same values)

larry.setEyes(1.1)

// variation 3 (the caller calls the shots on calculating the left and right eyes)

larry.setEyes(function(instance) {

let leftEye, rightEye

let weight, height

if ('weight'in instance) {

weight = instance.weight

}

if ('height'in instance) {

height = instance.height

}

if (weight >10) {

// It's a fat frog. Their eyes are probably humongous!

leftEye = { volume:5 }

rightEye = { volume:5 }

} else {

constvolume= someApi.getVolume(weight, height)

leftEye = { volume }

// Assuming that female frogs have shorter right eyes for some odd reason

rightEye = { volume: instance.gender ==='female'?0.8:1 }

}

return {

left: leftEye,

right: rightEye,

}

})

// variation 4 (caller decides to use the formatted object directly)

larry.setEyes({

left: { volume:1.5 },

right: { volume:1.51 },

})

larry.js hosted with ❤ by GitHub

以上就是全部内容啦~如果大家还有什么问题,欢迎在评论区畅所欲言哟~

留言点赞关注

我们一起分享AI学习与发展的干货

如转载,请后台留言,遵守转载规范

推荐阅读:魅族hifi

相关阅读

怀化热线版权与免责声明:

一、凡本站中注明“来源:怀化热线”的所有文字、图片和音视频,版权均属怀化热线所有,转载时必须注明“来源:怀化热线”,并附上原文链接。

二、凡来源非怀化热线的(作品)只代表本网传播该消息,并不代表赞同其观点。

如因作品内容、版权和其它问题需要同本网联系的,请在见网后30日内进行联系。