How to think like a programmer

今天被提醒了一下，要有深度思考，安全第一，不是任务为主！ 确实，因为之前的一些工作经验，开发时，我都是已完成任务为主的，确实没有一个很好的开发思维，拿到需求，简单思考下，输出一个差不多能完成功能的设计文档，就激动的搓手手准备锤代码了...

之前看到过一篇文章，网上其他人也有翻译，我也试试吧。mac翻译大法好！

原文地址:https://zellwk.com/blog/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”.

我get不到JavaScript，我不能从一开始就整个组件出来。在我凝视一个空白的JavaScript文件的时候，我猜我做不到，因为我不知道怎么去像一个程序员去思考。

Sounds familiar? You’re not alone, my friend. Many people faced the same problem when they try to write JavaScript.

熟悉的声音？你不是一个人，好哥哥，许多人面对着同样的问题，在他们尝试写JavaScript

No more.Let today be the day where you learn to think like a programmer.

今天让你学会像程序员一样思考。

You don’t believe you can think like a programmer你不信你可以像程序员一样思考

You don’t believe you can think like a programmer because you freeze when you see a blank JavaScript file. But you already know how to think like a programmer.

你不相信你可以像程序员一样思考，以为在你看着空白的JavaScript文件的时候，你麻了，但是你已经知道怎么去像一个程序员思考。

It’s about using logic to solve problems.

这就是关于使用逻辑去解决问题。

For example, where are you going to go for lunch today? There are COUNTLESS of solutions. But how are you going to solve this problem?

例如，你今天要去哪里恰午餐？这有无数的解决办法。但是，你准备去怎么解决这个问题捏？

One way to solve this is the process of elimination:

有一个解决办法，就是消除：

• You don’t want to cook (so you eat out)
• 你不想做饭？（所以你去外面吃）
• You don’t want to go out (so you order takeaway)
• 你不想去外面？（所以你点外卖）
• So you go on Food Panda, Grab, Deliveroo, or another service you know.
• 所以你用美团、饿了么还是其他你知道的服务
• You want healthy food (so Macdonalds is not an option)
• 你想要健康的食物（所以华莱士窜稀套餐不是一个选项）
• You find something that looks appetizing to you.
• 你找到了一些看起来开胃的给你
• And you order the food.
• 然后你下单了

Problem solved!

问题解决

Understand this: If you can decide how get lunch for yourself, you can think like a programmer.

懂了咩：如果你能给你自己决定怎么吃午餐，你可以像程序员一个程序员一样思考。

How to stop freezing when you see a blank JavaScript file 怎么在你看到空白的JavaScript文件不再麻了

You freeze when you face a blank JavaScript file because you think about how you should structure the code.

你麻了，在你面对一个空白JavaScript文件，因为你在想你应该怎么构造代码。

• Should you use functions?
• 你应该用函数？
• Should you use classes?
• 你应该用类？
• Or maybe Object-oriented Programming?
• 或者用面向对象编程？

Coders like to talk about coding paradigms. So you’re lured into the illusion that you need to code with ONE of these paradigms.

程序员系用用一些写代码的规范。所以你被带到了你需要用这些规范中的一个的幻觉。

But you don’t.

但是你没有

Don’t think of structure.

别想结构了。

Overcoming coder’s block is simple. Think of the problem you want to solve. You can follow these four steps:

解决代码块是简单的，思考你想解决的问题，你可以跟着这四个步骤

1. Break down the problem into small problems

   把这个问题分解到小问题

2. Find solutions to your small problems

   找到方案去解决你的小问题

3. Assemble the solutions in a coherent manner

   以连贯的方式组合解决方案

4. Refactor and improve

   重构和改进

Structure comes in last (during the 4th step, refactoring). If you think of structure, you screw up your brain before you even begin. Thinking of structure before solving the problem leads to complicated, overwhelming, bloated code.

结构排在最后（在第四步，重构），如果你想的是结构，在你开始之前你就把你的脑子搞炸了。在解决问题之前考虑结构会导致复杂、压倒性的、臃肿的代码。

Errors are your friends 错误是你的朋友

A second reason why you freeze is because you’re afraid of the errors that show up.

你麻了的第二原因是因为你害怕错误又来了。

Don’t be afraid of errors.

不要怕错。

Errors are your friends. We’re lucky to have them.

错误是你的朋友，我们很幸运有他们。

Think about designers and other professions, when they create something, it’s hard for them to know what’s wrong with their work.

想想其他设计类的职业，在他们创造一些东西的时候，也难知道自己的工作出了什么问题。

But we get instant feedback through error messages. We know instantly whether our code works. Errors are like angels that gently tell us something is wrong so we can make adjustments and correct things.

但是我们可以通过错误信息获得及时反馈，我们立即知道我们的代码是否有效。错误像个天使，轻轻的告诉我们一些事情是不对的，所以我们就可以进行调整和纠正。

Overcoming Coder’s Block 克服代码阻塞

Think of the problem you want to solve. You can follow these four steps:

思考你想解决的问题，你可以按照这四步

1. Break down the problem into small problems
2. Find solutions to your small problems
3. Assemble the solutions in a coherent manner
4. Refactor and improve

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.

问题解决

Poor elephant. It looks so sad in the fridge :(

可怜的大象，在冰箱里看起来好像很不开心:(

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

这个答案是最好的例子，说明了当你面对一个空白的JavaScript文件时为什么会被卡住，你跳过了步骤

If you think logically about the question, you’ll see a few glaring problems that remain 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.

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

Step 2: Find solutions to your small problems. 找到方案去解决你的小问题

The second step is to find a solution to each of your small 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.

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

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 as it sounds, you wouldn’t be capturing elephants and putting them into fridges with JavaScript anytime soon. Let’s go through a real example instead.

听起来很有趣，但你不会很快用JavaScript捕捉大象并把它们放进冰箱。让我们看一个真实的例子。

Let’s use a real example. 用一个真实的例子。

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

你想要想要创建一个按钮，在单击时，显示一个侧边栏。

Breaking down the problem 拆分这个问题

The first step to building this button-and-sidebar component is to 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?

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

Let’s answer each of the questions:

What is the markup of this button?

这个按钮的标记是什么？

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

<a href="#" class="btn">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? 点击一次按钮后会发生什么？ 两次？ 三次？

• Click once: Sidebar shows up

  点击一次：按钮显示

• Click twice: Sidebar goes away

  点击2次：按钮隐藏

• Click 3 times: Sidebar shows up again

  点击3次：按钮再次显示

What is the markup of this sidebar? 这个侧边栏的标记是什么？

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

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

<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 becomes 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 an 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 with much more details. 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 an initial prototype of the component.

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