《編寫高質量代碼-Web前端開發修改之道》筆記--第一章 從網站重構提及

本章內容：

糟糕的頁面實現，頭疼的維護工做

Web標準--結構、樣式和行爲的分離

前端的現狀

打造高品質的前端代碼，提升代碼的可維護性--精簡、重用、有序

糟糕的頁面實現，頭疼的維護工做

工做中最大的考驗和最不可迴避的問題就是「變化」。咱們不只要實現需求，更重要的是考慮實現代碼的可維護性，爲將來可能出現的「變化」，提早作好準備。

全部老網頁的典型毛病--新手可能會有的問題,中手也可能會有：

• div和table佈局混用
• html標籤名有大寫、小寫
• html標籤屬性有的加了引號，有的沒加引號
• 歷史遺留的、被淘汰的屬性氾濫
• 樣式組織混亂，有<style>標籤內嵌網頁的，也有<link>外鏈的，也有直接寫在標籤內的
• JavaScript有外鏈的，有寫在<script>內的，也有寫在html標籤裏的
• JavaScript和CSS的位置凌亂
• JavaScript的編碼風格很不一致
• 不管是JavaScript仍是CSS代碼，看不到任何註釋

這些毫無章法，結構（html）、樣式（css）、行爲（javascript）很是混亂的耦合着，在網頁重構這場革命前，大多數網頁都有這些毛病，將來的新手和過渡的中手都有很大可能會搞出其中的某些毛病。帶來的維護難度之大，成本之高。

Web標準--結構、樣式和行爲的分離

一個符合標準的網頁，標籤中的標籤名應該是小寫的，屬性要加上引號，樣式和行爲不在夾雜在標籤中，而應該分別單獨存放在樣式文件和腳本文件中。理想狀態下，網頁源碼由三部分組成：.html、.css、.js文件。標籤中混有樣式和行爲的寫法是不推薦的。（注：我的有點見解，當初接收培訓的時候，或看書自學的時候，老師/做者教的步驟就是先在html元素寫樣式和行爲，而後纔是在單獨文件中寫代碼，因爲前面已經有了習慣，並且認爲能實現這個功能就好了，不必非要弄到單獨一個文件中。這就是「懶」的潛意識在做怪了。若是在教的時候徹底不給他們知道標籤上寫樣式和行爲，只在單獨文件中寫，這種後期進入工做中寫出的「爛」代碼也不會出現，還有個table大布局，都是一個道理。若是教的順序反過來，我想如今的狀況應該會好些。只是說些見解，沒有任何攻擊，畢竟應該真心感謝那些前輩和老師。）

前端的現狀

網頁維護愈來愈難的三個層面：

• 瀏覽器層面：瀏覽器的向前兼容使得前端開發中被淘汰的技術、不推薦的方法依然廣爲流傳和應用。除了Firefox Chrome Safari 對IE的挑戰以外，ie的 六、七、8這些瀏覽器版本也在老而不死着，這些瀏覽器對網頁代碼的解析存在着不大不小的差別
• 技術層面：Web標準被重視和普通採用的時間不長，整個大環境對Web標準的理解還停留在概念層面，對「好的實現方案」仍處於摸索階段。理解不深，則很容易寫出可維護差的代碼。
• 團隊合做層面：隨着網頁表現力愈來愈高致使實現代碼愈來愈複雜，隨之給團隊合做帶來了麻煩。若是團隊合做不默契，極可能須要不停打補丁，最後致使滿地是「雷」，沒人願意去維護。

打造高品質的前端代碼，提升代碼的可維護性--精簡、重用、有序

打造高品質的前端代碼,在Web標準思想的指導下，在實現結構、樣式和行爲分離的基礎上，還要作到三點：精簡、重用、有序。精簡的代碼可讓文件變小，並有利於客戶端下載；重用可讓代碼更易於精簡，同時有助於提升開發速度；有序可讓咱們更清晰的組織代碼，使代碼易於維護，有效應對變化。

Web標準的最終目的是讓代碼更易於維護。在實踐中，若是有時候不遵循標準反而能帶來更好的維護性，且利大於弊，那麼就去作吧，盡信標準不如無標準，過於教條主義很愚蠢不是？