這幾天陸續(xù)收到全棧營同學(xué)的微信，詢問我的參賽作品是如何在短時(shí)間內(nèi)實(shí)現(xiàn)諸多特效的册烈。說實(shí)話弥姻，對(duì)于接觸編程才兩個(gè)月的我來說，被問到這樣的問題真是一百頭草泥馬在心中狂奔睡陪。因?yàn)樵谖铱磥硭律抑徊贿^是抱著勇于試錯(cuò)的心態(tài)玩了一次拼圖游戲。至于這樣的手法入不入流兰迫，就留給大家評(píng)說吧信殊。

1 做好后端是前提

萬丈高樓平地起，房子好不好就看地基穩(wěn)不穩(wěn)汁果。

對(duì)于一個(gè)網(wǎng)站而言涡拘，后端就是整個(gè)網(wǎng)站的地基。所以据德，我用最快的速度根據(jù)教程先把購物網(wǎng)站后端的代碼全部寫好鳄乏，確保符合設(shè)計(jì)之初的User Story跷车。每一個(gè)角色的功能確保都能實(shí)現(xiàn)。并且debug好后確背饕埃可以順利部署到heroku朽缴。這樣才能保證接下去你有信心和余力去寫前端代碼。

2 前端是門臉仲吏，第一印象很重要

想摸著石頭過河不铆，首先得河里有石頭。

作為主程裹唆，在寫前端代碼時(shí)誓斥，我需要做出一個(gè)決策。是"寫"還是“抄”许帐。

我和我的隊(duì)友都是零基礎(chǔ)劳坑，如果是靠一點(diǎn)一點(diǎn)寫，我覺得挑戰(zhàn)很大成畦。學(xué)習(xí)不能用未知解釋未知距芬，因?yàn)樽鳛樾“祝?dāng)時(shí)我甚至連CSS框仔、Javacript的代碼都看不懂拄养。而且自認(rèn)也沒有設(shè)計(jì)的天賦，讓我平地起高樓瘪匿，做夢(mèng)吧跛梗。

另一條路——抄∑迕郑可是，問題又來了漾岳。從哪兒抄？怎么抄粉寞？又是兩眼一抹黑尼荆。好在，春節(jié)時(shí)聽笑來老師講了一堂課，主旨大意就是——學(xué)編程翔悠，coding只占20%野芒。更多需要的是學(xué)習(xí)的能力狞悲，不要做伸手黨妇斤，遇到問題問Google。

于是站超，我花了4天的時(shí)間把w3school上關(guān)于HTML，CSS融求，JAVASCRIPT的教程擼了一遍算撮。像小孩子看圖識(shí)字一樣，一段代碼一段代碼看陷舅。剛開始時(shí)的感覺审洞，是那些代碼認(rèn)識(shí)我，我不認(rèn)識(shí)它們缩赛，更多靠的是圖形記憶撰糠。

其實(shí)做這一步工作，我目的很明確旨袒，就是讓它們?cè)谖掖竽X里先形成短時(shí)記憶术辐，看不懂也沒關(guān)系。

3 選模版就是選一件符合你氣質(zhì)的衣服

突擊完課程必孤，就開始了海選模版的工作⌒讼耄看了很多大型網(wǎng)站的設(shè)計(jì)風(fēng)格赡勘，看著都挺喜歡，用了Google瀏覽器為開發(fā)者設(shè)計(jì)的inspect功能毙替。看完又懵逼了厂画，簡直就是天書映胁。

后來聽Xdite老師說市面上很多程序猿也都是靠抄代碼成長起來的，在編程界坑填，“抄”并不丟人弛姜。于是開始找一些素材網(wǎng)站，我和我的隊(duì)友每人各挑3幅作品苍在，最終敲定我選出的一副攝影題材的素材逼格較高荠商，于是就是它了。

解壓完初肉，生成四個(gè)文件夾饰躲，分別是css，fonts妄壶，images寄狼，js，另外還有一個(gè)html文件伊磺。直覺告訴我此時(shí)我應(yīng)該去雙擊那個(gè)html的文件。果然沒有令我失望，打開網(wǎng)頁那一剎那讓我心中一陣狂喜腋腮，重要的是它是會(huì)動(dòng)的即寡，網(wǎng)頁上那些按鈕和絢爛的特效都是活的，這不正是我期盼已久的效果嘛莺丑。

不過墩蔓，看看也就算了，現(xiàn)在它跟你沒半毛錢關(guān)系昏名。

既然它和其他文件打包在一起阵面，這里面應(yīng)該是藏著某著聯(lián)系样刷。說得更樸實(shí)一些，那些文件夾里的文件拼湊在一起最終的結(jié)果應(yīng)該就是這個(gè)網(wǎng)頁呈現(xiàn)的效果置鼻。

想著想著沃疮，不知為何我又開始興奮起來了，突然想起《奪寶奇兵》邑茄、《古墓麗影》那些奇幻探險(xiǎn)類電影俊啼。主人公不也是偶然得到了一張藏寶圖或是一把神秘的鑰匙，從而開始一段神奇之旅么浮梢。我現(xiàn)在的感覺就是這樣彤路。

4 物以類聚

既然這套模版的作者已經(jīng)將文件分好類洲尊，說明它們是要放到不同的地方，實(shí)現(xiàn)不同的功能的躯护。于是在購物網(wǎng)站的專案中找對(duì)應(yīng)的文件夾丽涩，一句葛優(yōu)的電影臺(tái)詞提醒了我：

奔馳的標(biāo)總不能安在寶馬頭上吧。

于是继准，就把css文件夾中的所有文件全都拖進(jìn)了stytlesheets的文件夾中矮男，把所有js文件夾中的內(nèi)容全都拖進(jìn)了javascripts文件夾中。理由是在這兩個(gè)文件夾內(nèi)分別有最多的同一后綴名的文件避凝，他們應(yīng)該是一伙的眨补。

嫁完大女兒javascripts和二女兒css撑螺，還剩下三姑娘fonts和四姑娘images這兩個(gè)女兒和html這個(gè)兒子。于是在專案JDstore的下一級(jí)目錄public文件夾中順利找到同名文件夾fonts和images甘晤，繼續(xù)許配給他們线婚。

最后的剩男html怎么處理？好像有很多文件的后綴都是html結(jié)尾的漱逸。這個(gè)時(shí)候就不是直接拖動(dòng)了，而要移花接木肮砾，把壓縮包內(nèi)的html代碼復(fù)制黏貼到Atom中的某個(gè)html頁面袋坑。一看內(nèi)容比較豐富，適合做歡迎頁疆柔，于是就將app/view/welcome下的index.html.erb中的內(nèi)容“Hello World镶柱！”果斷替換掉了模叙。

此時(shí)范咨，終于讓每個(gè)文件都找到了各自的歸屬，我突然有種如釋重負(fù)的感覺输吏。就好像你拿著那把神秘的鑰匙終于站在了寶庫門口替蛉，只差最后一個(gè)開鎖的動(dòng)作，就能見證奇跡的誕生它浅。

在終端輸入完rails s镣煮，抓著鼠標(biāo)的那只手謹(jǐn)慎地點(diǎn)擊了一下刷新頁面。天哪——果然讓我失望了镊折，什么都沒有發(fā)生介衔。歡迎頁面奇丑無比炎咖，橫七豎八的圖片夾雜著一堆僵尸按鈕侣签，和那個(gè)原始的html文件相比急迂，顏值不是差一兩個(gè)等級(jí)。

不過勺阐，讓我看到一點(diǎn)希望的是，總體看上去基本的骨架保持的完好十减，只是一只手長，一條腿短由驹，或者有半邊臉不會(huì)笑而已。怎么辦润樱？整容唄。

5 “整容”有捷徑可循

請(qǐng)注意店展，如果你能耐心讀到此處，以下說的這些文字概说，絕對(duì)是干貨。

最看似不合理的地方往往蘊(yùn)藏著轉(zhuǎn)機(jī)放典。

debug一定要先搞定那些能讓你立刻獲得成就感的問題。而某個(gè)功能的“集體陣亡”這種事是最不合理的宴咧。

于是，就按圖索驥地找原因唄。很快就發(fā)現(xiàn)那些html中引用的css的文件路徑都來自同一父目錄：css/兆旬，而我本地的文件路徑明明是assets/，這么想邏輯是合理的，但需要驗(yàn)證我的猜想。于是就將其中一個(gè)css的路徑改成了href="assets/bootstrap.min.css"邮丰，再次刷新頁面，還是沒啥變化笛质。

這一次，我沒有放棄舆吮，我相信我的判斷是對(duì)的。于是，大膽地按下“command+F”開啟查找替換功能与学，將所有文件引用路徑是ccs開頭的全部替換成assets，不僅把css的換掉了卵佛，連引用js文件的路徑也一并替換掉。

再次刷新頁面衙解，天哪——奇跡還是沒有發(fā)生。只不過济锄，這一次一部分功能活過來了，一部分依然是僵尸狀態(tài)角虫。

這個(gè)時(shí)候，我的想法和剛才又有所不同了枫虏，畢竟用了同一種方法處理，有些功能實(shí)現(xiàn)了，有些沒有赞警，那應(yīng)該去別處找答案了世剖。

當(dāng)你盯著鎖頭看的時(shí)候，鑰匙很可能在別的地方蝙场。

于是售滤，我選擇了問Google赐俗，很快便在一堆前人踩過的坑中找到線索。

- 凡是需要用到的javascript功能都要在application.js中用require來呼叫叔扼。

- 凡是需要用到的css功能都需要在application.scss中用@import來呼叫鳍咱。

于是价捧，老老實(shí)實(shí)地將剛才嫁出去的大女兒和二女兒的名字在她們的家譜上都記錄下來。注意挠将，文件名后綴.js和.css是不需要寫的。

第三次刷新網(wǎng)頁内贮，這回奇跡終于發(fā)生了，90%以上的功能和特效都能實(shí)現(xiàn)了竞端。至此，心中的石頭算是落地了。剩下來的一些修修補(bǔ)補(bǔ)工作贱勃，就不在這里一一熬述了族展。你能花耐心看到這里已經(jīng)給予我莫大的鼓勵(lì)。

當(dāng)你看到輸出的效果之后，再返回Atom去查看生成這些結(jié)果的代碼拴还，就會(huì)很容易理解代碼的含義，這個(gè)時(shí)候往往是學(xué)習(xí)效率最高的時(shí)候。你內(nèi)心會(huì)豁然開朗弓摘，時(shí)常會(huì)頓悟韧献，“原來是這個(gè)意思！”

以下，我就拿我的welcome/index.html.erb做個(gè)解讀：

最后，再復(fù)盤一下魔改大賽的心態(tài)和收獲。

- 學(xué)編程一定要勇于試錯(cuò)湖员，如果你有一個(gè)想法突然冒出來，去試試就對(duì)了凳寺，不要怕出錯(cuò)。

- 學(xué)習(xí)就像是拼圖晒奕，一開始不懂沒關(guān)系名斟，硬著頭皮看下去漾橙，下次覺得似曾相識(shí)的時(shí)候再回過頭來再看看蒋腮，說不定就恍然大悟了池摧。

說了那么多干貨膘魄，相信你早已按耐不住绢慢，迫切想知道我的作品到底長成啥樣，哈哈，那就一睹為快吧焰扳。