为什么（以及如何）我用铅笔和纸写代码

如果您觉得手写代码很傻，您可能会惊讶地发现这是不可避免的。如果您不确定，想想您上次参加的求职面试，并记住面试室里没有电脑——只有面试官、一张白纸和一支蓝色圆珠笔。

对于你们学生来说，这更重要，因为你们的成绩取决于你们巧妙地挤在答题纸上可用空间里的代码行数。

不仅如此，经验丰富的程序员还可以指引您查看他们从办公室复印机上取出的那一叠 A4 纸，上面潦草地写着他们一直在研究的一个特别复杂的算法。

因此，无论您是考试学生、潜在的求职者，还是想要解决编程死胡同的人，我希望本文在您提笔写代码时能帮到您。

虽然我将重点关注写代码的模拟方面，但您可以将这些步骤应用于任何形式或语言的编码。因此，可以将此视为一种通用的编码指南，它专门适合我，但对您的工作也可能非常有用。

为什么要写下来？

在我们开始之前，必须了解的是，没有人期望您在笔记本上记下可投入生产的代码。这不像您可以将其放入代码编辑器并进行编译而不会出错。如果生成完美的代码是目标，您将在面试室和考场前坐在电脑前。

手写代码的目的是提前处理逻辑。在设计中，人们渴望“尽快进入浏览器”，但在手绘设计方面存在传统智慧。低保真媒介鼓励快速实验和廉价的错误。

代码也可能如此，主要是在处理语法和语义时。也就是说，获得正确的语法和语义始终是一个加分点，尽管它不是整个手写练习的唯一重点。

让我们看看在手写代码方面可以从哪里开始。

了解您的问题

在我大学最后一年，由于健康原因，我无法进行实习甚至参加校园招聘。因此，我的第一次求职面试非常字面意义上的意义重大。

现在回想起来，那次面试相当容易。但由于我以前从未参加过面试，所以我焦虑得无法自拔。面试官首先询问编程方面的问题是，我是否可以使用星号输出一个倒三角形。正如我所说，这很容易——没有什么是一个for循环无法处理的，对吧？但就像我说的，我的焦虑也达到了顶峰。

我深吸了一口气，将手掌按在他们为我铺好的白纸上，尽可能缓慢地将其滑向我（当然是为了争取时间），点击笔，然后我做对了。

我首先画了一个由星号组成的倒三角形。这就是我找到立足点开始回答他们问题的方式。

我见过其他一些非常优秀的开发人员犯了一些错误，仅仅是因为他们从未完全理解他们要解决的问题。

我们处理的问题不像物理学家或数学家解决的问题。他们得到一组参数并找到缺失的参数；我们的问题也是我们的结果。我们已经被告知我们的结果是什么——我们必须弄清楚如何达到它们。这就是为什么必须很好地了解问题的原因，因为您将看到结果。

写下或画出您想要输出的内容是开始编码的最佳方法之一。我理解，在我们快节奏的行业中，人们期望我们能够通过运行“hello world”演示立即开始编程。这对于熟悉陌生的语法并消除尝试新事物的焦虑感非常有用。

但是，当有人问你一个问题并给你一个要努力达到的结果时，难道先把它写下来不是更好吗？那个问题/结果不仅是您的起点，也是您的参考点。在编码的任何步骤中，您都可以查看它以确保您正在朝着它努力，并且您走在正确的轨道上。

因此，无论是在您的答题纸上还是在您即将书写的空白 A4 纸上，首先花一秒钟时间写下您要输出的内容。如果您不想将其作为答案的一部分，可以将其放在页边距或角落。只需确保它位于您可以随时参考的位置。

概述您的代码

此步骤就像一把双刃剑。它可以为您提供程序的路线图，也可以浪费您的时间。我的工作是确保它是前者。

因此，首先，我想说：如果您的问题或问题的范围很小，则无需概述代码。再次强调，此实践并非所有项目或情况都适用。假设我是您的面试官，我要求您尽可能多地用 CSS 写出如何居中网页元素的方法。您不需要为此创建大纲。每种方法的代码片段都相对较小。

但是现在，假设我分配给您编写一个 Web 应用程序，该应用程序通过触摸屏界面捕获用户签名，然后将签名保存到服务器上。不太简单，对吧？您需要解决不止一件事。也许，一个小纲要可以提供帮助。

1. 捕获签名的 UI——HTML Canvas？WebGL？
2. 在用户签名时禁用网页其余部分的指针事件
3. 将捕获的图像转换为 PNG 文件并保存——JS
4. 然后将其转换为 blob（可能）并将其保存到访客的日志数据表中。

我写了一个我认为可能需要编码的操作粗略序列。它可以更短或更长，具体取决于我想要从中获得什么。

我强烈建议为客户项目概述代码。将大纲与您的用户需求一起编写，或写在您打印出的线框的背面。

您的快速要点快照为您提供了一个地图、一个待办事项列表和一个清单，以便在您完成项目时进行验证——基本上是您整个项目的低保真列表摘要。它还可以成为开始您下一个类似项目的模板。

但就像我之前说过的，这一步就像一把双刃剑。在时间有限的情况下，对于应试者和面试者，您必须将其保持简短。

如果您不知道从哪里开始，请写下您必须在应用程序中编写三个基本函数，如果您有时间，则可以写五个。

但仅此而已。尽可能少地花时间在这上面，不要为细节而烦恼。大纲不会为您赢得额外的分数。它只存在于帮助您确保您已涵盖所有内容。它捕捉了您最初的直觉反应，并在整个项目生命周期中让您保持诚实。

长手写 vs. 速记

开始编码的时间到了。那么，您写什么呢？“Bdrs”还是“border-radius”；“div -> p”还是“<div><p></div></p>”；“pl()”还是“println()”；“q()”还是“querySelector()”?

如果有人正在批改您的代码，那么别无选择。省略缩写、伪代码、Emmet 快捷方式和任何其他形式的速记编写。否则，没有理由假设阅读此代码的任何人知道您的缩写含义。

这完全取决于您。

如果您已经不习惯用手写字——我们中的许多人都是如此——最好不要过度使用长手写符号，因为它们会变得很乏味。同时，如果想要有一天能够回顾并理解您写下的内容，那么写得过于简略是不行的。

在我的笔记应用程序中有一个打开的文件，在我的桌子上放着一个有格子的笔记本，我将想要保存以供以后参考的代码片段写下来。它们没有组织，只是一长串片段。因此，当我浏览旧笔记时，如果我没有清楚地写下它们，我就不知道我打算写什么。

我经常忘记语法。例如，自从引入箭头符号以来，我一直将其用于 JavaScript 函数（因为它更短），我非常确定如果有人突然要求我使用function关键字定义一个函数，我甚至可能会放错括号或函数名，从而导致语法错误。

我们偶尔会忘记一些很久没用过的语法，这很正常。所以，当你预知未来需要用到某些笔记时，最好是清晰地写下来。

代码的非顺序执行流程

与上一步不同，上一步不适用于面试者和考试者，而这一步是专门为你们准备的。

大多数编程语言都是解释型、编译型和执行型的，因此有时源代码中预先编写的代码会在之后被调用时执行。例如，我们在 JavaScript 中使用函数调用来实现这一点——函数可以先定义，然后再执行。考生和面试者可以使用这一点，先着手解决答案的关键点。

正如我从一开始就说过的，手写代码的目的是梳理或测试你编写的任何程序的逻辑。最好是先专注于解决这个问题。

让我们以一个经典的教科书示例为例——一个查找第 n 个斐波那契数的程序。如果我为它写一个简单的提纲，它会是这样的

1. 获取输入。
2. 计算斐波那契数。
3. 总结输出。
4. 打印输出。

提纲中的所有步骤都是必不可少的；但是，步骤 1、3 和 4 更加强制性。它们是必要的，但还不够重要，不需要立即关注。

最好先写下计算斐波那契数的代码，而不是获取输入。将其封装在一个函数中，然后继续按顺序编写代码，并在适当的位置写下一行代码来调用该函数。

把时间花在编写解决问题核心的代码上。

真正的专业人士可以跳过前面一些步骤。假设我有一个客户项目，我需要处理一些三角形几何问题——已知两条边、对角以及需要找到第三边的长度。我决定在纸上涂鸦来开始，而不是打开我的IDE。

首先，我当然会画出三角形（正如你所见，我在这方面很有经验）。我会写下一些示例长度和角度。然后我会写下公式（当然，我会通过在线搜索找到它），然后我会直接跳到函数的代码。

我写下这些强制性步骤没有意义，即使我将来在生产就绪的代码中需要它们。但如果我必须在考试的答题纸上写下这些步骤，情况就会有所不同。我不能跳过其他步骤；但是，我仍然可以从公式的代码开始。

伪代码

Chris 已经写了一篇关于伪代码的非常棒的文章，我强烈建议你认真阅读一下。

对于所有那些觉得整个手写代码的事情似乎不太适合自己，但仍然很好奇它是否可以帮助自己的专业人士来说，**伪代码**可能是你们正在寻找的平衡点。

它类似于我在前面步骤中提到的代码提纲。但是，它更简洁，感觉更像是代码速记。有时它也被称为“骨架代码”。

以下是一些关于 CSS 网格布局的快速伪代码

Grid
5 60px rows
6 100px columns

写的东西不多！因此，尽管用笔在纸上写东西非常适合这种事情，但在你正在使用的任何程序中记下一些伪代码同样有效、快速且廉价。

空格和注释

我认为代码 90% 是关键词，10% 是制表符。没有空格，单词的可读性就会降低。缩进对于手写代码也是必要的。但是，请不要在每一级都使用它，因为纸张的宽度会限制你。谨慎地使用空格，但一定要使用。

如果你正在为自己编写代码，我也认为，如果你已经遵循了我前面提到的所有内容，并且已经在页面上写下了输出和提纲，你甚至可能不需要包含注释。注释可以快速告诉你后面的代码段的作用。如果你已经编写并阅读了代码的提纲，那么注释就是多余的笔记。

但是，如果你的判断告诉你需要写一个注释，那就写吧。将其添加到代码的右侧（因为你无法像在 VS Code 中那样在已写好的行之间插入它）。使用正斜杠、括号或箭头来表示它们是注释。

对于对某种语法不自信的考生来说，请写下注释。这样，至少可以让你批改试卷的人知道你使用这种格式错误的代码的意图。并且只使用正确的分隔符来表示注释——例如，对于 JavaScript 来说，就是正斜杠。

模拟与数字

正如我之前提到的，我在这里提供的所有内容都是通用的编码建议。如果你不想用物理纸张尝试，任何笔记应用程序都可以使用。

但是，如果你要尝试数字路线，我的建议是尝试使用除普通笔记应用程序之外的其他工具。使用更多视觉化的数字工具——流程图、思维导图、线框图等。它们可以帮助你直观地了解结果、提纲和代码本身。

我不是一个数字公民（除了在网上工作和最近开始阅读电子书之外），所以我坚持使用物理笔记本。

我喜欢的书写代码工具

任何铅笔和纸都可以！但市面上有很多选择，以下是我使用的一些精选工具

• 史泰德绘图墨水笔 0.3mm（黑色）
• 三菱 JETSTREAM 101 0.7mm（黑色）
• MUJI A5 笔记本 6mm 格 30 页（轻便易携带）
• MUJI 双头荧光笔（黄色）

没有“正确”的编码方式

我希望，如果说没有什么其他的收获，我这种用铅笔和纸手写代码的方式至少会让你重新评估你已经规划和编写代码的方式。我喜欢了解其他开发者如何处理他们的工作，而这是我让你了解我做事方式的一种方式。

再说一遍，这里没有任何科学依据或精确的技巧。但如果你想尝试手写代码规划，以下是我们已经涵盖的所有内容，以一个有序的列表形式呈现

1. 首先写下（如果需要，使用示例数据）代码的输出。
2. 为代码编写提纲。对于小型项目或不太复杂的项目，请将其保持在三个步骤以内。
3. 使用长手写符号。开发者为自己编写代码时可以使用速记符号，只要书写清晰，并且在以后参考时你能够理解即可。
4. 在时间受限的情况下，考虑先编写解决问题核心的代码。稍后，在你的顺序代码中正确的位置写下一行代码来调用该代码。
5. 如果你感觉自信，尝试编写解决主要思想的伪代码。
6. 使用正确的缩进和空格——并注意纸张的宽度。

就是这样！当你准备好尝试用手写代码时，我希望这篇文章能让你轻松上手。如果你正在参加考试或面试，我希望这能帮助你专注于答对问题。