大約21個月之前,那時候我還不知道什麼是回撥(callback),我建立了我的第一個網頁。為了紀念這21個巢狀的回撥,我覺得現在是回顧這個網頁的時候了。
在那時我有個可能有點老套的習慣,就是在人文課程或者家庭旅遊的時候在筆記本上信手塗鴉一番。在某次暑期旅行中我創作了一組我自己覺得超酷的三角形圖案。於是我覺得把它做成電子版是在那個夏天值得下功夫的事情。我還憧憬著這套東西讓我在Tumblr上的形象顯得超酷無比。
我開始找了些計算機專業的朋友們,問他們是否可以給我指點一下方向。我得到的大把的答覆可以總結為“google一下”,潛臺詞就是:“如果你google完了還不知道咋弄,你就是低能兒。”
(點選可檢視大圖)
“我想在我的網頁上做個三角形…不過Google看起來沒給我什麼好的答案。”
“不,你要用‘CSS triangle’ 作為關鍵字去Google。看見了沒?這很簡單。”
“不好意思…CSS和三角形有什麼關係?”
對話記錄通常到此嘎然而止,或者是到“CSS就是你用來修飾你的HTML的東西。”
(從這些交流過程中我總結出一個結論:程式猿們總是在比著看誰能把最多的事情稱為“簡單的”)
每次對話完之後,我都覺得自己真是極品的廢物。不過我後來發現瞭如何用一個div(那玩意代表啥東西?)和幾行CSS來做出一個三角形形狀,還有一些具有很酷的變換顏色效果的網站,可以複製下來做我的三角形圖案。
I我知道你現在肯定很好奇我(這麼一個程式設計小白)是怎麼拼湊出這些來的。
好吧,這裡就是我的HTML的概貌:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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都放到一個檔案裡。
如果我打算自欺欺人,我可以說我選擇了最優化的程式設計方式:用最難的風格。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
$(".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個巢狀回撥。
打賞支援我翻譯更多好文章,謝謝!
打賞譯者
打賞支援我翻譯更多好文章,謝謝!
任選一種支付方式