大約21個(gè)月之前，那時(shí)候我還不知道什么是回調(diào)（callback），我建立了我的***個(gè)網(wǎng)頁(yè)。為了紀(jì)念這21個(gè)嵌套的回調(diào)，我覺(jué)得現(xiàn)在是回顧這個(gè)網(wǎng)頁(yè)的時(shí)候了。

在那時(shí)我有個(gè)可能有點(diǎn)老套的習(xí)慣，就是在人文課程或者家庭旅游的時(shí)候在筆記本上信手涂鴉一番。在某次暑期旅行中我創(chuàng)作了一組我自己覺(jué)得超酷的三角形圖案。于是我覺(jué)得把它做成電子版是在那個(gè)夏天值得下功夫的事情。我還憧憬著這套東西讓我在Tumblr上的形象顯得超酷無(wú)比。

我開始找了些計(jì)算機(jī)專業(yè)的朋友們，問(wèn)他們是否可以給我指點(diǎn)一下方向。我得到的大把的答復(fù)可以總結(jié)為“google一下”，潛臺(tái)詞就是：“如果你google完了還不知道咋弄，你就是低能兒。”

“我想在我的網(wǎng)頁(yè)上做個(gè)三角形…不過(guò)Google看起來(lái)沒(méi)給我什么好的答案。”

“不，你要用‘CSS triangle’ 作為關(guān)鍵字去Google。看見了沒(méi)？這很簡(jiǎn)單。”

“不好意思…CSS和三角形有什么關(guān)系？”

對(duì)話記錄通常到此嘎然而止，或者是到“CSS就是你用來(lái)修飾你的HTML的東西。”

（從這些交流過(guò)程中我總結(jié)出一個(gè)結(jié)論：程序猿們總是在比著看誰(shuí)能把最多的事情稱為“簡(jiǎn)單的”）

每次對(duì)話完之后，我都覺(jué)得自己真是***的廢物。不過(guò)我后來(lái)發(fā)現(xiàn)了如何用一個(gè)div（那玩意代表啥東西？）和幾行CSS來(lái)做出一個(gè)三角形形狀，還有一些具有很酷的變換顏色效果的網(wǎng)站，可以復(fù)制下來(lái)做我的三角形圖案。

I我知道你現(xiàn)在肯定很好奇我（這么一個(gè)編程小白）是怎么拼湊出這些來(lá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代碼也是一樣重疊起來(lái)的，它就是個(gè)平行四邊形。

我后來(lái)又知道了有一種叫jQuery的東西，我可以用它的“API”里某個(gè)叫“animate”的東西來(lái)逐步改變我的三角形的各種屬性。我發(fā)現(xiàn)如果我調(diào)用一次$(‘#something’).animate({ ‘opacity’: ’0′ })就會(huì)讓一個(gè)三角形消失。在我的頭腦中覺(jué)得，如果我想讓我的20行三角形一個(gè)個(gè)地消失，我需要把這樣的代碼寫上20遍，這是符合邏輯的。

通過(guò)拷貝和粘貼內(nèi)容到JavaScript文件里的起始位置的方式，我還“ imported | 導(dǎo)入”了jQuery。我曾經(jīng)在其他的網(wǎng)頁(yè)上看見它在不同的文件里，但我決定不管是否合理，也要把我所有的JavaScript都放到一個(gè)文件里。

如果我打算自欺欺人，我可以說(shuō)我選擇了***化的編程方式：用最難的風(fēng)格。

$(".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)})})})})})})})})})})})})})})})})} 

你可以在這里看到完整的源代碼和最終產(chǎn)品。

（我甚至經(jīng)歷了對(duì)齊每一個(gè)回調(diào)方法的縮進(jìn)的麻煩，這在Windows Notepad上可是不容小覷的絕技）

注意以上JavaScript的結(jié)尾是一套壯觀的 )})})})})})})})})})})})})})})})})})})})。當(dāng)看到那些三角形按我的意圖消失又出現(xiàn)時(shí)，我真是太高興了。代碼本身就像壯觀的ASCII瀑布，或者是高級(jí)西班牙語(yǔ)課本里常見的印加文化的灌溉系統(tǒng)。這些代碼是有效的，我在Google上也沒(méi)看到誰(shuí)說(shuō)這些代碼錯(cuò)的一塌糊涂，或者說(shuō)任何看到我代碼的程序員都會(huì)永遠(yuǎn)禁止我和我的子孫接近互聯(lián)網(wǎng)。

等到有個(gè)真正的軟件工程師來(lái)看我的三角形代碼的時(shí)候，我已經(jīng)看過(guò)足夠多有關(guān)SICP（計(jì)算機(jī)程序的構(gòu)造和解釋）材料并意識(shí)到我的代碼既恐怖又可怕。“不過(guò)，初學(xué)者總是會(huì)犯這樣的錯(cuò)誤，對(duì)吧？”我窘迫地試探著問(wèn)道。

“不，程序猿是不會(huì)干這種事的。”他倒不是挖苦的口氣。我當(dāng)時(shí)就想把話題引到分子和細(xì)胞生物學(xué)上去。不過(guò)他隨后又補(bǔ)充說(shuō)：“沒(méi)有哪個(gè)程序猿會(huì)寫出這樣的代碼，因?yàn)樗麄兏揪蜎](méi)有那個(gè)耐心。”

不管他的第二段話是不是肺腑之言，我對(duì)整個(gè)事情的感覺(jué)好了一些。

不管怎樣，后來(lái)我還是羞愧地把我的三角形刨坑埋了。隨著時(shí)間一天天一月月地過(guò)去，它們最終成為愚昧的起步之旅。“嗨，你這倆鐘頭都花在調(diào)試你的 CoffeeScript代碼里的空白字符問(wèn)題了？想當(dāng)年我花了一天時(shí)間來(lái)寫21個(gè)嵌套的回調(diào)和200行相同的HTML。”這個(gè)故事通常會(huì)產(chǎn)生一種自我調(diào)侃的搞笑效果。

我認(rèn)識(shí)到，自三角形項(xiàng)目以來(lái)，我寫的每一行代碼都只會(huì)讓我在“google一下”、調(diào)試代碼，和五花八門的編程主題等方面更強(qiáng)，而這都是因?yàn)槲矣H身去經(jīng)歷了每一個(gè)看似愚蠢的項(xiàng)目。

上個(gè)星期我花了點(diǎn)時(shí)間快速重寫了我的三角形。你可以在這里看到它，在響應(yīng)性和動(dòng)態(tài)生成效果上令人自豪，這些是我在當(dāng)年毫無(wú)概念的（當(dāng)然了，我也只能犧牲了老版本里明顯的優(yōu)點(diǎn)）。我保持了最初的設(shè)計(jì)精髓，即用div生成三角形，用jQuery來(lái)做動(dòng)畫效果。

既然我快要離開安全、綠樹環(huán)抱的伯克利的圍墻，進(jìn)入真實(shí)的世界（也希望使我過(guò)去對(duì)代碼的犯罪記錄安息），我希望給初出茅廬的發(fā)明家和害羞的創(chuàng)作者，留下我的三角形中一到三個(gè)角作為遺產(chǎn)。

編程很難。絕不要因?yàn)槟悴蝗缒闩赃叺娜松朴?ldquo;去Google一下”就心情沮喪。絕不要讓那些言必稱黑客馬拉松的假行家忽悠你，讓你放棄做出下一個(gè)貓咪的微博或者公共廁所點(diǎn)評(píng)網(wǎng)的機(jī)會(huì)。就算是最蠢的點(diǎn)子（例如嘗試做多邊形消失和重現(xiàn)的動(dòng)畫）都會(huì)幫助你作為一個(gè)程序猿不斷提高。學(xué)習(xí)編程很大程度上是學(xué)會(huì)如何學(xué)習(xí)，而***的學(xué)習(xí)方法就是去動(dòng)手做。

歸根結(jié)底，成為一個(gè)稱職的程序猿和你贏了多少次黑客馬拉松或者你能想出多少新奇的點(diǎn)子無(wú)關(guān)，而是和執(zhí)行力、關(guān)注細(xì)節(jié)、全心投入、對(duì)于創(chuàng)造和突破的熱情有關(guān)。

如果你在對(duì)你的代碼感到羞愧，我允許你嘲笑一次我那三角形項(xiàng)目里的21個(gè)嵌套回調(diào)。

原文鏈接：http://blog.jobbole.com/37863/