一位非計算機專業程序員的21個嵌套回調
大約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個嵌套回調。
