新聞中心
大約21個月之前,那時候我還不知道什么是回調(diào)(callback),我建立了我的***個網(wǎng)頁。為了紀念這21個嵌套的回調(diào),我覺得現(xiàn)在是回顧這個網(wǎng)頁的時候了。

創(chuàng)新互聯(lián)建站專注骨干網(wǎng)絡(luò)服務(wù)器租用10年,服務(wù)更有保障!服務(wù)器租用,德陽服務(wù)器托管 成都服務(wù)器租用,成都服務(wù)器托管,骨干網(wǎng)絡(luò)帶寬,享受低延遲,高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。
在那時我有個可能有點老套的習慣,就是在人文課程或者家庭旅游的時候在筆記本上信手涂鴉一番。在某次暑期旅行中我創(chuàng)作了一組我自己覺得超酷的三角形圖案。于是我覺得把它做成電子版是在那個夏天值得下功夫的事情。我還憧憬著這套東西讓我在Tumblr上的形象顯得超酷無比。
我開始找了些計算機專業(yè)的朋友們,問他們是否可以給我指點一下方向。我得到的大把的答復(fù)可以總結(jié)為“google一下”,潛臺詞就是:“如果你google完了還不知道咋弄,你就是低能兒?!?/p>
“我想在我的網(wǎng)頁上做個三角形…不過Google看起來沒給我什么好的答案?!?/p>
“不,你要用‘CSS triangle’ 作為關(guān)鍵字去Google??匆娏藳]?這很簡單?!?/p>
“不好意思…CSS和三角形有什么關(guān)系?”
對話記錄通常到此嘎然而止,或者是到“CSS就是你用來修飾你的HTML的東西?!?/p>
(從這些交流過程中我總結(jié)出一個結(jié)論:程序猿們總是在比著看誰能把最多的事情稱為“簡單的”)
每次對話完之后,我都覺得自己真是***的廢物。不過我后來發(fā)現(xiàn)了如何用一個div(那玩意代表啥東西?)和幾行CSS來做出一個三角形形狀,還有一些具有很酷的變換顏色效果的網(wǎng)站,可以復(fù)制下來做我的三角形圖案。
I我知道你現(xiàn)在肯定很好奇我(這么一個編程小白)是怎么拼湊出這些來的。
好吧,這里就是我的HTML的概貌:
- ...
我要悲哀地告訴你們,下面還有165行類似的東西,另外配套的JavaScript代碼也是一樣重疊起來的,它就是個平行四邊形。
我后來又知道了有一種叫jQuery的東西,我可以用它的“API”里某個叫“animate”的東西來逐步改變我的三角形的各種屬性。我發(fā)現(xiàn)如果我調(diào)用一次$(‘#something’).animate({ ‘opacity’: ’0′ })就會讓一個三角形消失。在我的頭腦中覺得,如果我想讓我的20行三角形一個個地消失,我需要把這樣的代碼寫上20遍,這是符合邏輯的。
通過拷貝和粘貼內(nèi)容到JavaScript文件里的起始位置的方式,我還“ imported | 導(dǎo)入”了jQuery。我曾經(jīng)在其他的網(wǎng)頁上看見它在不同的文件里,但我決定不管是否合理,也要把我所有的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)})})})})})})})})})})})})})})})})}
你可以在這里看到完整的源代碼和最終產(chǎn)品。
(我甚至經(jīng)歷了對齊每一個回調(diào)方法的縮進的麻煩,這在Windows Notepad上可是不容小覷的絕技)
注意以上JavaScript的結(jié)尾是一套壯觀的 )})})})})})})})})})})})})})})})})})})})。當看到那些三角形按我的意圖消失又出現(xiàn)時,我真是太高興了。代碼本身就像壯觀的ASCII瀑布,或者是高級西班牙語課本里常見的印加文化的灌溉系統(tǒng)。這些代碼是有效的,我在Google上也沒看到誰說這些代碼錯的一塌糊涂,或者說任何看到我代碼的程序員都會永遠禁止我和我的子孫接近互聯(lián)網(wǎng)。
等到有個真正的軟件工程師來看我的三角形代碼的時候,我已經(jīng)看過足夠多有關(guān)SICP(計算機程序的構(gòu)造和解釋)材料并意識到我的代碼既恐怖又可怕。“不過,初學(xué)者總是會犯這樣的錯誤,對吧?”我窘迫地試探著問道。
“不,程序猿是不會干這種事的?!彼共皇峭诳嗟目跉?。我當時就想把話題引到分子和細胞生物學(xué)上去。不過他隨后又補充說:“沒有哪個程序猿會寫出這樣的代碼,因為他們根本就沒有那個耐心?!?/p>
不管他的第二段話是不是肺腑之言,我對整個事情的感覺好了一些。
不管怎樣,后來我還是羞愧地把我的三角形刨坑埋了。隨著時間一天天一月月地過去,它們最終成為愚昧的起步之旅?!班耍氵@倆鐘頭都花在調(diào)試你的 CoffeeScript代碼里的空白字符問題了?想當年我花了一天時間來寫21個嵌套的回調(diào)和200行相同的HTML?!边@個故事通常會產(chǎn)生一種自我調(diào)侃的搞笑效果。
我認識到,自三角形項目以來,我寫的每一行代碼都只會讓我在“google一下”、調(diào)試代碼,和五花八門的編程主題等方面更強,而這都是因為我親身去經(jīng)歷了每一個看似愚蠢的項目。
上個星期我花了點時間快速重寫了我的三角形。你可以在這里看到它,在響應(yīng)性和動態(tài)生成效果上令人自豪,這些是我在當年毫無概念的(當然了,我也只能犧牲了老版本里明顯的優(yōu)點)。我保持了最初的設(shè)計精髓,即用div生成三角形,用jQuery來做動畫效果。
既然我快要離開安全、綠樹環(huán)抱的伯克利的圍墻,進入真實的世界(也希望使我過去對代碼的犯罪記錄安息),我希望給初出茅廬的發(fā)明家和害羞的創(chuàng)作者,留下我的三角形中一到三個角作為遺產(chǎn)。
編程很難。絕不要因為你不如你旁邊的人善于“去Google一下”就心情沮喪。絕不要讓那些言必稱黑客馬拉松的假行家忽悠你,讓你放棄做出下一個貓咪的微博或者公共廁所點評網(wǎng)的機會。就算是最蠢的點子(例如嘗試做多邊形消失和重現(xiàn)的動畫)都會幫助你作為一個程序猿不斷提高。學(xué)習編程很大程度上是學(xué)會如何學(xué)習,而***的學(xué)習方法就是去動手做。
歸根結(jié)底,成為一個稱職的程序猿和你贏了多少次黑客馬拉松或者你能想出多少新奇的點子無關(guān),而是和執(zhí)行力、關(guān)注細節(jié)、全心投入、對于創(chuàng)造和突破的熱情有關(guān)。
如果你在對你的代碼感到羞愧,我允許你嘲笑一次我那三角形項目里的21個嵌套回調(diào)。
分享名稱:一位非計算機專業(yè)程序員的21個嵌套回調(diào)
鏈接地址:http://www.5511xx.com/article/copesip.html


咨詢
建站咨詢
