21個嵌套回調.doc

軟件英才網 軟件行業(yè)馳名招聘網站一位非計算機專業(yè)程序員的故事：21個嵌套回調大約21個月之前，那時候我還不知道什么是回調（callback），我建立了我的第一個網頁。為了紀念這21個嵌套的回調，我覺得現在是回顧這個網頁的時候了。在那時我有個可能有點老套的習慣，就是在人文課程或者家庭旅游的時候在筆記本上信手涂鴉一番。在某次暑期旅行中我創(chuàng)作了一組我自己覺得超酷的三角形圖案。于是我覺得把它做成電子版是在那個夏天值得下功夫的事情。我還憧憬著這套東西讓我在Tumblr上的形象顯得超酷無比。我開始找了些計算機專業(yè)的朋友們，問他們是否可以給我指點一下方向。我得到的大把的答復可以總結為“google一下”，潛臺詞就是：“如果你google完了還不知道咋弄，你就是低能兒?！保c擊可查看大圖）“我想在我的網頁上做個三角形不過Google看起來沒給我什么好的答案?！薄安?，你要用CSS triangle 作為關鍵字去Google。看見了沒？這很簡單?！薄安缓靡馑糃SS和三角形有什么關系？”對話記錄通常到此嘎然而止，或者是到“CSS就是你用來修飾你的HTML的東西?！保◤倪@些交流過程中我總結出一個結論：程序猿們總是在比著看誰能把最多的事情稱為“簡單的”）每次對話完之后，我都覺得自己真是極品的廢物。不過我后來發(fā)現了如何用一個div（那玩意代表啥東西？）和幾行CSS來做出一個三角形形狀，還有一些具有很酷的變換顏色效果的網站，可以復制下來做我的三角形圖案。I我知道你現在肯定很好奇我（這么一個編程小白）是怎么拼湊出這些來的。好吧，這里就是我的HTML的概貌：1234567891011121314151617 .我要悲哀地告訴你們，下面還有165行類似的東西，另外配套的JavaScript代碼也是一樣重疊起來的，它就是個平行四邊形。我后來又知道了有一種叫jQuery的東西，我可以用它的“API”里某個叫“animate”的東西來逐步改變我的三角形的各種屬性。我發(fā)現如果我調用一次$(#something).animate( opacity: 0 )就會讓一個三角形消失。在我的頭腦中覺得，如果我想讓我的20行三角形一個個地消失，我需要把這樣的代碼寫上20遍，這是符合邏輯的。通過拷貝和粘貼內容到JavaScript文件里的起始位置的方式，我還“ imported | 導入”了jQuery。我曾經在其他的網頁上看見它在不同的文件里，但我決定不管是否合理，也要把我所有的JavaScript都放到一個文件里。如果我打算自欺欺人，我可以說我選擇了最優(yōu)化的編程方式：用最難的風格。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)你可以在這里看到完整的源代碼和最終產品。（我甚至經歷了對齊每一個回調方法的縮進的麻煩，這在Windows Notepad上可是不容小覷的絕技）注意以上JavaScript的結尾是一套壯觀的 )。當看到那些三角形按我的意圖消失又出現時，我真是太高興了。代碼本身就像壯觀的ASCII瀑布，或者是高級西班牙語課本里常見的印加文化的灌溉系統(tǒng)。這些代碼是有效的，我在Google上也沒看到誰說這些代碼錯的一塌糊涂，或者說任何看到我代碼的程序員都會永遠禁止我和我的子孫接近互聯網。等到有個真正的軟件工程師來看我的三角形代碼的時候，我已經看過足夠多有關SICP（計算機程序的構造和解釋）材料并意識到我的代碼既恐怖又可怕?！安贿^，初學者總是會犯這樣的錯誤，對吧？”我窘迫地試探著問道?！安?，程序猿是不會干這種事的?！彼共皇峭诳嗟目跉狻Ｎ耶敃r就想把話題引到分子和細胞生物學上去。不過他隨后又補充說：“沒有哪個程序猿會寫出這樣的代碼，因為他們根本就沒有那個耐心?！辈还芩牡诙卧捠遣皇欠胃?，我對整個事情的感覺好了一些。不管怎樣，后來我還是羞愧地把我的三角形刨坑埋了。隨著時間一天天一月月地過去，它們最終成為愚昧的起步之旅?！班?，你這倆鐘頭都花在調試你的CoffeeScript代碼里的空白字符問題了？想當年我花了一天時間來寫21個嵌套的回調和200行相同的HTML?！边@個故事通常會產生一種自我調侃的搞笑效果。我認識到，自三角形項目以來，我寫的每一行代碼都只會讓我在“google一下”、調試代碼，和五花八門的編程主題等方面更強，而這都是因為我親身去經歷了每一個看似愚蠢的項目。上個星期我花了點時間快速重寫了我的三角形。你可以在這里看到它，在響應性和動態(tài)生成效果上令人自豪，這些是我在當年毫無概念的（當然了，我也只能犧牲了老版本里明顯的優(yōu)點）。我保持了最初的設計精髓，即用div生成三角形，用jQuery來做動畫效果。既然我快要離開安全、綠樹環(huán)抱的伯克利的圍墻，進入真實的世界（也希望使我過去對代碼的犯罪記錄安息），我希望給初出茅廬的發(fā)明家和害羞的創(chuàng)作者，留下我的三角形中一到三個角作為遺產。編程很難。絕不要因為你不如你旁邊的人善于“去Google一下”就心情沮喪。絕不要讓那些言必稱黑客馬拉松的假行家忽悠你，讓你放棄做出下一個貓咪的微博或者公共廁所點評網的機會。就算是最蠢的點子（例如嘗試做多邊形消失和重現的動畫）都會幫助你作為一個程序猿不斷提高。學習編程很大程度上是學會如何學習，而最好的學習方法就是