本文共 15465 字,大约阅读时间需要 51 分钟。
像程序员一样思考
by Zell Liew
由Zell Liew
“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.
但没有更多。 让今天成为您学会像程序员一样思考的日子。
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:
克服编码器块很简单。 您可以按照以下四个步骤操作:
Let’s take a closer look at each of these steps.
让我们仔细看看每个步骤。
How do you put an elephant into the fridge?
您如何将大象放入冰箱?
Here’s what most people would answer:
这是大多数人会回答的问题:
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:
如果您对问题进行逻辑思考,则会看到一些尚未解决的明显问题:
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.
在编写代码时,您需要回答您能想到的每个小问题。 这就是为什么第一步是将您的问题分解成更小的部分。
The second step is to find a solution to each of your smaller problems. Here, it’s important to be as detailed as possible.
第二步是为每个较小的问题找到解决方案。 在这里,尽可能详细是很重要的。
What kind of elephant? — the
什么样的大象? —
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。
Once you have answers to all your smaller problems, you piece them together to solve your big problem.
一旦对所有较小的问题有了答案,就可以将它们拼凑起来以解决大问题。
So, in the put-elephant-in-fridge example, you can probably follow the following steps:
因此,在放入冰箱的示例中,您可能可以按照以下步骤操作:
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 say you want to a create button that, when clicked, shows you a sidebar.
假设您要创建一个创建按钮,该按钮在单击时会显示一个侧边栏。
Break down the component into smaller pieces. Here are a few problems you may identify:
将组件分成较小的部分。 您可能会发现以下几个问题:
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 .
按钮。
Click me
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 <d
iv> that contains a list of links:
边栏应为<d
iv>,其中包含链接列表:
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:
当您回答此问题时,您可能会想到另外两个:
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
类,并且边栏应保持隐藏状态。
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.
这样,您便有了该组件的初始原型。
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:
在上面的示例中,您可以问几个问题:
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')})
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 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。 玩得开心!
(If you liked this article, I’d appreciate it if you would give me some claps and . ?) Thanks!
(如果您喜欢这篇文章,如果您能给我一些鼓掌并 ,我将不胜感激。)谢谢!
Originally published at .
最初发布在 。
翻译自:
像程序员一样思考
转载地址:http://wbzzd.baihongyu.com/