这个话题是关于什么的？ (What is this topic about?)

If you are from a javascript background you might have heard the terms callback hell or async/await hell. It looks something like this:

如果您来自javascript背景，则可能已经听说过术语callback hell或async/await hell 。 看起来像这样：

There is a similar situation with just using if/else as well. You might label this as developers being obsessive, or ignore it by thinking that this is kind of okay in some situations.

仅使用if/else也存在类似情况。 您可以将其标记为开发人员沉迷，或通过认为在某些情况下还可以忽略它。

I beg to differ. As the saying goes…just pretend that whoever maintains your code next knows where you work and can come yell at you.

我不敢苟同。 俗话说……假装接下来维护您代码的人都知道您在哪里工作，并且可以大吼大叫。

For the purpose of this article, I’ll demonstrate an example using ReactJS. The principle itself can be applied in Javascript or any language for that matter.

出于本文的目的，我将演示一个使用ReactJS的示例。 原则本身可以用Java或任何语言应用。

Before we begin, the <MyButton /> example may not be the best example to explain the if/else nested problem. But hopefully it’ll give you a good guideline as to what the problem is & how to avoid it.

在开始之前 ， <MyButton />示例可能不是解释if / else嵌套问题的最佳示例。 但希望它会为您提供有关问题的根源以及如何避免的良好指导。

Let’s paint a picture. You are given a button to implement in React & the button has 2 options for a theme, either default or primary. You think it’s simple & you write your <MyButton /> component:

让我们画一幅画。 您将获得一个在React实现的按钮，该按钮有2个主题选项，即default或primary 。 您认为这很简单，并编写了<MyButton />组件：

Some time passes & another developer is given a task to add functionality for round corners for the button for both themes, default & primary. The developer who picks up the tasks is very big on using ternary operators. They end up doing something like below:

一段时间过后，另一个开发人员被赋予一项任务，即为两个主题(默认主题和主要主题)的按钮添加圆角功能。 承担任务的开发人员在使用三元运算符方面非常重要。 他们最终会执行以下操作：

Time passes & another developer is given a task to add a hover state for both the default & primary buttons. Now the other developer does not want to make changes in the already code implemented, fearing they might end up breaking something.

时间过去了，另一个开发人员被赋予了为default按钮和primary按钮添加hover状态的任务。 现在，另一个开发人员不想更改已经实施的代码，因为担心它们可能最终会破坏某些内容。

So they write a separate if statement:

因此，他们编写了一个单独的if语句：

So far so good …

到目前为止，一切都很好 …

这是有趣的地方 (This is where it gets interesting)

Moving on, a final requirement comes in months later to add an animation when the user hovers over a button which has a primary theme & is of rounded type.

继续前进，几个月后，当用户将鼠标悬停在具有主要主题且为圆形的按钮上时，最终要求添加动画。

Now based on this requirement, the entire API structure changes the <MyButton/> component. The developer working on the code ends up with logic like this:

现在，基于此要求，整个API结构将更改<MyButto n />组件。 开发代码的开发人员最终会遇到如下逻辑：

That got out of hand way too quickly …. didn’t it?

那太不可收拾了……。 不是吗

In order to make this code simpler, we need to understand all the possible states that this code has. I have made a possibility chart of all the possible combinations at a certain time for the button.

为了简化此代码，我们需要了解该代码具有的所有可能状态。 我在某个时间为按钮制作了所有可能组合的可能性图。

If this seems a bit complicated, you can try looking at this next chart for your understanding.

如果这看起来有些复杂，您可以尝试查看下一张图表以了解您的情况。

The key thing when writing code is understanding the data flow of your code. Once you have a complete understanding of it, everything becomes simpler.

编写代码时的关键是理解代码的数据流。 一旦完全了解它，一切都会变得简单。

解 (Solution)

Based on the above given criteria, I can write my code like this to simplify it.

基于以上给出的条件，我可以像这样编写代码以简化代码。

This code is now way more readable. Any developer who works on this code can easily extend its functionality & get on with their life, knowing that they have done a wonderful job with the code.

现在，此代码更具可读性。 任何从事此代码工作的开发人员都可以轻松地扩展其功能并继续他们的生活，因为他们知道自己在代码方面做得很出色。

You can try playing with the code if you want, to see if it matches all the use cases.

您可以根据需要尝试使用该代码，以查看其是否与所有用例匹配。

With the automata (finite state machines)-like coding approach:

使用类似于自动机(有限状态机)的编码方法：

• Code is more readable now现在代码更易读
• Code is more maintainable代码更易于维护

Feel free to share your thoughts. Thank you for reading.

随时分享您的想法。 感谢您的阅读。

You can also reach me out on twitter @adeelibr

您也可以通过Twitter @adeelibr与我联系

Reference & Inspiration: Stack Exchange Forum

参考与启示： 堆栈交换论坛

翻译自: https://www.freecodecamp.org/news/so-youre-in-if-else-hell-here-s-how-to-get-out-of-it-fc6407fec0e/