c专家编程/c陷阱

by Dmitri Grabov

德米特里·格拉波夫(Dmitri Grabov)

如何避免常见的初学者陷阱并像专家一样开始编码 (How to avoid common beginner pitfalls and start coding like a pro)

Learning to code is tough. We’ve all encountered cryptic errors and code breaking for no obvious reason. Sadly, this experience is part of learning to code. There are a few steps you can take to improve your code quality and prevent common bugs.

学习编码很难。 没有明显的原因，我们所有人都遇到过密码错误和代码中断。 可悲的是，这种经验是学习编码的一部分。 您可以采取一些步骤来提高代码质量并防止常见错误。

避免复制粘贴代码 (Avoid copy pasting code)

A lot of the learning you will do as a beginner will come from repetition. It’s not exactly glamorous, but by the time you’ve written a for loop for the 100th time, you’ll be doing it almost without thinking.

初学者将要学习的很多东西都来自重复。 它并不完全迷人，但是当您第100次编写for循环时，您几乎会在不考虑的情况下进行操作。

You will often be tempted to copy and paste code to save yourself the hassle of typing it out. You should avoid it at all cost. There might be a subtle difference between the code you want to write and what you are copying. This could introduce a subtle bug that could be tricky to track down.

您经常会被诱惑去复制和粘贴代码，以免自己键入代码。 您应该不惜一切代价避免它。 您要编写的代码和要复制的代码之间可能会有细微的差别。 这可能会引入一个细微的错误，可能很难跟踪。

When you copy code, you bypass the cognitive process entirely.

复制代码时，您将完全绕开认知过程。

Make sure you understand the code you write as much as you can. When you copy code, you bypass the cognitive process entirely. Even if the code you copied does work as intended, you have not learned much from pasting it. Each time you type your code in full, you become that much more familiar and comfortable with it.

确保您尽可能了解自己编写的代码。 复制代码时，您将完全绕开认知过程。 即使您复制的代码按预期工作，但从粘贴中学到的知识并不多。 每次完全键入代码时，您就会变得更加熟悉和自如。

明智的名字 (Sensible names)

There are only two hard things in Computer Science: cache invalidation and naming things.

在计算机科学中只有两件难事：缓存无效和命名。

— Phil Karlton

—菲尔·卡尔顿

Use nouns for variable and property names. Make them as descriptive as possible.

使用名词表示变量和属性名称。 使它们尽可能具有描述性。

Always use full words and avoid abbreviations. Different people can interpret abbreviations in different ways. This could make it more difficult to understand what the code does. For example, intlSize could mean either internationalSize or internalSize. The important clue in a name is lost because of the abbreviation.

始终使用完整的单词，并避免使用缩写。 不同的人可以用不同的方式解释缩写。 这会使理解代码的作用变得更加困难。 例如， intlSize可能表示internationalSize或internalSize 。 名称的重要线索由于缩写而丢失。

When referring to the same thing across your code base, use the same name. For example, avoid referring to doorColour as colourOfDoor or doorColor in other places. This will save you bugs caused by using wrong variable names. Also, the consistency will save you time looking up the exact variable name each time.

在代码库中引用相同的内容时，请使用相同的名称。 例如，避免在其他地方将doorColour称为colourOfDoor或doorColor 。 这样可以避免因使用错误的变量名而导致的错误。 同样，一致性将节省您每次查找确切的变量名称的时间。

Avoid generic, non-descriptive names like data or process. They could mean anything and do not provide much information about their purpose.

避免使用通用的非描述性名称，例如data或process 。 它们可能有任何含义，并且不会提供太多有关其目的的信息。

一致的缩进 (Consistent indentation)

Consistent code indentation makes it easier to spot potential bugs. This is what professional developers do without thinking. Very few of them talk about it because it is so obvious to them. Yet, few tutorials stress the importance of using consistent indentation.

一致的代码缩进使发现潜在错误更加容易。 这是专业开发人员无需考虑的事情。 他们中很少有人谈论它，因为它对他们是如此明显。 但是，很少有教程强调使用一致的缩进的重要性。

In the examples below, we indent using tabs, however spaces are also acceptable. The key is to pick which one you want to use and apply it consistently. Do not mix tabs and spaces in your code.

在下面的示例中，我们缩进使用制表符，但是空格也是可以接受的。 关键是选择要使用的对象并一致地应用它。 不要在代码中混用制表符和空格。

So what does correct indentation look like? Each time you insert an HMTL tag inside another, add a new line and tab in front of the new tag to indent. When you close an HTML tag, add a new line and remove a tab from your indentation.

那么正确的缩进是什么样的呢？ 每次将HMTL标签插入另一个标签时，请在新标签前面添加新行和制表符以缩进。 关闭HTML标记时，请添加新行并从缩进中删除选项卡。

Here the inner tag is the img tag. See how it is indented one tab? Also, note how the left edge of the closing div tag lines up with the left edge of its opening tag.

这里的内部标签是img标签。 看到它如何缩进一个标签？ 另外，请注意div结束标记的左边缘如何与其开始标记的左边缘对齐。

This approach becomes super important when you have hundreds of tags on a page. If you have followed the process correctly, your final closing tag should flush with the left hand-side of your page. This makes a convenient check for code correctness.

当页面上有数百个标签时，此方法变得非常重要。 如果您正确地遵循了该过程，则最后的结束标记应与页面的左侧齐平。 这样可以方便地检查代码的正确性。

Let’s see how we can use indentation to spot missing tags.

让我们看看如何使用缩进来发现丢失的标签。

See how in the example above the closing div tag on line 14 does not line up with the opening div tag on line 1? That is a clue that something is missing. In this case, we missed the closing ul tag. Once we add it, the closing divfalls in line with its opening partner

在上面的示例中，第14行的div结束div如何与第1行的div ？ 这是缺少某些东西的线索。 在这种情况下，我们错过了结束ul标签。 添加后，结束div与其开始合作伙伴一致

A similar method should be applied when writing JavaScript. We do not have tags in JavaScript, but we do have “braces” or “curly brackets”. They look like this {}. Each opening brace must have a matching closing brace. They are used to denote blocks of code. Each opening brace should be followed by a new line and a tab to indent the content. The closing brace should line up on the left hand side with the left hand side of the line of its corresponding opening brace.

编写JavaScript时应采用类似的方法。 我们在JavaScript中没有标签，但确实有“花括号”或“花括号”。 它们看起来像这样{} 。 每个打开支架必须有一个匹配的关闭支架。 它们用于表示代码块。 每个大括号后面应有一个新行和一个用于缩进内容的标签。 闭合支架应在左侧与其对应的打开支架的线的左侧对齐。

See how the brace on line 11 is aligned with the left hand side of line 1 where its opening brace is. Similarly, line 4 aligns with line 8 and line 5 aligns with line 7.

查看11号线的撑杆如何与1号线的左撑杆所在的位置对齐。 同样，第4行与第8行对齐，第5行与第7行对齐。

When applied correctly, indentation should give your code a clean, pyramid-like structure. This will make it much easier to spot where each block of code ends and begins. Also, missing braces will now be much easier to spot than if they were scattered all over the page.

正确应用缩进后，缩进应使您的代码具有干净的金字塔形结构。 这将使发现每个代码块的结束和开始位置更加容易。 而且，现在，丢失的括号比散布在整个页面上的要容易得多。

注意语法高亮 (Pay attention to syntax highlighting)

A modern text editor, such as Sublime or Visual Studio Code, will highlight your code.

现代文本编辑器(例如Sublime或Visual Studio Code)将突出显示您的代码。

See how the braces, tag name, attribute name, and attribute value are each highlighted with the same color?

看看花括号，标签名称，属性名称和属性值如何分别用相同的颜色突出显示？

Now take a look at the code below.

现在看下面的代码。

See how the nice, consistent highlighting has suddenly shifted? Orange text, which is used to denote attribute value, has spilled over the next few lines. That is a massive clue that something has gone wrong in our code. In this example, it is because we have missed the closing quote marks on the hrefattribute value. Spotting an error like that without code highlighting would be very difficult and time consuming.

看到漂亮的，一致的突出显示突然改变了吗？ 用于表示属性值的橙色文本溢出了接下来的几行。 这是一个巨大的线索，表明我们的代码出了点问题。 在此示例中，这是因为我们错过了href属性值上的href引号。 在没有突出显示代码的情况下发现类似的错误将非常困难且耗时。

Developers can easily waste days trying to hunt down a subtle error like that. Pay attention to code highlighting to help you spot bugs like this.

开发人员可以轻松地浪费几天的时间来寻找这样的细微错误。 请注意突出显示代码，以帮助您发现此类错误。

成功将自负 (Success will take care of itself)

Being a good developer is the sum of attention to detail and dozens of habits.

成为优秀的开发人员是对细节和数十种习惯的关注之和。

By paying attention to small things like indentation, you will develop an appreciation for structure and scope. Thinking carefully about function and variable names will help you understand their purpose and how to best accomplish it. Syntax highlighting will help you spot and fix a typo before it becomes a bug. Typing all code out in full is the first step to developing familiarity with syntax, which in turn will lead to an understanding of how code behaves.

通过关注缩进之类的小事情，您将对结构和范围有所了解。 仔细考虑函数和变量名将有助于您理解它们的目的以及如何最好地实现它。 语法高亮将帮助您发现并纠正错字，避免它成为错误。 全面输入所有代码是发展对语法的熟悉度的第一步，而这反过来又可以帮助您理解代码的行为方式。

All these small details which at first seem insignificant will, with practice, form the foundation of your expertise. Pay attention to getting those details right, and success will take care of itself.

乍一看，所有这些细微的细节在实践中都将成为您专业知识的基础。 注意正确处理这些细节，成功将自负。

Dmitri Grabov is the founder of Constructor Labs who run a 12 week, JavaScript web development bootcamp in London. Next class starts on 29th May and fees are £3,000. Applications are open now and places will be allocated on a first come, first served basis.

Dmitri Grabov是Constructor Labs的创始人，他在伦敦进行了为期12周JavaScript Web开发训练营。 下一堂课将于5月29日开始，费用为3,000英镑。 申请现已开放 ，名额将按照先到先得的原则分配。

翻译自: https://www.freecodecamp.org/news/how-to-avoid-common-beginner-pitfalls-and-start-coding-like-a-pro-3de81c6affbe/

c专家编程/c陷阱