專題名：Web重構之道

大漠：大家下午好。壓力很大，也很緊張，第一次來QCon這種高大上的會議分享topic，加上前面的嘉賓都是高大上的話題，現在帶著大家回到屌絲的話題，有點像是砸點場子。我叫大漠，有人經常跟我說，“大漠孤煙直”。鞋城，國語“最好”的前端，大家要是聽我的國語實在困難，因為從小語文沒寫好，考試老是不及格。手淘最丑的“偽前端”，除了阿里，我就是最丑的前端了。為什么是偽前端？我沒有做調查，我自己猜想，阿里前端不懂JS的可能只能找到我了，因為我懂JS，我自己也常說我不是前端，平時我喜歡Sass，2011年做了一個前端網站，時不時記一點自己的筆記，因為人笨，又不會其他的，只能多吃點苦，然后記下一些不懂的，做事的時候不要去求人。

2014年寫了一本書，也誤了不少子弟。今天的主題是“Web的重構之道”。我對這個“重構”是有多愛？其實我也恨它，想做別的，做不了，韓老師讓我寫一個JS，憋一天也憋不出一個代碼，只能做個。我分三個部分講一下我自己的切身體會。

前世。以前的重構，或者以前做Web網頁的人，對重構是怎樣一個看法？然后今生，你們玩高大上的時候還有多少人在苦逼的切圖？然后未來，像我這樣的偽前端，將來要怎樣生存，或者有怎樣的思考？
? ? 這張網頁圖，2003年的淘寶，可能這里基本上沒有沒幾個人看到這張頁面。在這樣的淘寶大家可以看出來，一個很大的特色，整個網頁除了圖片、文本鏈接、地址沒別的了，flash還會來點動畫的感覺，我們這個根本什么都沒有。頂多就是點個圖片，會告訴你去另外一個，又回到這樣的。

還有就是頂部文字從左往右不停地來回，還有就是link標簽一閃一閃，這就是動畫，給我們網頁增添一點不同的色彩。那這個時候，也沒有重構一說，大家給我們這群人定義的標簽就是“網頁設計師”。這其實還是很高大上的稱謂。那個時候讀網頁設計師，拿的也是高薪。然后就是美工，說什么設計師，就是一個美工，拿幾張圖拼成一個頁面，就成網頁設計師了？Web在我們這個時代還不是很看重。一個企業問他有沒有網頁，要什么網頁？我業績很好。

然后慢慢的，2004年有一本《網站重構》的翻譯書在中國大陸出現，這本書出來就不得了了，整個前端都發生了很大的一個變化。那時候我記得淘寶UED（音）我們要做“地球最優秀的前端”。這場革命給我們帶來一個變化，“21世紀最大的IT冤案”。為什么說是21世紀最大的IT冤案？只要2004年以后看了這本書的同學都說，看到網頁上只要有推廣標簽，就說這個不行，做的網頁是垃圾。不符合W3C（音）規范的標準，其實這本書從來也沒有說網頁出現標簽就是垃圾網頁，就是不符合標準規范的。所以被稱為21世紀最大的IT冤案。

第二就是“災難性的div+css泛濫”。出現最多的詞就是div，大家覺得我會div，我很高大上，整個頁面下來，除了div，就是div了，什么P標簽，這些基本找不到，這個時候就成了一個泛濫。包括很多人去面試，說有這樣一個故事，有一個面試官面試一個新同學，問他，同學你來我團隊打算做什么？他很自信地說，我來你們公司把你們所有的網頁，帶標簽的網頁換成div+css的。面試官很納悶，他跟同學說，實在不好意思，我現在網頁都改成了div跟css，怎么辦？面試者就不吭聲了。這個時候只要懂div的，都覺得是懂Web的，然后很標準規范的，都是高大上的。

其實慢慢的，隨著時間的變更，我們貼上的標簽不是美工了，換了，切圖、頁面仔。可能廣東呆過的同學會非常清楚，因為廣州那邊的人喜歡把男孩子稱作“仔”，頁面仔是從那邊來的。現在就是說沒“錢”途，因為只寫這個，絕對沒有前途，工資低。不就是div+css嘛，誰都會，一本書讀一個星期誰也會寫。然后就造成了我們入門門檻非常低。

我經歷這些的時候在想，我們的Web重構到底是什么？它的價值又會是什么？自從2004年以后做重構的，懂的就是這兩個，看家本領，也是吃飯的飯碗。最主要的工作，就是把PSD轉成HTML+css，我不說div。還有一個最大的任務，那時候我們引以為豪的，IE5、IE5.5、6我們都能把它滅了。這是我們最牛的。有個老外朋友跟我說，我們國外這種IE6做兼容的找不到了，找了一個客戶問，我客戶是中國市場，你得給我做兼容IE6的，不然客戶沒辦法看，然后屁顛屁顛找了一圈，整不了，最后找了一個外包，中國中國小伙子給他做IE6兼容。

這個時候可能我們很多重構工程師覺得，我的工作職責，就是寫HTML，寫css，然后最大的任務就是把設計師的PSD設計圖轉變成Web頁面。這份工作說實話，只做一天兩天會覺得很有意思，一動手，馬上瀏覽器就能看到了。再加上后面css3玩得溜一點，加點修飾，還能做動漫，就覺得很有新鮮感。但是天天做，設計師搞了四天的設計圖，說重構，明天就要，就傻眼了。設計四天，重構搞一天，多不公平？然后加班。不知道有沒有攜程的同事，當年攜程就是這樣，不停馬不停蹄的，設計師來個設計圖，大漠，明天早上要，然后就傻眼了。

其實我在思考，我們重構不只是說我把設計圖99.9%的還原，就叫重構。我覺得重構是一種修改。為什么是一種修改？大家平時工作有沒有這樣一個感覺，你有多少的頁面是從頭到尾從設計圖切出來的？特別是大公司、大團隊，可能你有自己的產品，很多時候交付會說你給我搞一個導航條，比如今天中秋節了，我要上個嫦娥的圖，好，就只做這一點?？嗑涂嘣谕獍?#xff0c;沒自己的產品，他天天做的事情就是怎么把PSD轉換成頁面。我們做這種修改的時候，就要考慮我修改的過程，以前的代碼結構是不是合理？如果不合理，就要改了。這個也是一種重構。

第二種，內部結構更容易。為什么這么說？可能你上一任寫HTML+css，是拿了兩本書學了兩個月就進公司做了兩個頁面，結果被你老大覺得可能不行，又招你這個大神來負責，然后一看，這個代碼簡直無法直視的時候，你讓這個代碼變得更簡單，這個過程也是重構。

第三，有節制的整理代碼。并不是搞得最整潔就是優秀的代碼。多套一個div，這個人肯定沒有學過重構，明顯是不要的，怎么多出一個？真正合理不合理，不是說越少的結構就是越合理的，應該根據自己的業務、需求做平衡。
? ? 第四，使bug產生率最小化。做過IE6或者7兼容的同學很有感觸，5fox（音）這種高大上的瀏覽器一看心里很舒暢，測IED（音）版本的時候就苦逼了，不停加個下劃線，很多人第一想到的，是加這種bug，根本沒有想到代碼是不是出現問題。

Web重構到底是什么？是一種思想。因為做重構工程，活簡單，我們得有想法，把它做好。是理念，我們追求的不僅僅是還原，我們要追求更多，就是怎樣還原到讓人家更舒服。專業的人做專業的事，可能前端有擅長HTML的，也有擅長JS的，這個時候就出現了分離的東西。在目前攜程還有很多團隊只寫HTML跟css。

其實也是一種很累的分工優化，誰擅長做什么就做什么，第一做起來順手，成本也低，然后你叫一個擅長JS的人弄個HTML、css，結果也寫得不好，bug也出來了，叫他調也調不來，所以這個時候分工還是有好處的。我覺得是技術、數據、情懷、人文為主導的交互優化。雖然是屌絲，還是要有點追求。大家會說，不就是切圖的嗎？我們不能說自己就是個切圖的，這樣你就永遠是個切圖的，我們應該破繭而出，突破自我。

以前我們做重構，工具你要會用，命令也要會敲，不然也說不過去，要跟交付設計師討論這樣交付是否合理，搞不好哪天你就升級了，不再是屌絲重構，而是變成交付設計師。還有用研，以前一個按鈕，上去以后給你變個顏色，已經有點感覺了，現在看一些高大上的，點了以后會給你轉個圈圈，數據提交完以后給你出現一個勾勾，表示已經提交完了，這個我們也是可以做的。所以我們不能局限在自己的小范圍里面。

可能有人說你站在臺上吹牛。那在手淘這一個高大上的團隊，怎么做重構？接下來我講一講我在手淘做重構的過程。
? 這個頁面不只是淘寶、手淘里面有，估計只要做Web的，都碰到這個東西。相信你們產品里也有這個東西，不同的產品、不同的業務線、不同的頁面，都有這個東西。這個怎么做？有什么我們不知道的？從PPT上明顯的可以看到，起碼左邊的圖片不一樣，有圓的、方的、大的、小的，這些是不確定的因素。右邊的內容，有單行的、多行的，標題有頂不對齊的，有集中的，還有就是內容不固定，寬度不固定，再加上我們現在要面對的設備也是很多種。今天安卓明天iPhone，這個屏幕寬度都不一樣。那你怎樣做這件事情？

黑了，說這么優秀的團隊也寫出這么差的代碼來？A工程師覺得上面寫也是沒有問題的，然后B工程師覺得下面寫也是OK的，所以有6種樣式。做重構的人，可能他會覺得沒辦法接受。我們仔細看，整個可以分為三個部分，整個結構這個時候已經非常清晰，我常把這種叫做重構對象。左邊、右邊的圖，藍色的我稱作媒體對象，就是?？吹降念^像或者人頭，甚至產品列表里的產品片，右邊圖中間的那個紅色的，當作一個主體內容。這個時候應該能想象得到這樣一個結構，是不是會比較清晰？

這個右邊有按鈕，這個時候在中間再加一個這樣的，可能做到這個時候，大家會覺得已經能滿足很多人的需求了，其實再仔細想想，是不是真的能滿足？比如說我頭像要跟標題垂直、居中、對齊，這個時候我們這種方法還能不能實現？作為一個專業的重構，你就要考慮一下你這個玩意丟出去以后，人家用起來能不能遂心應手？

個性化的樣式怎么處理？第一個是頂部對齊，第二個居中，第三個又多出一個東西，這個時候又開始犯傻了。我已經被這個折磨了很長時間。這個時候我想了一個辦法，不同的產品，可能有細微化的樣式差別，那我根據產品，對整個布局結構我不造成任何影響，但是要達到細微化的東西，可以靈活控制它。

接下來一個問題，其實它擴展性還不夠強大，我有時候有按鈕，有時候沒有，怎么辦？要不要動結構？或者添加其他的東西，能不能實現？或者頂端對齊、居中對齊、底部對齊，有沒有更好的方法能實現？其實有。左邊這個Flexbox，是個高大上的東西，現在有很多團隊也在用，不管是移動端還是PC都有人在用。右邊是一個Flag ?Object，這個時候其實從這個圖上來看，沒有太大區別，Flexbox我不說，因為這個這個東西很常見，我說一下Flag ?Object，這個東西很常見，

但是大家不會往這上面想。為什么不往這上面想？因為從前面走過來的人，都已經被兼容性給毒害了，就會想到當年IE6不支持不兼容。其實事實不是這樣？目前我們多少人還在兼容IE低版本？我估計已經很少了。而且這種東西在移動端上用，根本不用考慮它兼容不兼容的問題。這個屬性是不會存在什么兼容性問題的。那這個時候我們要控制，擴展它右邊有沒有按鈕，是不是頂端對齊還是居中對齊，就很好控制。因為以前最早做Web，是用表格，會操作表格就會操作這個東西，是不是更好一些。

繼續深入講，前面那部分工作做的還是以前重構做的事情，不管你結構怎么變、優化，還是沖過做的事情。那我們有沒有考慮，我們略思考一點工程上的事情，也就是說，雖然我不懂工程，但我能參與、我能思考，哪怕我不做那么高大上的工程，我只對我們自己的css做工程上的思考，可不可以？我簡單把剛才的示例一下，這個文件只負責布局這部分的東西，然后下面是皮膚的，商品的或者卡片的，不同樣式的時候，可以堆在這里面，或者往往下面下面繼續創建文件。這個時候可能很多人會納悶，你這不是會增加很多請求嗎？

看到后面的文件后綴是.scss，而不是.css，這就涉及到Saas的問題，了解Saas的人會知道這樣做是不會增加請求的。所以我這里僅僅提供提供一種思路，這種思路是我自己親身經歷過的一件事情，接下來我想，大家都講安格拉（英，音），real ?JS（音），對一個不懂JS的人來說，這是一件既興奮又痛苦的事情。為什么這么說？你看懂的人都在玩那種高大上的東西，而且能做出很多有意思的東西，不懂的人看著他，就只認識那幾個字母，里面能干嘛就不懂了。然后很多人可能會質疑，你不能學嗎？學是可以學，學的過程我們就不說了，這是一個長遠的話題。

我想有沒有一個萬能的標簽，能把剛才我們的事情做出來？說到這個時候可能很多人會想到谷歌的坡里悶特（英，音），就是老早出的自定義Web組件的東西。這個時候我們韓老師把谷歌那個玩意兒改良了一下，說不懂JS不怕，就用我改良的這個東西，分分鐘，好，我就拿著韓老師改良的坡里悶特（英，音），寫了一個這樣的，我感覺是以前高大上了，然后我問，我這樣寫，第二個不一樣的我怎么辦？等于又要創建一個文件、一個項目？然后韓老師就郁悶了，這個時候我們一起探索這個問題，也就是說，粒子化的東西我們如何管理？特別是淘寶，最常見的就是瀏覽的時候看到底下價格、優評、點贊的數量、評論數。只做一個行業還好一點，天天長得一樣。

手淘面對的，就是今天這個人只有標題、價格，明天那個人要在這個基礎上增加一個按鈕，再增加一個點贊的，還要再增加降價的，這個時候我又傻眼了。所以我一直沒明白，這種粒子化的東西要怎么處理？針對這種話題我找過張迎龍（音）大師討論過，他說，我們分而治之，我就只懂了這幾個字，然后真正含義沒有理解。我就說，要找個時間去跟他一起探討一下？分而治之，怎么解決粒子化的東西？我們不僅碰到這種頭疼的事情，比如現在大家在用安格拉（音），view ?JS（音），包括VACT（音），對達峰來說他能接受把css都插到JS，插到一個地方去，但是對于我這樣的人，說實話就感覺我一下子好不容易分清楚了，又一下子回到了最早的，說css要單獨一個文件，JS單獨一個文件，HTML一個文件，這下又回到了最初。又是一個挑戰，對這個問題我思考很久，到現在還沒有想明白。

就算在這個基礎上做一點點修改，就能完成我需要的效果，我當初就把這種定義為組件，我想不斷的積累，然后也能去重復使用、可以擴展、然后可以維護。

? ? 其實還有一種，就是可以定制。怎么定制？粒子化的東西不好控制。我們阿里的人做了一個這個，把我做的人跟他做的東西結合在一起，因為還沒有成功，我拖過去，就會在APP里面做出這樣一個頁面，然后我們阿里知治（音）只要點一個按鈕，就可以發布到我們H5的網站上，比如要添加價格，上面的東西怎么改？我們這個還在做，點擊它，可以改標題、文字、樣式，然后保存一下就發布到線上。這是我們現在還在做的。

我自己把這種理解為“可定制”，就是我們做任何東西，除了能復用、擴展、好維護之外，還要方便人家能定制。就像達峰說的，“讓沒有做過網頁的人也能做網頁”，其實我們這個也是。我們這個是針對運營的人，天天找我們阿里知治（音），說給做一個頁面，阿里就說怎么又長得一樣？就想出歪注意，當初里面有很多東西，自己選，覺得不順眼改一改，就不用來煩我們了。這樣就能愉快地玩耍。

這是我在手淘團隊思考的一些事情。我不再停留在攜程那個時代，我只要想著辦法把PSD轉換出來，就OK了?；蛘哒f，我能解決一些bug問題，寫一點css3，就是重構很牛逼的人，其實還差遠了。我覺得重構工程師不能把自己局限于在這里面。
? ? 其實重構能做的事情還有很多。比如性能優化，這個圖是我們淘金幣優化前跟優化的的頁面效果圖，看這個圖，大家反正看到的都是一張圖片，也不知道你優化了什么？我們來看一下，這是優化前的數據，這是優化后的數據，在整個優化的過程中，做了一些什么事情？其實重構也能做很多事情，你圖片怎么處理？怎么優化？大概有沒有聽過飆叔講過一個經典的故事？自從我聽到那個故事以后，我對飆叔無比崇拜，他能把一張圖、里面的東西摳出來，通過兩個div疊加起來。很多人做法，就是就要怕差一張圖，你要用就用，不用拉倒。飆叔跟老板算這筆錢，我給你優化了圖片，省了多少流量，在騰訊這樣一個“大腿”上省了多少錢，老板，省下的這些錢，就是我給你創造的價值。

我想說的就是，很多時候很多人會思考重構這個行業里有沒有自己的價值？這個價值你要說怎么說，如果情懷高一點，說是為了理想、夢想做，情懷低一點，就是為了錢，老板我給你省了多少錢，你給我多發點獎金？怎么想省錢，幫老板省錢，那就是你存在的價值，你要想的事情。左邊跟右邊，我們優化以后，給我們業務帶來的價值。引導支付幾乎增加了一半，然后GMV可想而知。很多人想，怎么優化？

優化這個話題很大，要展開說可能也要花很長時間。網上或者書上，有谷歌的一些優化，這個可能提供給我們的是做一個參考，那真正優化的過程，哪怕是一個很小的點，都能改變你整個頁面或者整個項目的性能。這個“點”，就靠你自己怎么監控、測試。然后在監控、測試整個的過程里，測試永遠都是一個假數據，然后我們內部好就好在在一個優秀的團隊，有很強大的工具，我們可以隨時拉到線上數據，能分析出多了什么樣的請求、哪個請求多花了時間。就像雙十一之前我們做的，我們在不同的網絡下都是email能打開。

通過這樣一個事情，我想告訴大家，價值是要自己去尋找的，不是說你坐在那里或者吹兩下牛就有你的價值在了。
? ? “未來是美好的，道路是曲折的，現實是殘酷的”。像我這種就已經面臨很大的殘酷了，不懂JS，韓老師不要我，我估計我出去了就沒人要了。我得回家種地去了。謝謝大家！

提問環節：提問：在一家小公司，老板要你做一個運營系統，人家會給你PSD嗎？不會。圖都不給你切，人工做，一個人搞定。怎么辦？沒有圖片，然后做出來，老板說怎么回事？壓根看不了。這種情況下其實很多小公司會面臨這樣的情況，沒有美工、沒有所謂的設計師，只有一個工程師Java一搞，css一搞，全能的，但是這種情況下，對我們工程師來說就是更挫逼（音）的一件事情。有沒有一種辦法，對我們這種全能工程師來說有一種更好的方式來做這些自己公司用的管理網站、管理系統？最近谷歌出了一個外爾科莫樂（音）的框架，讓我看到了一個出路。到底該怎么解決這個問題？如何把css和HTML干掉，只有JS或者Java可以搞定？

大漠：按你現在的描述，你可能比我更痛苦一點。其實你這個問題也對我來說很好解決，因為你這是一個內部系統，然后有一個PRD，最起碼你能考慮斯他伯（音），這是一個很好的東西，然后foundation這些東西，也就是說你根本不用擔心設計的樣式怎么樣，你只要跟著套路結合PRD，出來的效果就不會差。我就不信你老板看了你這樣一個類似于推特風格的內部管理系統，還會說你做出來的東西挫逼，然后你把推特的頁面打開給老板看，你看，推特都長這樣。

提問：現在我們遇到一個問題，現在有個網站，按照以前的說罵，都是通過電腦瀏覽器的方式訪問我們網站，但是現在隨著iPhone、iPad逐步流行起來，我們網站需要向移動終端支持。也是牽扯Web頁面的重構，包括HTML、css。不知道能不能給我們一些建議？有沒有好的方式最好地兼容現在的電腦版的網頁

大漠：這看你自己的產品定位。如果你產品不涉及要有一些交易之類的，就是純展示性的，而且產品不是很復雜，可以考慮響應式設計。就是在這個基礎上你能實現多終端的兼容。如果要給用戶更好的體驗，那我覺得你想只通過一套代碼實現，難度還是很大，甚至不大可能。

總結

以上是生活随笔為你收集整理的Web重构之道 大漠的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。