WEB前端設計:良好的頁面結構和優美的代碼【閱讀季】

　　但凡從事互聯網的人基本都會寫幾行html，用過Word的人用Dreamweaver也能作出規整的頁面，因此大部分人會很天然地認爲「頁面的開發沒什麼技術含量，很簡單」。不只有這種廣泛的認知，對從業者來講也有不少疑惑：作頁面前端實現，沒問題；兼容性，小case…還能有什麼問題？是否是真的沒什麼問題了呢？這裏面的水有多深，讓咱們舀舀看。

　　在不一樣的時期對頁面前端的見解彷佛是多變的。在互聯網早期的時候，那時的頁面設計風格相對單一，對應的頁面需求比較簡單，而且當時的瀏覽器也基本是IE6的天下，javascript也只是網頁特效的代名詞，HTML頁面自己沒有引發太多人的關注，彷佛只要能用div甚至table加css輔助把圖片定好位，把頁面內容預留好就OK了，而且這種觀念存在了很長一段時間。隨着頁面內容的豐富，設計風格的發展，交互複雜性的增長，AJAX的應用，瀏覽器的更新換代，又讓你們從新對最基本的頁面自己重視起來。而後熱議的就是瀏覽器的兼容性，碰到問題最熱衷的就是滿網絡搜索hack，順便再罵罵IE六、7……

　　實現效果圖是最基本的工做
　　把視覺稿經過頁面代碼的方式表現出來包含了兩個基本訴求：

　　1.可以真實反映視覺稿；

　　2.可以經過瀏覽器的兼容。

　　這兩個訴求的達成須要咱們有追求細節的態度和必定的頁面功底，能完成這兩個內容就能夠初步進入頁面前端的從業者行列了，但這就表明着咱們能夠勝任頁面開發的工做了？不，纔剛剛開始！

　　與頁面設計師的溝通和項目的參與
　　溝通很重要。

　　先拋出幾個問題：

　　咱們有沒有和設計師探討過某些效果對低端瀏覽器渲染效率影響比較大？

　　有沒有探討過部分效果能夠用CSS3實現從而使得結構更加簡潔清晰？

　　有沒有在代碼和視覺中尋追求過平衡？

　　頁面前端的開發向基本用戶，編寫的代碼也直接做用在瀏覽器上，咱們有義務對頁面的穩定性和渲染效率負責。咱們也常常碰到項目在整體進度壓力下致使的設計與頁面前端開發同步進行，這時更有必要儘可能多地獲取項目信息，瞭解咱們還要作些什麼，這些能夠幫助咱們充分考慮重用和框架拓展。

　　良好的頁面結構
　　頁面結構的編寫比如蓋房的地基建設，其好壞會直接影響到CSS代碼的質量、js開發、後臺開發還會影響到之後的頁面拓展、迭代和頁面調整。

　　拿到視覺稿後，不要忙着動手開始，多觀察思考。先分析佈局，劃分框架，而後規劃結構，編寫代碼。特別在大型項目中，合理使用模塊化的開發不論從總體進行仍是拓展維護都有至關大的好處。 

　　關於hack
　　不少同窗在頁面開發時上網搜索最多的就是hack了，是否咱們徹底要依賴hack來實現頁面兼容性，答案是否認的。

　　你們常常比喻IE6向咱們撒了一個謊，結果咱們要再撒一百個謊來圓這個謊。不否定IE6常常讓咱們口吐鮮血，但不表明咱們用更多的「謊話」來彌補就能夠問心無愧。大部分狀況下能夠經過變換思路調整HTML結構，或使用一些雖然沒法解釋但相對安全的css來幹掉hack。誰都沒法預計使用hack何時會讓咱們栽一個大跟頭。

　　優美的代碼
　　如今不少web項目功能複雜，代碼規模也會變得很龐大，如何更好地進行協同開發和維護是咱們面臨的一個問題。

　　須要考慮完善統一的規劃，還有要養成良好的代碼開發習慣纔會在面臨各類狀況時遊刃有餘。翻閱頁面代碼，看到合理的標籤使用、良好的註釋、清晰的代碼結構、用意準確的css不只猶如欣賞一個藝術品，更爲下游開發和協同開發下降了不小的溝通成本，咱們有什麼理由不去這麼作呢？舉個反面例子：div濫用是如今比較典型的一個問題。數數看本身使用的標籤有多少個呢？不一樣的語義都該使用對應的標籤代碼，它們都苦苦地在等待戰場上的衝鋒號，讓咱們去解放它們吧！

　　擁抱HTML5
　　這是一個充滿機會的時代，HTML5時代的來臨伴隨着移動互聯網的興起創造了更大的機會，還有太多的東西值得咱們去學習去發現。 HTML5提供了豐富的JS API接口，須要咱們去研究；CSS3的絢麗吸引了足夠多的眼球，須要咱們去研究；移動設備上如何開發更加適配的頁面，須要咱們去研究……

　　Stay Hungry, Stay Foolish
　　水是越舀越多了，卻發現原來下面還深不見底，上面的內容越是深刻研究就越會發現更多山川須要翻越。保持飢餓狀態，用眼睛去努力發現發掘，不斷豐富技能才能找到定位，突破瓶頸，正所謂「惟有高屋建瓴方可水到渠成」。造成本文是由於以前和同行討論到瓶頸的問題，想給本身，給頁面前端的同窗一塊兒找找定位，梳理一下思路。拿蘋果CEO在斯坦福演講的一句話「Stay Hungry, Stay Foolish」和你們共勉。