重构javascript_javascript重构初学者指南

重构javascript

When you’re first starting out in your coding journey, building a web page/application seems so far out of reach. When you finally feel ready to create you very first app, your main priority is just getting the darn thing to work. You slab functions wherever they seem like they fit and your naming conventions are probably not that descriptive. But at the end of it all…it works!

当您第一次开始编码之旅时，构建网页/应用程序似乎遥不可及。 当您终于准备好创建自己的第一个应用程序时，您的主要任务就是使该死的东西正常工作。 您可以在看起来合适的任何地方扩展函数，并且您的命名约定可能没有那么多描述性。 但是到最后，一切都开始了！

After finishing your victory lap, it’s important to make it a habit to walk around that lap again but this time, taking a good look at everything. What does your code look like? How long are your functions? Is there any repeated code? These are good questions to ask to start the process of refactoring.

完成胜利一圈后，重要的是要养成再次在那一圈走动的习惯，但是这次，要好好看一下一切。 您的代码是什么样的？ 您的功能需要多长时间？ 是否有重复的代码？ 这些是启动重构过程要问的好问题。

Refactoring

重构

Refactoring is the act of dismantling and re-assembling your code in an effort to make it more readable and functional. Some rules to follow when deciding if a function needs to be refactored are:

重构是为了使代码更具可读性和功能性而拆除和重新组装代码的行为。 在确定是否需要重构功能时应遵循的一些规则是：

1. Is this function over 5 lines long?

1.此功能是否超过5行？

2. Does this function do more than one thing?

2.此功能不只做一件事吗？

3. Does the name of this function poorly describe the purpose of it? Another way to ask this is if someone else was reviewing my code, would they have trouble knowing what the function should do based on the name alone?

3.此功能的名称是否不能很好地描述其目的？ 提出这种问题的另一种方式是，如果其他人正在查看我的代码，他们是否会很难知道仅基于名称应该执行的功能？

4. Is there anything within my code that I did twice?

4.我的代码中有没有做过两次的事情？

If the answer for any of these questions is “yes”, it’s time to refactor your code!

如果对这些问题中的任何一个的回答为“是”，那么就该重构代码了！

Functions more than 5 lines long & completing more than one task

功能超过5行，并完成多项任务

If your function is more than 5–7 lines long, find ways to break it up into multiple functions.

如果您的函数长度超过5–7行，请找到将其分解为多个函数的方法。

The function above is a typical example of being too long. Refactored it could look like:

上面的函数是一个太长的典型示例。 重构后的样子：

Now that there are two different functions, the code is much more readable. Within the

现在有两个不同的功能，代码更具可读性。 内

showTotalExpenses

function, there is everything that appeared after line 200 of the original function. By calling it at the end of

函数，原始函数的第200行之后出现了所有内容。 通过在末尾调用

sumExpenses(user)

Javascript will run that code immediately after line 200, meaning nothing was truly changed by splitting the two up. It just looks and reads much better!

Javascript将在第200行之后立即运行该代码，这意味着通过将两者分开，并没有真正改变任何东西。 它看起来和阅读都更好！

If you look closely in the original code you can also see that the first half of the function is working to add up all the expenses while the second half is working to append the result onto the page. Because there are two different goals being fulfilled, it’s better to break them up (even if the function was less than 5 lines long).

如果仔细查看原始代码，您还可以看到该函数的前半部分正在将所有费用加起来，而后半部分正在将结果追加到页面上。 因为要实现两个不同的目标，所以最好将它们分解(即使该函数的长度少于5行)。

Is your function adequately named?

您的函数是否正确命名？

Above, we see a function named

上方，我们看到了一个名为

clearExpenses

However, if we really look at it, we can see that the function doesn’t actually clear anything. What it really does is provide a “Clear Expenses” option for users on the front end. Therefore, it would be better if our function looked like:

但是，如果我们真的看一下，我们可以看到该函数实际上并没有清除任何内容。 它真正的作用是为前端用户提供“清除费用”选项。 因此，如果我们的函数看起来像这样会更好：

With this, we named our function

以此命名函数

clearExpensesOption

then called a function named

然后调用了一个名为

clearExpensesEvent

at the end which will deal with the actual clearing of expenses itself.

最后将处理费用本身的实际清算。

Is there anything within the file that I did twice?

文件中是否有我做过两次的事情？

If the answer to this is yes, consider creating a function / variable and calling it whenever it is needed, rather than writing the same code / string multiple times.

如果答案是肯定的，请考虑创建一个函数/变量并在需要时调用它，而不是多次编写相同的代码/字符串。

Finishing Thoughts

整理思路

By doing all of these things, you not only help people who will be looking/working with your code, but your future self. You will now know what each piece of code will entail before even looking through it because your functions are better broken down and named.

通过做所有这些事情，您不仅可以帮助正在寻找/使用您的代码的人，还可以帮助您将来的自己。 现在，您甚至在浏览它们之前都将知道每段代码将要包含的内容，因为可以更好地分解和命名函数。

翻译自: https://medium.com/analytics-vidhya/beginners-guide-to-refactoring-in-javascript-15497920d102

重构javascript