我滴天！我曾经写过 21 个嵌套的回调_html/css_WEB-ITnose

大约21个月之前，那时候我还不知道什么是回调（callback），我建立了我的第一个网页。为了纪念这21个嵌套的回调，我觉得现在是回顾这个网页的时候了。

在那时我有个可能有点老套的习惯，就是在人文课程或者家庭旅游的时候在笔记本上信手涂鸦一番。在某次暑期旅行中我创作了一组我自己觉得超酷的三角形图案。于是我觉得把它做成电子版是在那个夏天值得下功夫的事情。我还憧憬着这套东西让我在Tumblr上的形象显得超酷无比。

我开始找了些计算机专业的朋友们，问他们是否可以给我指点一下方向。我得到的大把的答复可以总结为“google一下”，潜台词就是：“如果你google完了还不知道咋弄，你就是低能儿。”

“我想在我的网页上做个三角形…不过Google看起来没给我什么好的答案。”

“不，你要用‘CSS triangle’ 作为关键字去Google。看见了没？这很简单。”

“不好意思…CSS和三角形有什么关系？”

对话记录通常到此嘎然而止，或者是到“CSS就是你用来修饰你的HTML的东西。”

（从这些交流过程中我总结出一个结论：程序猿们总是在比着看谁能把最多的事情称为“简单的”）

每次对话完之后，我都觉得自己真是极品的废物。不过我后来发现了如何用一个div（那玩意代表啥东西？）和几行CSS来做出一个三角形形状，还有一些具有很酷的变换颜色效果的网站，可以复制下来做我的三角形图案。

I我知道你现在肯定很好奇我（这么一个编程小白）是怎么拼凑出这些来的。

好吧，这里就是我的HTML的概貌：

<div id="row1">  <div class="btri"></div>  <div class="tri"></div>  <div class="tri"></div>  <div class="tri"></div>  <div class="emp"></div>  <div class="tri"></div>  <div class="tri"></div></div><div id="row2">  <div class="tri"></div>  <div class="tri"></div>  <div class="tri"></div>  <div class="tri"></div>  <div class="tri"></div>   ...

我要悲哀地告诉你们，下面还有165行类似的东西，另外配套的JavaScript代码也是一样重叠起来的，它就是个平行四边形。

我后来又知道了有一种叫jQuery的东西，我可以用它的“API”里某个叫“animate”的东西来逐步改变我的三角形的各种属性。我发现如果 我调用一次$(‘#something’).animate({ ‘opacity’: ‘0’ })就会让一个三角形消失。在我的头脑中觉得，如果我想让我的20行三角形一个个地消失，我需要把这样的代码写上20遍，这是符合逻辑的。

通过拷贝和粘贴内容到JavaScript文件里的起始位置的方式，我还“ imported | 导入”了jQuery。我曾经在其他的网页上看见它在不同的文件里，但我决定不管是否合理，也要把我所有的JavaScript都放到一个文件里。

如果我打算自欺欺人，我可以说我选择了最优化的编程方式：用最难的风格。

$(".disappear").click(function(){  $("#row20").animate({ "opacity": "0" },    100,    function(){$("#row19").animate({ "opacity": "0" },      100,      function(){$("#row18").animate({ "opacity": "0" },        100,        function(){$("#row17").animate({ "opacity": "0" },          100,          function(){$("#row16").animate({ "opacity": "0" },            100,            function(){$("#row15").animate({ "opacity": "0" },              100,              function(){$("#row14").animate({ "opacity": "0" },                100,                function(){$("#row13").animate({ "opacity": "0" },                  100,                  function(){$("#row12").animate({ "opacity": "0" },                    100,                    function(){$("#row11").animate({ "opacity": "0" },                      100,                      function(){$("#row10").animate({ "opacity": "0" },                        100,                        function(){$("#row9").animate({ "opacity": "0" },                          100,                          function(){$("#row8").animate({ "opacity": "0" },                            100,                            function(){$("#row7").animate({ "opacity": "0" },                              100,                              function(){$("#row6").animate({ "opacity": "0" },                                100,                                function(){$("#row5").animate({ "opacity": "0" },                                  100,                                  function(){$("#row4").animate({ "opacity": "0" },                                    100,                                    function(){$("#row3").animate({ "opacity": "0" },                                      100,                                      function(){$("#row2").animate({ "opacity": "0" },                                        100,                                        function(){$("#row1").animate({ "opacity": "0" },                                          100)})})})})})})})})})})})})})})})})}

你可以在这里看到完整的 源代码 和 最终产品 。

（我甚至经历了对齐每一个回调方法的缩进的麻烦，这在Windows Notepad上可是不容小觑的绝技）

注意以上JavaScript的结尾是一套壮观的 )})})})})})})})})})})})})})})})})})})}) 。 当看到那些三角形按我的意图消失又出现时，我真是太高兴了。代码本身就像壮观的ASCII瀑布，或者是高级西班牙语课本里常见的印加文化的灌溉系统。这些 代码是有效的，我在Google上也没看到谁说这些代码错的一塌糊涂，或者说任何看到我代码的程序员都会永远禁止我和我的子孙接近互联网。

等到有个真正的软件工程师来看我的三角形代码的时候，我已经看过足够多有关SICP（计算机程序的构造和解释）材料并意识到我的代码既恐怖又可怕。“不过，初学者总是会犯这样的错误，对吧？”我窘迫地试探着问道。

“不，程序猿是不会干这种事的。”他倒不是挖苦的口气。我当时就想把话题引到分子和细胞生物学上去。不过他随后又补充说：“没有哪个程序猿会写出这样的代码，因为他们根本就没有那个耐心。”

不管他的第二段话是不是肺腑之言，我对整个事情的感觉好了一些。

不管怎样，后来我还是羞愧地把我的三角形刨坑埋了。随着时间一天天一月月地过去，它们最终成为愚昧的起步之旅。“嗨，你这俩钟头都花在调试你的 CoffeeScript代码里的空白字符问题了？想当年我花了一天时间来写21个嵌套的回调和200行相同的HTML。”这个故事通常会产生一种自我调 侃的搞笑效果。

我认识到，自三角形项目以来，我写的每一行代码都只会让我在“google一下”、调试代码，和五花八门的编程主题等方面更强，而这都是因为我亲身去经历了每一个看似愚蠢的项目。

上个星期我花了点时间快速重写了我的三角形。你可以在 这里 看到它，在响应性和动态生成效果上令人自豪，这些是我在当年毫无概念的（当然了，我也只能牺牲了老版本里明显的优点）。我保持了最初的设计精髓，即用div生成三角形，用jQuery来做动画效果。

既然我快要离开安全、绿树环抱的伯克利的围墙，进入真实的世界（也希望使我过去对代码的犯罪记录安息），我希望给初出茅庐的发明家和害羞的创作者，留下我的三角形中一到三个角作为遗产。

编程很难。绝不要因为你不如你旁边的人善于“去Google一下”就心情沮丧。绝不要让那些言必称黑客马拉松的 假行家忽悠你，让你放弃做出下一个猫咪的微博或者公共厕所点评网的机会。就算是最蠢的点子（例如尝试做多边形消失和重现的动画）都会帮助你作为一个程序猿 不断提高。学习编程很大程度上是学会如何学习，而最好的学习方法就是去动手做。

归根结底，成为一个称职的程序猿和你赢了多少次黑客马拉松或者你能想出多少新奇的点子无关，而是和执行力、关注细节、全心投入、对于创造和突破的热情有关。

如果你在对你的代码感到羞愧，我允许你嘲笑一次我那三角形项目里的21个嵌套回调。

文章来源： 伯乐在线