Web重構之道

前言

Web重構之道是今年十月份參加 上海Qcon全球軟件開發大會 的 新時代的前端 專題的一次分享的主題。這次有幸能跟 @達峰 、 @sofish 、 @桂川 等大神一起同臺分享，感到非常的榮幸，也感到無比的壓力。還好分享已結束，借此機會重新回憶這次大會上自己分享的主題。在此之前我首先要感謝@賀佬給我上臺分享的機會，感謝@winter大大的推薦、建議與鼓勵。最后感謝Qcon提供這樣的分享平臺。

分享感覺

雖然技不如人，而且懂得知識也少，干貨不多，但我是一位愛于分享的人。也是第一次到QCon這種高大上的會議上分享，加上@sofish、@達峰、@桂川、@王沛和@佳辰幾位嘉賓 分享的主題 都是一些高大上的話題，讓我感覺壓力很大。加上自己國語不標準(被@點頭豬稱為 鞋城 國語“最好”一位)，生怕把@賀佬的場子給砸了。不過好在一點，以前也經歷了一些“場子”，學會一些自黑,不會怯場，最主要的還是自己的臉皮厚如城墻(畢竟是人老了，皮糙肉厚)。

分享的主題

這次分享的主題是“Web重構之道”。重構在當今的Web時代是一個含“金”量最低的職位，而重構之道是具有歷史的一個話題，做為所謂的“Web 重構工程師”（其實就是一“頁面仔”）我想借這樣的機會分享自己對重構是怎么樣的理解。選擇“重構”并不證明我是有多愛重構，其實我也很恨它，想做別的， 只不過是自己學有所限，做別的無法做，也做不了。那么既然無法做別的，只能努力好做。不是自古有人說，“三百六十行，行行有狀元”。雖稱不上狀元，但我想 通過分享告訴正在做重構的從業人員能重新思考與定位重構。或者說自己的職業規劃。

這個話題分享我主要分為了三個部分：

• 我是怎么理解曾經的重構（ 前世 ）
• 我是怎么看現在的重構( 今生 )
• 將來的重構又是什么( 未來 )

簡單點說就是：以前的重構，或者以前做Web網頁的人，對重構是怎樣一個看法？然后今生，你們玩高大上的時候還有多少人在苦逼的切圖？然后未來，像我這樣的偽前端，將來要怎樣生存，或者有怎樣的思考？。

重構的前世

上圖是2003年淘寶的一個頁面，現在要看到這張頁面是件比較困難的事情，或許也沒有多少人看到過這張圖。不過做為Web開發者，我們不仿來分析一下這樣 的Web頁面。這個頁面有一個很大的特色，整個頁面除了圖片、文本鏈接等，就沒有別的了。而對于那個年代的Web頁面，都是這樣的特色，當然有的頁面還會 配些Flash動效（這樣的頁面是當時先進的、高檔的頁面）。另外一些網站頁面會有跑馬燈的文字動效或者 <blink> 標簽制作的閃爍文字效果。

那個時候也沒有重構一說，大家給我們這群人定義的標簽就是“ 網頁設計師 ”。其實這個稱謂稱得上是高大尚。當然那個時候，網頁設計師拿的也是高薪。除此之外，還被冠上“ 美工 ”稱謂。在大多數人的眼里，還稱不上是設計師，頂多就是一美工，拿幾張圖拼一拼，一個Web頁面就出來了。怎么就稱得上是網頁設計師了呢？而且那個時 候，Web并不很看重，很多企業都沒有自己的官網。因為那個時候，企業主都覺得Web網頁并不能給他們帶來任何的收益，而且自認為業績好，為什么還要花錢 去做這樣的事情。

而這個時代，對于Web重構師而言，他的價值也并無法更好的體現。用圖將Web頁面拼出來，這就是他存在的價值。

重構的今生

2004年傅捷、王宗義和祝軍翻譯了美國塞爾達曼（Zeldman J.）的著作《網站重構》一書。這本書出來受到廣大Web愛好者的青瞇，可以說讓國內整個前端行業(那時還沒有前端這樣的職位)發生了很大的一個變化。我記得那時候，淘寶UED說:" 我們要做地球上最優秀的前端 "。

這本書稱得上是給整個行業帶來了革命性的變化，而就這場革命也造就了“21世紀最大的IT冤案”。為什么說是21世紀最大的IT冤案呢？只要2004年以后看了這本書的同學(并不是所有同學(^_^))，只要看到Web頁面源碼中有 table 標簽，就會說這個不行，寫這個頁面的人不專業，頁面也是垃圾，不符合W3C規范。其實這本書從來也沒有說網頁出現 table 標簽就是垃圾網頁，就是不符合W3C標準的頁面。

除了造成21世紀最大的IT冤案之外，還有 災難性的DIV+CSS的泛濫 。出現最多的詞就是DIV，大家覺得我會DIV，我就很高大上。而且整個頁面下來，除了DIV，就是DIV。什么P標簽、SPAN標簽基本上是找不到。這個時候就是DIV的泛濫，根本也沒有什么語義化，可讀性一說了。

甚至以前聽到過這樣的一個故事。故事是發生在一位面試官面試一位求職者，大致的對話是這樣的：

面試官：同學，你來我團隊打算做什么？

求職者：(非常自信)我來你們公司把所有帶有 table 的頁面用DIV+CSS重構。

面試官：(很納悶)實在不好意思，我們公司所有的頁面都改成了DIV和CSS，怎么辦？

求職者：(無語、不吭聲)...

從這個故事說明，DIV+CSS是多重的" NB "。從側面也說明， 只要懂DIV，都覺得懂Web，都符合W3C規范，都高大尚 。其實這個陋習直到今天都還有，在很多壇子里，討論中，甚至在很多求職者的簡歷、公司的招聘中都還能看到"懂DIV+CSS"、"將PSD轉換成 DIV+CSS"之類。可想而知，難道大家就從未思考過，整個HTML就只有DIV？整個Web頁面只就是DIV+CSS了？

隨著時間的變更，時代的進步。我們貼上的標簽不再是“ 網頁設計師 ”或者說“ 美工 ”了，而是換成了“ 切圖 ”、" 頁面仔 "等。同時也被認為同行業中最 沒“錢”途 。因為工作中只寫HTML和CSS，絕對沒有前途，而且待遇也低。主要是因為，很多人認為不就是寫個DIV和CSS嘛，誰都會。就算是從未接觸過這方面的同學，拿一兩本書啃一兩個星期就會寫。也造就了入門門檻非常低。

經歷過這些的時候，我坐下來重新靜下來思考： 我們Web重構到底是什么？它的價值又會是什么？

自從2004年以后從事重構工作的同學或許只懂DIV和CSS（最起碼我就是這樣的，或許也有很多同學跟我一樣），也是自己的看家本領，或者說是 吃飯的飯碗吧。最主要的工作內容也就是將PSD設計圖轉換成HTML和CSS。還有一個最大的任務就是當時引以為豪的，兼容IE5~IE6。我們能把跨瀏 覽器的兼容做好，這也是我們最牛的地方。

而這個時候，我們很多重構工程師覺得自己的工作職責就是寫HTML和CSS，然后最大的任務就是將設計師的PSD設計圖轉換成Web頁面。這份工 作說實話，只做一天或兩天會覺得很有意思，因為即寫即見。現再加上一些CSS3的點飾，還能做做動漫效果，也有新鮮感。但天天如此，你會還有新鮮感存在？ 你可能就會覺得這是多么的枯燥與機械。

加上重構是設計師、交互設計的下游，但又是后端程序的上游。這樣也造成了重構工程師是多么的苦逼。假設一個項目的工期已定，但由于各種原因，設計 師耽誤了時間，而整個項目不會給你太多額外時間，也造成了重構工期的縮短。在現實工作中常常會有這樣的現象，設計師花了四天時間設計，而原型頁面次日就需 要，為了不被扣上“不配合團隊合作”，“不高效”的名頭，重構也只能委屈求全，加班加點。所以很多重構工程師會認為自己在團隊不被認可、不被重視、不公平 等。

其實我在思考，我們重構不只是說我們把設計圖99.99%的還原就稱作 重構 。我覺得重構是一種修改。為什么是一種修改呢？大家平時工作有沒有這樣的一個感覺，你有多少頁面是從頭到尾把設計圖轉換成Web頁面？特別是大公司、大團 隊，很多時候產品或交互設計師之類會跟你說，今天是中秋節，我們要上下嫦娥的圖，你幫我換換唄。也就這樣，換個圖就完成了。那么事實上，你在做這件事情的 時候有沒有想過，是每次都這樣重復做這件事情，還是有去思考，再下次出現類似需求時，不需要你來完成，讓工具或運營人員自己就能完成呢？

還有我們做修改時，不僅僅是改變一種展示效果而以，我們更應該去思考修改的過程，思考以前代碼結構是不是合理？如果不合理，就要改，要怎么改。其實這也是一種重構。

第二種重構的意義，是讓內部結構更簡單。為什么這么說呢？可能你的上一位寫HTML和CSS同事是剛剛入行的同學，結果被你老大覺得可能不行，重新招你這位“重構大師”來掌舵。此時的你，將代碼變得更簡單，那么這個過程其實也是重構。

第三就是有節制的整理代碼。并不是代碼最少，最簡潔就是最優秀的代碼。往往很多時候，很多同學在為多一個DIV和少一個DIV爭得頭破血流。那么 是否有真正的想過，多一個DIV就真正的不合理？往往很多時候，不是說你的結構少套一個DIV就合理，我們應該根據自己的業務需求去做平衡。其實這樣的一 個過程也是重構。

第四就是使用Bug產生率最小化。做過IE低版本兼容的同學或許有這樣的感觸。為什么在現代瀏覽器下，頁面很完美，一到IE低版本就亂了呢？此時 很多人都想盡各種hack來處理，但是否有真正的想過，自己的結構是否合理，是不是自己的代碼出了問題呢？而這樣讓Bug產生率最小化也是一種重構。

除此之外，重構不僅是還原一張設計圖，我們存在的意義需要去做更多的思考。如何讓更多的同學、更快的還原設計圖。而且還原設計圖的這個過程更簡單化、更標準化。

那么Web重構到底是什么？

我是這么認為的( 僅個人認為，并不代表權威 )：

重構應該是一種 思想和理念 。雖然從事重構工作，活簡單，但我們也要有想法，想怎么去把事做得更好。而且我們還要有追求，不難僅追求99.99%還原設計稿，我們應該追求更多，在還原過程中想，怎么還原到讓用戶用起來更爽。

重構也是 行內分工的優化,是HTML、CSS和JS的分離及優化 。誰擅長什么就做什么？第一做起事來順手，成本也低。比如說，你讓一位擅長JS的同學去寫HTML和CSS，結果寫得不好，Bug也出來了，讓他調要調半天。從這一點來說，分工還是有好處的。正如@sofish所說 專業的人做專業的事 。這也是為什么還有一些團隊有“重構工程師”的存在。

重構是 技術、數據、情懷、人文為主導的交互優化 。雖然說重構是屌絲，但我們還是要有點追求。大家可能會說，不就是一切圖的嗎？但做我們專業揮刀切圖的人不能自己說自己的切圖的，或者自認為只切圖，如果是這樣，你可能將永遠是一切圖的。我們應該破繭而出，突破自我。

重構的未來

以前我們做重構，只是考慮如何將PSD轉換成HTML和CSS頁面。但往往這樣是不夠的，我們應該去考慮更多的事情。

比如說，我們應該去思考怎么和PD、用研、交互、程序等等打交道，考慮工程化等等。

可能有人會說，你站在臺上吹牛，可知民間疾苦。也有很多人可能更想知道，在手淘這樣一個高大尚的團隊怎么做重構？那么我們來看看一個簡單的示例。

如上圖所示，這不僅僅是在淘寶、手淘中有，估計只要是做Web的，都可能會碰到這個東東。相信你們的產品里也有這個東東。不同的產品、不同的業務線、不同的頁面都可能有。那么怎么做？

從示意圖，不難發現他們有一些共性：

• 嵌套
• 左邊是圖、右邊是文本
• 有按鈕

也發現他們有一些不同之處：

• 左邊的圖不一樣，有圓的、方的、大的和小的這些不確定因素
• 右邊的內容有單行的、多行的
• 標題有頂端對齊的、垂直居中的
• 右邊內容不固定
• 寬度不固定

上圖我是從淘寶頁面上截圖過來的代碼示意圖。或許你看到這樣的代碼之后，你也會搖頭說“這么優秀的團隊怎么也寫出這么差的代碼”？在任何一個優秀 的團隊，都會有不同水平的人員。A工程師覺得上一部分代碼并沒有問題，然后B工程師覺得下部分代碼也是OK的。如此一來，就會有六種不同的結構，不同的樣 式代碼。但對于一位"專業的"重構人員來說，他是沒有辦法接受的。

我們不仿仔細看看，不管哪一種風格，他都分為三個部分。如此一來整個結構就非常的清晰：

將左邊的圖和右邊的按鈕稱為 .media-object ，中間的標題或內容稱為 .media-body 。簡單的重構一下：

或許這個時候，現在這樣能滿足很多情景的需求了，其實再仔細想想，是不是真的就滿足了呢？比如說標題和頭像要垂直居，那么前面所做的是否能滿足需 求呢？作為一位專業的重構，此時你就要去思考了，你寫的這個拿去出去以后，其他工程師用起來能不能得心應手。而且個性化又要如何處理。

這個時候或許會根據不同的產品添加不同的類名做細微化的樣式處理。而在這個過程中，我們僅是處理樣式的細微化，并不會對整個布局結構產生任何影響。

接下來一個新問題，其實它擴展性還不夠強大，在整個效果中，有的時候有最右邊的按鈕，有的時候又沒有。那么我們應該怎么辦？要不要動結構？或者我 們添加新東西之后，這樣能不能實現？或者說能不能頂端對齊、垂直居中、底端對齊，這一切的問題有沒有更好的方法能實現？其實是有的，比如說現在討論較多 的，也很火的Flexbox布局。當然這個很多團隊并不敢大膽的在項目中使用，必須受限于瀏覽器的兼容性。那么有沒有其他的方法呢？

除了Flexbox之外，其實還可以使用Flag Object。

正如上面代碼截圖所示，其實這個東東大家非常常見，但就不會往這上面去想。為什么不會往上面想呢？因為從前面走過來的人，都已經被兼容性給毒害 了，思路就被兼容性限死了。其實事情是這樣？話說回來，我們目前還有多少人在兼容IE的低版本呢？既然不多，那我們的思路為什么又不能拓寬呢？

繼續往下探討，前面那部分工作，還是以前重構工程師做的事情，不管你的結構怎么變化，怎么優化，還是做著以前的事情： 將設計圖還原 。那我們有沒有考慮，我們是否也可以略思考一點工程上的事情，也就是說，雖然重構不懂工程，但也可以參與、去思考，哪怕不做高大尚的工程化，我們僅對CSS做點工程上的思考，難道這樣不可以？

將上在的示例分解一下，整個樣式分為兩部分 _media-layout.scss 和 _media-skin.scss 。并且通過Sass獨有的特性，將這兩個文件引入到 media.scss 文件。而其中 _media-layout.scss 只是負責布局上的樣式，而 _media-skin.scss 負責皮膚或細化上的樣式。

這里僅僅是提供一種思路，而這種思路是我自己親身經歷過的一件事情。接下來我在繼續思考，大家都在講Angular、React等。而對于一位不 懂JS的人來說，這既是一件興奮又痛苦的事情。為什么這么說呢？看大家都在玩先進的東東，而且能做出很多有意思的東東，但對于不懂的同學來說，看著這些東 東，也就是幾個字母，里面能干嘛，并不懂。

雖然我也不懂，但我在思考，我們是否可以做一個萬能的標簽。把剛才我們做的事情都通過這個標簽來完成。說到這個時候，很多人會想到Web組件化， 比如Google的Polymer。而我們也有一個改造的Polymer，在這個基礎上，就算你不太懂JS，或許遵守一定的規則也能寫出一個類似這樣的標 簽，做這樣的事情。

其實這些思考還不夠多，因為我們還需要面對很多事情，比如粒子如何管理？其實這件事情我以及我們的團隊都一直在探索，也一直還沒有完美的答案。只是希望我們不斷的探索之后，會有一個很好的答案與大家一起分享。

除此之外，我們考慮可復用性、可擴展性、可維護性和可定制性之外，未來的重構可做的事情不僅僅是這些。可以說任何你想做的事情你都可以做，任何前端工程師做的事情你都可以做。比如說，頁面的性能優化，可定制的工具化等等。

或許你還在糾結重構的存在的價值何在，那么價值是通過什么方式來向團隊或你的老板體現呢？其實很簡單，想辦法讓用戶爽，讓老板爽。最簡單用你的技術去做出成績，直接用錢體現出你存在的價值。

總而言之： 未來是美好的，道路是曲折的，現實是殘酷的，加油吧!!!

總結

啰嗦一大篇，那么重構是什么呢？想通過下面幾個詞來表達我自己對重構的理解：

• 重構不光追求還原設計稿
• 重構不光追求瀏覽器兼容性
• 重構不光追求技術
• 欲重構Web頁面需先重構人
• 欲重構Web頁面需先重構理念
• 重構最重要的就是基礎和理念

這是一篇不談技術的文章，是一篇扯蛋的文章。如果你閱讀到這里，我非常的感謝，也非常的抱歉，因為我浪費了你很多的時間，但我最終還是希望這篇文章對你有所啟發，不是技術上的啟發，而是思想與靈魂上的啟發。

蛋扯得有些遠，上面盡可能還原了我在Qcon上所講的內容。如果你感興趣的話，到時視頻出來了可以看看錄制的視頻，不過可能有很多詞你聽不懂，那是因為我的語法沒學好。最后你聽到的就會有點像 @情封根據錄音還原的現場 。（^_^）

對應的PPT可以 點擊這里下載 。