通过写代码诗来学习编码

已发表: 2022-03-10

快速总结↬学习编码可能很困难。在这篇文章中，Murat 分享了他关于如何以不同的方式和诗意地编写代码帮助他克服最初的挣扎和不安全感的建议。

早在 2008 年，我开始学习设计，并清楚地记得纯粹的代码是如何吓到我的。我有一些编码课程，并且没有任何编码经验，我很难理解我第一次接触的代码。突然间，我习惯的英语单词（例如“new”、“return”和“throw/catch”）有了全新的含义；神秘的语法、分号、方括号和全新的规则并没有让事情变得更容易。

如果您是 JavaScript 新手和/或难以将其添加到您的技能中，我可能会为您提供克服这些障碍的方法。你绝对不是一个人，你完全有权利认为学习编码是一个难以破解的难题。

为什么学习编码这么难？

以下是关于为什么我认为人们很难学习或对 JavaScript（或任何编码语言）产生兴趣的一些误解：

代码是神秘的、纯粹的功能性和可怕的；
代码仅适用于机器，因此人们不会感到被处理或参与；
代码不被视为一种语言，因为它具有完全不同的用例，并且看起来与他们以前见过的任何东西都大不相同；
人们会想到刻板印象（邪恶的黑客，也许是一些 Matrix 帅哥），因此不认同它。

跳跃后更多！继续往下看↓

作为一名开发人员，您应该以一种非常具体的方式处理代码——甚至以一种完全不同（且高度合乎逻辑）的方式进行思考。编码语言相当严格和不宽容；单个字符可以使机器无法理解您的意思并导致应用程序崩溃。您应该忽略和覆盖您从说和写人类语言中所知道的某些事情（顺便说一句，在学习新的人类语言时也是如此）。

但并非所有网络上的编程语言、文档或视频教程都考虑到这种“人类到编程语言的转换”。当然，他们不必这样做。毕竟，代码的主要目的是告诉机器该做什么。

尽管如此，由于这个目的，只是缺少比较的机会，而且你说的语言（词汇和规则）似乎对学习编程语言毫无用处。 JavaScript 语言中没有“爱”这个词，说“我爱你”也没有意义。一台机器（或浏览器）根本不知道或关心爱（还没有？）。这种“全新”和“不知道从哪里开始”的感觉可能会令人恐惧。

这就是我在这里的原因。我认为你可以通过掌握人类语言知识，并像对待任何其他人类语言一样对待 JavaScript，以更容易和更艺术的方式学习 JavaScript。让我用一个小例子来演示。

有趣的事实：一些编程语言实际上考虑了从一种编程语言到另一种编程语言的转换。 这就是为什么学习许多编程语言要容易得多的原因——只需学习一种语言。

一个小例子

在很多情况下，当您想要执行 JavaScript 代码时，您希望“文档”（基本上是网站，用户每次访问时都在下载）准备好，以便您可以与 HTML 元素进行交互。在纯 JavaScript 中，你可能会遇到这样的事情：

 (function() { // Your code goes here })();

（糟糕！在这种情况下，一个函数被定义在括号中，然后在末尾立即用另一对括号调用。这被称为 IIFE。）

或者有时像这样：

 if (document.readyState === 'complete') { // Your code goes here }

第一个片段肯定需要解释，而对于第二个片段（也许是一些幻想），人们可以理解存在一个需要满足的条件，以便仅通过查看它就会发生其他事情。

不过，想象一下这样的事情：

 onceUponATime(function () { // Your code (story) goes here })

“从前”是（我敢说）即使是孩子也能理解的东西。它针对开发人员（通过引用童年记忆），同时在理论上做同样的事情。这就是我认为“让人类向编码语言过渡”的想法。

关于“功能”的快速说明：功能基本上是一种技能，在你调用它之前它是休眠的。 “阅读”是一个技能function read() { … } ，当你想阅读这样的内容时调用它： read() 。还有一种叫做“匿名函数”的东西，即"function() { … } （没有名字，就像上面的片段），它们基本上是你不会认为是技能的“一次性/随意动作” ，例如“按下按钮”。

扭转局面：从信息到基础

所以让我们把这个想法更进一步。让我们把上面的原因和误解，颠倒过来：

一首小诗。

用 JavaScript 编写。

为人类而生。

关于两个人的爱情。

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

它不起作用。它目前不适用于机器。它旨在让您阅读和理解。

如果你得到了这首诗的信息，你实际上理解了一段 JavaScript 代码，你可能把它比作英语。

现在你可能会问自己：我明白这一点，但为什么会这样写呢？这种语言的规则（语法）是什么？ “我”是什么意思（在技术意义上），为什么这段代码看起来和英语如此相似？

规则、词汇和变量

学习编程语言时要理解的最重要的事情之一是变量的概念。

每种人类语言都有其规则（语法）和大量词汇（预定义）。显然，为了能够说这种语言，首先需要学习这两者。

与许多其他编程语言一样，JavaScript 也有自己的一套规则（例如，单词之间的.或if语句的编写方式）和自己的词汇表（ if 、 document 、 window 、 Event等）。这些关键字由 JavaScript（和浏览器）保留（或“预定义”），每个关键字都有其特定用途。

但就像我之前提到的，比较你知道的英语单词和句子的机会似乎是缺失的，因为没有对等词。

这就是变量的来源；您（开发人员）可以（甚至必须）定义变量，以使机器和开发人员了解某事物的含义。变量可以有多种形式（因此得名）：它们可以是一串单词和字母（字符串）、一个数字、一个动作（函数），甚至是一个集合（数组）。你给它命名。

在所有语言中，可能都有一个表示爱的词。你有点知道它的意思，但不是真的，因为它太主观了。但是，仍然有一个词。

但是在 JavaScript 中，没有“爱”，除非你说有。它可以是你想要的任何东西。

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).


 const love2 = { color: 'purple', duration: 'forever', loveTarget: 'dogs', };
 // 也是一个变量表达式，其中 love2（一个常量）， // 不能完全重新定义/覆盖： // love2 = undefined; // => 将不起作用
// （“未定义”是一个预定义的 javascript 关键字，// 基本上是说“没有价值”）

能够区分 JavaScript 中预定义的内容（JavaScript 规则和词汇表）和开发人员实际自定义定义的内容（也称为“应用程序逻辑”或“业务逻辑”）至关重要。

回到上面写的诗：

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

这些表达式来自以下 JavaScript 词汇/规则集：

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

这些是变量（您可以自由支配定义它们的名称和行为）：

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

让我们假设这首诗现在是人类可读的。您可能已经理解了这个信息，您也可能会看到您需要遵循的 JavaScript 语言规则与您实际必须自己想出的东西（变量）之间的区别。但是机器呢？如果机器（浏览器）要阅读这首诗，它会抛出一个错误。机器需要定义“我”和“你”，因为它试图访问其属性（通过 `me.getDistanceTo()` 中的`.`）。有了上面提到的区分能力，你实际上可以设计“我”和“你”来使这首诗可执行/机器可读，如下所示：

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

那么这里发生了什么？ - 我们读了一首 JavaScript 诗，它是用 JavaScript“语法”写的，唯一的目标是让人类理解。 - 在理解了信息之后，我们区分了规则、词汇和变量，以了解诗歌的结构（JavaScript 的语法和基础知识）。 - 有了这个区别，我们用 JavaScript 规则设计了其余的诗歌变量，以使其可以由机器（在浏览器中）运行。 **这是可能的，因为我们对待 JavaScript 就像对待英语一样。**

一个更大的例子：交互式代码诗歌

这就是我的个人项目 LoveBits 的由来。 LoveBits 是一种代码学习/讲故事的体验。

LoveBits 项目的动画演示 — LoveBits：用 JavaScript 编写诗歌项目（大预览）

它试图通过以下方式让人们对 JavaScript/编码感兴趣：

将可读性和人类语言放在首位；
将代码与读者可能已经熟悉的艺术相结合。

就故事而言，它是关于两个比特（矩形生物）；其中一个 Bits (blueBit) 是浪漫的，并将 JavaScript 爱情诗写到另一个 Bit (purpleBit)。

当您启动 LoveBits 时，您可以选择多首情诗中的一首（用 JavaScript 编写）。每首诗都有一个代码片段，其编写方式应该被甚至不熟悉编程的人理解。 唯一的要求是英语。

比如《一见钟情》（其实是LoveBits的一首诗），就是关于这两个Bits，blueBit基本上是在说：“如果我离你的位置足够近，我会‘设置我的感情’ inLove: true 。”

这些诗的特别之处在于，您只需按下下面的“播放”按钮即可“运行”或“播放”它们。在“一见钟情”的情况下，您会看到一个蓝色和紫色的矩形以及一个数字。你可能已经猜到了，这就是诗中提到的两个Bit，而blueBit下面的数字实际上是blueBit和purpleBit之间的距离。

正如这首诗所暗示的那样，您可能希望通过减少它们之间的距离来让blueBit爱上purpleBit，对吧？所以，你可以做什么？您可以互动并拖动blueBit，并使其坠入爱河。但要小心，有时结果不止一种。

有人可能会说你是这里的机器。您是需要解释 JavaScript 代码才能采取行动并帮助两个数字生物坠入爱河的人。

然后去哪儿？

如果您是一个苦苦挣扎的开发人员，请尝试将 JavaScript 视为一种人类语言，并且只需了解代码片段应该首先做什么，而不是它们最终会做什么。

这是我建议您接下来要做的事情：

总是更喜欢直接为将规则、词汇和变量组合在一起以形成应用程序逻辑的整个应用程序的示例和代码；
应用程序逻辑将讲述故事，帮助您填补上面代码示例中的空白。 lodash等代码库和实用程序只会为您提供新的词汇，这些词汇在能够阅读和理解 JavaScript 代码后会变得很有帮助；
查看现有代码，并尝试将其分解为具有反映其功能的名称的小函数。编写针对人类和机器的代码。以可以像句子一样阅读的方式编写代码。在需要的地方使用注释。想一想：我将如何用人类语言（对另一个开发人员）表达这一点？

结论

一旦您开始将代码视为人类语言而不是外星人可能发明的东西，学习编码就会变得更容易。学习区分语言特性（内置）和应用程序逻辑的变量/自定义代码是至关重要的。能够理解应用程序逻辑将使您处于改进和改变事物的强大位置，甚至不需要了解语言特性。

基础之前的信息：理解任何代码片段的信息，JavaScript的基础自然会随之而来。你有多少次听到有人说，“我懂语言，但我还不会说”？这是一个自然过程，可以而且可能应该应用于学习人类和编码语言。

此外，请始终记住，代码具有明确的功能目的，但不一定总是这样。甚至人类语言也曾经是纯粹的功能性语言，但后来出现了诗歌甚至歌曲（JavaScript 歌曲，有人吗？），它们以完全不同的方式将人们联系起来。我认为或希望同样适用于这里。

总是探索代码项目，甚至可能尝试自己写一首诗（甚至可能使用您熟悉的另一种编程语言）？我喜欢创建 LoveBits 项目，并希望在下面的评论中看到您的一些想法！