21個(gè)嵌套回調(diào).doc

軟件英才網(wǎng) 軟件行業(yè)馳名招聘網(wǎng)站一位非計(jì)算機(jī)專業(yè)程序員的故事：21個(gè)嵌套回調(diào)大約21個(gè)月之前，那時(shí)候我還不知道什么是回調(diào)（callback），我建立了我的第一個(gè)網(wǎng)頁。為了紀(jì)念這21個(gè)嵌套的回調(diào)，我覺得現(xiàn)在是回顧這個(gè)網(wǎng)頁的時(shí)候了。在那時(shí)我有個(gè)可能有點(diǎn)老套的習(xí)慣，就是在人文課程或者家庭旅游的時(shí)候在筆記本上信手涂鴉一番。在某次暑期旅行中我創(chuàng)作了一組我自己覺得超酷的三角形圖案。于是我覺得把它做成電子版是在那個(gè)夏天值得下功夫的事情。我還憧憬著這套東西讓我在Tumblr上的形象顯得超酷無比。我開始找了些計(jì)算機(jī)專業(yè)的朋友們，問他們是否可以給我指點(diǎn)一下方向。我得到的大把的答復(fù)可以總結(jié)為“google一下”，潛臺(tái)詞就是：“如果你google完了還不知道咋弄，你就是低能兒?！保c(diǎn)擊可查看大圖）“我想在我的網(wǎng)頁上做個(gè)三角形不過Google看起來沒給我什么好的答案?！薄安?，你要用CSS triangle 作為關(guān)鍵字去Google?？匆娏藳]？這很簡單?！薄安缓靡馑糃SS和三角形有什么關(guān)系？”對(duì)話記錄通常到此嘎然而止，或者是到“CSS就是你用來修飾你的HTML的東西?！保◤倪@些交流過程中我總結(jié)出一個(gè)結(jié)論：程序猿們總是在比著看誰能把最多的事情稱為“簡單的”）每次對(duì)話完之后，我都覺得自己真是極品的廢物。不過我后來發(fā)現(xiàn)了如何用一個(gè)div（那玩意代表啥東西？）和幾行CSS來做出一個(gè)三角形形狀，還有一些具有很酷的變換顏色效果的網(wǎng)站，可以復(fù)制下來做我的三角形圖案。I我知道你現(xiàn)在肯定很好奇我（這么一個(gè)編程小白）是怎么拼湊出這些來的。好吧，這里就是我的HTML的概貌：1234567891011121314151617 .我要悲哀地告訴你們，下面還有165行類似的東西，另外配套的JavaScript代碼也是一樣重疊起來的，它就是個(gè)平行四邊形。我后來又知道了有一種叫jQuery的東西，我可以用它的“API”里某個(gè)叫“animate”的東西來逐步改變我的三角形的各種屬性。我發(fā)現(xiàn)如果我調(diào)用一次$(#something).animate( opacity: 0 )就會(huì)讓一個(gè)三角形消失。在我的頭腦中覺得，如果我想讓我的20行三角形一個(gè)個(gè)地消失，我需要把這樣的代碼寫上20遍，這是符合邏輯的。通過拷貝和粘貼內(nèi)容到JavaScript文件里的起始位置的方式，我還“ imported | 導(dǎo)入”了jQuery。我曾經(jīng)在其他的網(wǎng)頁上看見它在不同的文件里，但我決定不管是否合理，也要把我所有的JavaScript都放到一個(gè)文件里。如果我打算自欺欺人，我可以說我選擇了最優(yōu)化的編程方式：用最難的風(fēng)格。1234567891011121314151617181920212223242526272829303132333435363738394041$(.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í)西班牙語課本里常見的印加文化的灌溉系統(tǒng)。這些代碼是有效的，我在Google上也沒看到誰說這些代碼錯(cuò)的一塌糊涂，或者說任何看到我代碼的程序員都會(huì)永遠(yuǎn)禁止我和我的子孫接近互聯(lián)網(wǎng)。等到有個(gè)真正的軟件工程師來看我的三角形代碼的時(shí)候，我已經(jīng)看過足夠多有關(guān)SICP（計(jì)算機(jī)程序的構(gòu)造和解釋）材料并意識(shí)到我的代碼既恐怖又可怕。“不過，初學(xué)者總是會(huì)犯這樣的錯(cuò)誤，對(duì)吧？”我窘迫地試探著問道?！安?，程序猿是不會(huì)干這種事的?！彼共皇峭诳嗟目跉?。我當(dāng)時(shí)就想把話題引到分子和細(xì)胞生物學(xué)上去。不過他隨后又補(bǔ)充說：“沒有哪個(gè)程序猿會(huì)寫出這樣的代碼，因?yàn)樗麄兏揪蜎]有那個(gè)耐心。”不管他的第二段話是不是肺腑之言，我對(duì)整個(gè)事情的感覺好了一些。不管怎樣，后來我還是羞愧地把我的三角形刨坑埋了。隨著時(shí)間一天天一月月地過去，它們最終成為愚昧的起步之旅。“嗨，你這倆鐘頭都花在調(diào)試你的CoffeeScript代碼里的空白字符問題了？想當(dāng)年我花了一天時(shí)間來寫21個(gè)嵌套的回調(diào)和200行相同的HTML。”這個(gè)故事通常會(huì)產(chǎn)生一種自我調(diào)侃的搞笑效果。我認(rèn)識(shí)到，自三角形項(xiàng)目以來，我寫的每一行代碼都只會(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)年毫無概念的（當(dāng)然了，我也只能犧牲了老版本里明顯的優(yōu)點(diǎn)）。我保持了最初的設(shè)計(jì)精髓，即用div生成三角形，用jQuery來做動(dòng)畫效果。既然我快要離開安全、綠樹環(huán)抱的伯克利的圍墻，進(jìn)入真實(shí)的世界（也希望使我過去對(duì)代碼的犯罪記錄安息），我希望給初出茅廬的發(fā)明家和害羞的創(chuàng)作者，留下我的三角形中一到三個(gè)角作為遺產(chǎn)。編程很難。絕不要因?yàn)槟悴蝗缒闩赃叺娜松朴凇叭oogle一下”就心情沮喪。絕不要讓那些言必稱黑客馬拉松的假行家忽悠你，讓你放棄做出下一個(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í)方法就是