重構之美－跨越Web標準，觸碰語義網[分離：程式設計師請“遠離”Web標準]

分離，這個美麗的詞，自從Web標準出現後，便夢縈魂牽的圍繞著我，吞噬著我的腦細胞，一百遍啊一百遍。

《理解表現與結構相分離》，多麼古老的文章；分離，多麼誘人的詞語！作為Web標準的核心理念，理論上是那麼的乾淨，透徹與清晰，可為何放到實際操作中卻那麼的棘手和困難？直到四年後的今天，我仍掙扎於其中。

我第一次真正以團隊角度去嘗試分離是06年《重構之美》發表完後，我開始以結構化的理念去實施。結果是我基本成功的分離了原本糾纏在一起的前端和後端，但是在前端卻沒有完成分離，甚至一度我成為了團隊的一個瓶頸，因為雖然我解放了後端，卻沒能讓解放出來的大量工作協調的分配給前端的每個人，我只能一個人扛著，我分不出去，06年下半年，我幾乎天天0點離開公司，每天12到14小時的工作。那時廷廷對我反覆說的兩個字是：放下！叫我不要把所有的事都攬到自己手上，哪有下屬準點下班雙休，而主管天天熬夜還包括週末的。我一臉沮喪的望著他：我分不出去……放下的前提是拿起，我沒有拿起，我就沒有資格放下，我也放不下。所以我必須先奮力去拿起。

前端和後端的分離相對而言是最容易的，只要後端放棄對結構的編寫即可做到，其實在這最容易的一點分離上我也走了一年的彎路。通常而言，一個大團隊，後端的人數遠遠高於前端，不少公司在前端的定義上僅僅限於介面設計，而互動、結構甚至樣式其實都放在了後端上，由程式設計師完成。因此我曾理想的希望每個程式設計師都能夠熟悉Web標準的理念，能夠統一思想寫出標準化甚至相同的結構，這樣可以將結構的編寫由眾多程式設計師來平均分擔，避免壓力全部集中在前端。但是半年多的幾次嘗試過後我放棄了，首先編寫一份合理的結構所需要的附加能力，都是程式設計師不應該投入精力的前端工作，其次結構的編寫是個仁者見仁、智者見智的工作，想統一每個人的思想，何其難！而當我放棄後，當程式設計師不再參與對結構的編寫後，前端和後端的工作就清晰的分離了。這裡要特別強調，後端放棄對結構的編寫是指每一個標籤的確定都不參與。這對一些控制元件形式開發是個打擊，比如asp.net的一些控制元件，如果前端確定的結構是“<div>資料</div>”，後端這麼操作“<div><asp:label /></div>”那麼就錯了，因為最終輸出的是“<div><span>資料</span></div>”。

部落格園裡大部分都是程式設計師，實際上普遍來說，程式設計師也遠遠高於設計師，看我的文章很多都是程式設計師，聽到我說放棄對結構的設計也許會有牴觸，尤其是一些不錯的程式設計師。我想一些工作了三、五年的程式設計師在前端上的造詣或許不亞於甚至高於工作了一、兩年的設計師，即便這樣，我建議你要做得最好是指導而不是代替。其實真正優秀的程式設計師會很準確的找到自己的位置，會很清楚自己的光芒在哪裡或將在哪裡才是最耀眼的。

說到這裡我突然想到也許會產生一個混淆，然後特意去百度“Web標準 程式設計師”，出現一篇廣為傳播的文章《網站程式設計師如何應對web標準》。然後我再次發現不可思議的文章：《為什麼ASP.NET程式設計師應該學習Web標準》，好像還是翻譯的，國外的文章。

在第一篇文章中，舉了一個例：

<asp:Repeater ID=”topNewsList” runat=”server” >
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><a href=”shownews.asp?id=<%#Container.DataItem(“id”)%>”><%#Container.DataItem(“title”)%></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>

它說這部分程式碼，由“頁面設計師”也就是表示層的程式設計師完成，這實際上是程式設計師參與了結構的設計，確定了ul、li、a，我覺得這是錯誤，而且從某種意義上來說很嚴重。首先必須區分一下，程式設計師和設計師的界限在哪裡？前端也有程式設計開發一說，那麼和後端的程式設計開發區分在哪裡？再巨集觀點，什麼是前端？什麼是後端？這條三八線應該怎麼劃？

什麼是程式設計師？資料層的開發是程式設計師，還有通用層，業務邏輯層，表示層。表示層算不算程式設計師？算前端還是後端？js隨著ajax新生，也會和資料頻繁打交道，互動開發是不是程式設計師？又算前端還是後端？寫程式碼的開發就是程式設計師嗎？程式設計師就代表後端嗎？那麼結構的設計也是寫程式碼，樣式的設計也是寫程式碼，都算程式設計師都算後端羅？除了介面設計，都是開發都是程式設計師都是後端羅？最搞笑的是很多人不說自己在做樣式設計、互動設計而要說成樣式開發、互動開發，甚至還有結構開發，我琢磨著剩下孤零零的介面設計，哪天不爽了跳出來高呼一聲“還有我介面開發”，似乎頂著“開發”二字，腳不彎了，腰也直了，雞胸也挺起來了……凸-.-凸

實際上設計師、程式設計師、設計、開發都是文字忽悠遊戲，無所謂。但是前端和後端是應該有分界線的，而這條三八線，我認為：以操作方式來劃分。凡是不需要環境可以靜態完成設計、開發與除錯的工作是前端。而需要執行環境、編譯、資料庫等必須動態化才能完成設計、開發與除錯的工作是後端。所以大部分互動開發雖然也是程式設計也會運算元據庫，但是我認為它還是屬於前端，而表示層的開發則屬於後端。“程式設計師”這三個字通常更多的是泛指後端。那麼在上面的例項中，就應該這樣：由前端確定用ul還是ol還是div等，後端要做的是動態化頁面（加入資料並迴圈）。用什麼方式實現資料的載入（Repeater控制元件還是其他）不關前端的事，而用什麼結構標籤格式化資料不關後端的事！不要說後端了，這甚至不關位於前端的互動開發的事，互動開發無論從協同考慮上、效能考慮上、維護考慮上都需要儘可能的避免建立結構，更不應該擅自建立結構。

上面兩篇以及類似的一些文章，我認為最大的錯誤就是沒有立足於團隊的角度去明確區分前端和後端，混為一談。簡單說說在這點上我的經歷和態度轉變：2006年上半年我對方欣幾十個程式設計師做Web標準培訓，那時我是完全希望結構由程式設計師編寫，結果完敗；2006年下半年我在卡當，我再次提出全體培訓，被拒絕後開始以邊開發邊溝通的方式將Web標準理念分散滲透和傳遞，那時我雖然仍抱希望，卻已經有所懷疑，因為我發現結構本來是簡單的東西，但是一旦多人帶著仁者見仁智者見智的心態去操作時，它就變得複雜難控，於是我開始抓結構的決定權，結果成功了；2007年在爆米花，我開始常說一句話：“不管你用什麼方式，控制元件或程式設計或其他我聽不懂的，反正我只要最終輸出的頁面，在瀏覽器中檢視原始碼，其結構和前端確定下來的完全保持一致，絲毫不差，就OK，剩下的事屬於前端，你可以不管了。”程式設計師可以建議或提出障礙，但是結構的決定權100%的落在前端，我完全的放棄了對程式設計師的主動培訓，結果輕鬆而極速。

那麼，程式設計師是否需要學習Web標準呢？這個問題換個角度，就是問：設計師需要學習資料庫嗎？答案其實是一樣的：需要。但是這種學習我覺得應該是屬於瞭解的學習，而不是鑽研，是輔助的學習，而不是主導。為什麼？因為首先確定結構需要深厚的CSS設計能力作為支援。兩年前我寫過一篇《CSS,Stop!》的文章來提醒大家關注結構，很快我就想再寫一篇《CSS, Important!》的文章來闡述結構和樣式的關係，因為通過後來那道面試題我發現，CSS的設計能力在很大程度上影響和限制著你的結構設計能力，如果你CSS水平不夠你根本不敢去選擇更好的結構哪怕你知道（比如你如果不知道如何清除浮動，勢必要加入冗餘標籤）。其次，CSS和介面設計又是密切相關的（比如圓角的變通靈活實現或圖片切割的針對性設計），和互動設計也有瓜葛，而最後介面設計與互動設計源於產品設計。這條線就牽出了前端兩個字。如果程式設計師編寫結構，就要學習CSS，然後被莫名其妙稀奇古怪的瀏覽器相容打懵掉，還得糾纏進介面藝術及排版設計……一步一坑，越走越不熟悉障礙也就越大，水深火熱，最後導致的結果便是團隊無法形成專業的前端隊伍，也無法形成專業的後端隊伍，人人在執行上身兼數職，單兵作戰，更不要說協同了。這無論對團隊還是對個人都是糟糕的：團隊是混亂的散沙，個人是平庸的全面。

程式設計師可以學習Web標準，如果自我感覺很好，可以建議甚至強烈建議，但是不要去替代去操作。術業專攻，博覽群曉。前一句指在執行上專一，後一句指在認知上全面。其實我認為如果你決心投身於後端做個牛逼的程式設計師，完全可以不用在實踐中去刻意學習Web標準，學習方式很多，溝通協同中也能學習和了解很多，足矣。而執行上的做與不做，對於個人沒影響，一個人可以從頭做到尾，但是對於團隊這個問題很重要，非常重要！你必須認識到一點，全能是幻象，沒有在執行上既精於前端也精於後端的人，因為時間和精力是有限的，你必須放棄，讓自己有短處，你才可能擁有傲人的長處。當然我知道還有客觀環境在左右程式設計師的行為，是公司沒有建立前端隊伍而導致程式設計師不得不去扛起前端的工作，這是很無奈的事情。所以眾多網站強在後端弱在前端，怎麼可能不弱嘛，前端的工作由後端程式設計師兼任，想起一句話：“搶劫，我們不專業啊。”再說下去就是前後人才問題了，不說了。

差不多說完了，我想有人會說：“你在說大團隊，我們是小團隊人少，不可能分得那麼細。”其實無論3、5個人的小隊還是30、50個人的大隊都可以並應該把前後端分離開來。這個東西，和人多人少沒關係，人少你都分不清，人多了就只會更混亂。

所以，分離的第一步：程式設計師們，珍愛生命，“遠離”標準；CTO們，珍愛程式設計師，分離前後端。

本文轉自爆牙齒部落格園部落格，原文連結：http://www.cnblogs.com/yuntian/archive/2008/08/20/792803.html，如需轉載請自行聯絡原作者