像程序员一样思考_如何像程序员一样思考

像程序员一样思考

by Zell Liew

由Zell Liew

如何像程序员一样思考 (How to think like a programmer)

“I don’t get JavaScript. I can’t make components from scratch. My mind goes blank when I stare at a blank JavaScript file. I guess I can’t do it because I don’t know how to think like a programmer.”

“我没有JavaScript。 我不能从头开始制作组件。 当我凝视着一个空白JavaScript文件时，我的头脑变得一片空白。 我想我做不到，因为我不知道如何像程序员一样思考 。”

Sounds familiar? You’re not alone, my friend. Many people who try to pick up JavaScript as their first programming language face the same problem.

听起来很熟悉？ 你并不孤单，我的朋友。 许多尝试将JavaScript作为其第一门编程语言的人都面临着同样的问题。

Heck, even developers who are already coding in another language face the same issue with JavaScript, too. Instead of “I can’t think like a programmer,” they say “I can’t think in JavaScript.”

哎呀，即使已经使用另一种语言编写代码的开发人员也面临着JavaScript的相同问题。 他们说“我不能用JavaScript思考”，而不是“我不能像程序员一样思考”。

But no more. Let today be the day when you learn to think like a programmer.

但没有更多。 让今天成为您学会像程序员一样思考的日子。

您已经可以像程序员一样思考。 (You can already think like a programmer.)

Have you tried simple exercises about JavaScript on places like freeCodeCamp, Code Academy or Code Wars?

您是否在freeCodeCamp，Code Academy或Code Wars等地方尝试过有关JavaScript的简单练习？

If you have, you already know how to think like a programmer.

如果有的话，您已经知道如何像程序员一样思考。

The real reason your mind blanks out when you face your JavaScript file is likely because of coder’s block. You’re scared to write JavaScript that doesn’t work. You’re scared to face the errors. You don’t know how to begin.

当您面对JavaScript文件时，头脑空白的真正原因可能是由于编码器的阻塞 。 您害怕编写不起作用JavaScript。 您害怕面对错误。 您不知道如何开始。

Overcoming coder’s block is simple. You can follow these four steps:

克服编码器块很简单。 您可以按照以下四个步骤操作：

1. Break down the problem into smaller problems
   将问题分解为较小的问题
2. Find solutions to your smaller problems
   寻找解决您较小问题的方法
3. Assemble the solutions in a coherent manner
   以一致的方式组装解决方案
4. Refactor and improve
   重构和改善

Let’s take a closer look at each of these steps.

让我们仔细看看每个步骤。

步骤1：将问题分解为较小的问题。 (Step 1: Break down the problem into smaller problems.)

How do you put an elephant into the fridge?

您如何将大象放入冰箱？

Here’s what most people would answer:

这是大多数人会回答的问题：

1. Open the fridge
   打开冰箱
2. Put the elephant in
   把大象放进去
3. Close the fridge
   关上冰箱

Problem solved.

问题解决了。

This answer is the best example of why you get stuck when you face a blank JavaScript file. It skips steps.

这个答案是当您面对空白JavaScript文件时为什么会卡住的最佳示例。 它跳过步骤 。

If you think logically about the question, you’ll see a few glaring problems that remains unanswered:

如果您对问题进行逻辑思考，则会看到一些尚未解决的明显问题：

1. What fridge are we talking about?
   我们在说什么冰箱？
2. What kind of elephant are we talking about?
   我们在说哪种大象？
3. If the elephant is too huge to fit into the fridge, what do you do?
   如果大象太大而无法放入冰箱，该怎么办？
4. Where do you find the elephant in the first place?
   您首先在哪里找到大象？
5. How do you transport the elephant to your fridge?
   您如何将大象运输到冰箱？

When you code, you need to answer every small question you can think of. That’s why the first step is to break your problem into smaller pieces.

在编写代码时，您需要回答您能想到的每个小问题。 这就是为什么第一步是将您的问题分解成更小的部分。

步骤2：找到较小问题的解决方案。 (Step 2: Find solutions to your smaller problems.)

The second step is to find a solution to each of your smaller problems. Here, it’s important to be as detailed as possible.

第二步是为每个较小的问题找到解决方案。 在这里，尽可能详细是很重要的。

1. What fridge? — the fridge that sits in your kitchen
   什么冰箱？ —放在厨房的冰箱

2. What kind of elephant? — the african bush elephant

   什么样的大象？ — 非洲丛林象

3. What if the elephant is too big? — Get a shrink gun (?) to shrink the elephant (?).
   如果大象太大，该怎么办？ —用收缩枪(？)收缩大象(？)。
4. Where do you find the elephant? — Africa
   您在哪里找到大象？ —非洲
5. How do you transport the elephant? — Put it in your bag after you’ve shrunk it, then take a plane back home.
   您如何运输大象？ —收缩后将其放入包中，然后乘飞机回家。

Sometimes, you need to dig a few layers in to get the answer you need. In the example above, we can dig deeper into answers 3 and 4.

有时，您需要深入了解以获得所需的答案。 在上面的示例中，我们可以更深入地研究答案3和4。

1. Where do you get the shrink gun? — Borrow from the mad scientist next door.
   哪里有收缩枪？ —从隔壁的疯狂科学家那里借来的。
2. Where in Africa can you find your elephant? — Addo Elephant Park in South Africa.
   在非洲哪里可以找到您的大象？ —南非的阿多大象公园。

Once you have answers to all your smaller problems, you piece them together to solve your big problem.

一旦对所有较小的问题有了答案，就可以将它们拼凑起来以解决大问题。

步骤3：以连贯的方式组装解决方案。 (Step 3: Assemble the solutions in a coherent manner.)

So, in the put-elephant-in-fridge example, you can probably follow the following steps:

因此，在放入冰箱的示例中，您可能可以按照以下步骤操作：

1. Get a shrink gun from the scientist next door
   从隔壁的科学家那里获得收缩枪
2. Fly to South Africa
   飞往南非
3. Travel to Addo Elephant Park
   前往阿多大象公园
4. Find an elephant in the park
   在公园里找到大象
5. Shoot the elephant with the shrink gun
   用收缩枪射击大象
6. Put the shrunk elephant in your bag
   将缩小的大象放进书包
7. Travel back to the airport
   返回机场
8. Fly back to your country
   飞回您的国家
9. Travel to your house
   到你家去
10. Put the elephant in your fridge
    将大象放入冰箱

Problem solved.

问题解决了。

As interesting at is sounds, you most probably wouldn’t be capturing elephants and putting them into fridges with JavaScript.

声音很有趣，您很可能不会捕捉大象并将它们放入带有JavaScript的冰箱中。

让我们用一个真实的例子。 (Let’s use a real example.)

Let’s say you want to a create button that, when clicked, shows you a sidebar.

假设您要创建一个创建按钮，该按钮在单击时会显示一个侧边栏。

第一步-分解 (The first step — break it down)

Break down the component into smaller pieces. Here are a few problems you may identify:

将组件分成较小的部分。 您可能会发现以下几个问题：

1. What is the markup of this button?
   此按钮的标记是什么？
2. How should the button look?
   按钮的外观如何？
3. What happens when the button gets clicked once?
   单击一次按钮后会发生什么？
4. What happens when the button gets clicked again?
   再次单击该按钮会发生什么？
5. What happens when the button gets clicked a third time?
   第三次单击该按钮时会发生什么？
6. What is the markup of this sidebar?
   此侧边栏的标记是什么？
7. How does the sidebar look when it is shown?
   边栏显示时的外观如何？
8. How does the sidebar look when it is hidden?
   边栏隐藏时的外观如何？
9. How does the sidebar show up?
   侧边栏如何显示？
10. How does the sidebar go away?
    边栏如何消失？
11. Should the sidebar show up when the page loads?
    页面加载时是否应显示侧栏？

第二步-为问题创建解决方案 (The second step — create solutions for problems)

To create solutions, you need to have knowledge about the medium you’re creating for. In our case, you need to know sufficient HTML, CSS and JavaScript.

要创建解决方案，您需要具有有关要创建的介质的知识。 在我们的情况下，您需要了解足够HTML，CSS和JavaScript。

Don’t worry if you don’t know the answer to any of these questions. If you’ve broken them down sufficiently, you should be able to find an answer through Google in five minutes.

如果您不知道这些问题的答案，请不要担心。 如果您已经对它们进行了充分分解，那么您应该可以在五分钟内通过Google找到答案。

Let’s answer each of the questions:

让我们回答每个问题：

What is the markup of this button?

此按钮的标记是什么？

The markup is an <;a> tag with a class of .button.

标记是< ; a>标记，其类别ss of . 按钮。

<a href="#" class="button">Click me</a>

How should this button look?

此按钮应如何显示？

This button should have the following CSS:

此按钮应具有以下CSS：

.btn {  display: inline-block;  font-size: 2em;  padding: 0.75em 1em;  background-color: #1ce;  color: #fff;  text-transform: uppercase;  text-decoration: none;}

What happens when the button gets clicked once? Twice? Three times?

单击一次按钮后会发生什么？ 两次？ 三次？

The sidebar should show up when the button is clicked once. This sidebar then goes away when the button is clicked another time. It shows up again when the button is clicked again.

单击一次按钮后，侧栏将显示。 当再次单击该按钮时，该边栏消失。 再次单击该按钮时，它将再次显示。

What is the markup of this sidebar?

此侧边栏的标记是什么？

The sidebar should be a <div> that contains a list of links:

边栏应为<d iv>，其中包含链接列表：

<div class="sidebar">  <ul>    <li><a href="#">Link 1</a></li>    <li><a href="#">Link 2</a></li>    <li><a href="#">Link 3</a></li>    <li><a href="#">Link 4</a></li>    <li><a href="#">Link 5</a></li>  </ul></div>

How does the sidebar look when it is shown?

边栏显示时的外观如何？

The sidebar should be placed at the right of the window. It needs to be fixed in place so the user sees it. It should be 300px wide.

侧栏应放置在窗口的右侧。 需要将其固定在适当的位置，以便用户看到它。 它应该是300px宽。

When you finish solving the problem, you may end up with CSS that looks similar to the following:

解决问题后，您可能会得到类似于以下内容CSS：

.sidebar {  position: fixed;  top: 0;  bottom: 0;  right: 0;  width: 300px;  background-color: #333;}.sidebar ul {  margin: 0;  padding: 0;}.sidebar li {  list-style: none;}.sidebar li + li {  border-top: 1px solid white;}.sidebar a {  display: block;  padding: 1em 1.5em;  color: #fff;  text-decoration: none;}

How does the sidebar look when it is hidden?

边栏隐藏时的外观如何？

The sidebar should be shifted 300px to the right, so it is off the screen.

边栏应向右移动300px，因此不在屏幕上。

When you answer this question, another two may pop into your mind:

当您回答此问题时，您可能会想到另外两个：

1. How do you know whether the sidebar is shown or hidden?
   您如何知道侧边栏是显示还是隐藏？
2. How do you style the hidden sidebar?
   您如何设置隐藏侧边栏的样式？

Let’s answer them as well.

让我们也回答他们。

How do you know whether the sidebar is shown or hidden?

您如何知道侧边栏是显示还是隐藏？

If the sidebar has a .is-hidden class, the sidebar should be hidden from view. Otherwise, it should be visible.

如果侧边栏具有.is-hidden类，则应从视图中隐藏侧边栏。 否则，它应该是可见的。

How do you style the hidden sidebar?

您如何设置隐藏侧边栏的样式？

We use translateX to shift the sidebar 300px to the right since transform is one of the better properties for animation. Your styles then becomes:

由于transform是动画的更好属性之一，因此我们可以使用translateX将侧边栏向右移动300px。 您的样式将变为：

.sidebar.is-hidden {  transform: translateX(300px);}

How does the sidebar show up?

侧边栏如何显示？

The sidebar cannot appear immediately. It needs to move from the right, where it’s hidden from view, to the left, where it’s visible.

侧栏不能立即显示。 它需要从右侧(在视图中隐藏)移动到左侧(在此处可见)。

If you know your CSS, you’ll be able to use the transition property. If you don’t, you’ll be able to find your answer through Google.

如果您知道CSS，就可以使用transition属性。 如果您不这样做，则可以通过Google找到答案。

.sidebar {  /* other properties */  transition: transform 0.3s ease-out;}

How does the sidebar disappear?

边栏如何消失？

It should disappear the same way it appears, in the opposite direction. With this, you don’t have to write any additional CSS code.

它应以与出现时相同的方式在相反的方向上消失。 这样，您不必编写任何其他CSS代码。

Should the sidebar show up when the page loads?

页面加载时是否应显示侧栏？

Nope. Given what we have, we can add a is-hidden class in the sidebar markup and the sidebar should remain hidden.

不。 有了我们已有的功能，我们可以在边栏标记中添加一个is-hidden类，并且边栏应保持隐藏状态。

<div class="sidebar is-hidden">  <!-- links --></div>

Now, we’ve answered almost everything, except one — what happens when the button gets clicked once? Twice? Three times?

现在，我们已经回答了几乎所有内容，除了一个以外-单击一次按钮会发生什么？ 两次？ 三次？

Our answer above was too vague. We know the sidebar should appear when you click on it, but how? The sidebar should disappear when you click on it again, but how?

我们上面的答案太含糊。 我们知道边栏应在您单击时出现，但是如何？ 再次单击侧边栏时，该侧边栏应会消失，但是如何？

At this point, we can answer this question again in more detail. But before that, how do know when you clicked on a button?

此时，我们可以再次更详细地回答这个问题。 但是在此之前，如何知道您何时单击按钮？

How to know when you click on a button.

如何知道何时单击按钮 。

If you know your JavaScript, you know you can add an event listener to the button and listen for a click event. If you don’t know, you’ll be able to Google it.

如果您了解JavaScript，就可以将事件侦听器添加到按钮并侦听click事件。 如果您不知道，可以使用Google。

Before you add an event listener, you need to find the button from the markup with querySelector.

在添加事件侦听器之前，需要使用querySelector从标记中找到按钮。

const button = document.querySelector('.btn')button.addEventListener('click', function() {  console.log('button is clicked!')})

What happens when the button is clicked once?

单击一次按钮会怎样？

When the button is clicked once, we should remove the is-hidden class so the button shows up. To remove a class in JavaScript, we use Element.classList.remove. This means we need to select the sidebar first.

单击一次按钮后，我们应该删除is-hidden类，以便显示按钮。 要删除JavaScript中的类，我们使用Element.classList.remove 。 这意味着我们需要先选择侧边栏。

const button = document.querySelector('.btn')const sidebar = document.querySelector('.sidebar')button.addEventListener('click', function() {  sidebar.classList.remove('is-hidden')})

What happens when the button is clicked twice?

两次单击该按钮会发生什么？

When the button is clicked again, we should add the is-hidden class back to the sidebar so it disappears.

再次单击该按钮时，我们应将is-hidden类添加回侧边栏，使其消失。

Unfortunately, we can’t detect how many times a button is clicked with an event listener. The best way, then, is to check if the class is-hidden is present on the sidebar already. If it is, we remove it. If it’s not, we add it.

不幸的是，我们无法检测到事件监听器单击按钮的次数。 那么，最好的方法是检查侧边栏是否已经存在该is-hidden类。 如果是这样，我们将其删除。 如果不是，我们添加它。

const button = document.querySelector('.btn')const sidebar = document.querySelector('.sidebar')button.addEventListener('click', function() {  if (sidebar.classList.contains('is-hidden')) {    sidebar.classList.remove('is-hidden')  } else {    sidebar.classList.add('is-hidden')  }})

And with this, you have a initial prototype of the component.

这样，您便有了该组件的初始原型。

https://codepen.io/zellwk/pen/zdqmLe/

https://codepen.io/zellwk/pen/zdqmLe/

第四步-重构和改进。 (The fourth step — refactor and improve.)

We incorporated the third step, assembling our solutions in a coherent manner, along the way. The final step is to refactor and improve your code. This step may not come naturally to you right now. It takes effort and practice before you can tell whether your code can be improved.

我们结合了第三步，在此过程中以一致的方式组装了解决方案。 最后一步是重构和改进您的代码。 您现在可能无法自然地迈出这一步。 在确定是否可以改进代码之前，需要付出很多努力和实践。

So, once you’re done with the three steps, take a break and work on something else. When you get better with JavaScript, you may notice you missed a few details when you come back.

因此，一旦完成了这三个步骤，就休息一下，然后进行其他工作。 当您对JavaScript有了更好的了解时，您可能会发现回来时错过了一些细节。

In this example above, you can ask a few more questions:

在上面的示例中，您可以问几个问题：

1. How do you make this sidebar component accessible to users who have visual disabilities?
   您如何使有视力障碍的用户可以访问此侧边栏组件？
2. How do you make this sidebar component easier to use for people with keyboards?
   您如何使带有工具栏的边栏组件更易于使用？
3. Can you improve the code in any way?
   您能以任何方式改进代码吗？

For the third point, if you googled a little further, you may notice there’s a toggle method that removes a class if it’s present. If the class isn’t present, the toggle method adds it for us:

第三点，如果您进一步搜索Google，您可能会注意到有一个toggle方法可以删除存在的类。 如果不存在该类，则toggle方法将为我们添加该类：

const button = document.querySelector('.btn')const sidebar = document.querySelector('.sidebar')button.addEventListener('click', function() {  sidebar.classList.toggle('is-hidden')})

结语 (Wrapping up)

Thinking like a programmer is simple. The key is to know how to break problems down into smaller ones.

像程序员一样思考很简单。 关键是要知道如何将问题分解为较小的问题。

When you’re done breaking the problem down, find solutions for your small problems and code them up. Along the way, you’ll discover more problems you didn’t think of before. Solve them too.

完成问题分解后，为小问题找到解决方案并编写代码。 在此过程中，您将发现更多以前从未想到的问题。 也解决它们。

By the time you’re done with writing your answers to each small problem, you’ll have the answer to your large problem. Sometimes, you may need to join up the steps you’ve written for your smaller problems as well.

当您完成对每个小问题的答案的编写时，您将获得大问题的答案。 有时，您可能还需要结合您为较小的问题编写的步骤。

Finally, the work isn’t done when you create your first solution. There’s always going to be room for improvement. However, you most likely won’t be able to see the improvements right now. Take a break, work on something else and come back later. You’ll be able to ask even better questions then.

最后，当您创建第一个解决方案时，该工作尚未完成。 总是会有改进的空间。 但是，您很可能现在无法看到改进。 稍事休息，做点其他事情，然后再回来。 然后，您将可以提出更好的问题。

By the way, do you want to learn JavaScript but don’t know how to start? If you are, try going through this JavaScript Roadmap that I’ve built for you. In it, you’ll learn how to overcome your barriers to learning JavaScript, and you’ll get a roadmap to follow to learn JavaScript properly. Have fun!

顺便说一句，您想学习JavaScript但不知道如何开始吗？ 如果您愿意，请尝试阅读我为您制作的这份JavaScript路线图 。 在其中，您将学习如何克服学习JavaScript的障碍，并且将获得遵循的路线图以正确学习JavaScript。 玩得开心！

(If you liked this article, I’d appreciate it if you would give me some claps and share it. ?) Thanks!

(如果您喜欢这篇文章，如果您能给我一些鼓掌并分享一下 ，我将不胜感激。)谢谢！

Originally published at https://zellwk.com/blog/think/.

最初发布在https://zellwk.com/blog/think/ 。

翻译自: https://www.freecodecamp.org/news/how-to-think-like-a-programmer-3ae955d414cd/

像程序员一样思考