Web前端開發如何編寫高質量代碼

這篇文章將為大家詳細講解有關Web前端開發如何編寫高質量代碼，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

(P4)
Web標準由一系列標準組合而成，其核心理念是將網頁的結構、樣式和行為分離開來，所以它可以分為三大部分：結構標準、樣式標準和行為標準。
樣式標準 —— XML標準、XHTML標準、HTML標準；
樣式標準 —— CSS標準；
行為標準 —— DOM標準和 ECMAscript 標準；

(P23)CSS布局也就是俗稱的 Div + CSS 布局，或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 來控制網頁中元素的樣式，包括位置、大小、顏色等；

(P26)
CSS布局只是Web標準的一部分。在HTML、CSS、Javascript 這三大元素中，HTML才是最重要的，結構才是重點，樣式是用來修飾結構的；

先確定 HTML ，確定語義的標準，再來選用合適的 CSS；

(P27) 瀏覽器會根據標簽的語義給定一個默認的樣式；

(P29) Web Developer —— 網頁調試插件

(P43) 在語義不明顯，既可以用 <P> 也可以用 <div> 的地方，盡量用 <P> ，因為 <P> 默認情況下有上下間隔，去樣式后的可讀性更好，對兼容特殊終端有利；

(P46)
如果漏寫 DTD 聲明， Firefox 仍然會按照標準樣式來解析網頁，但在 IE 中（包括 IE6、IE7、IE8）就會觸發怪異模式；

一種組織 CSS 的方法 &mdash;&mdash; base.css + common.css + page.css

(P58) 模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應將它們提取出來，拆成一個獨立的模塊；

(P60) 模塊應在保證數量盡可能少的原則下，做到盡可能簡單，以提高重用性；

(P71) HTML 標準的 class 屬性和 id 屬性不同，id 只能掛一個，而 class 可以掛多個，用空格分隔；

(P81) 如果不確定模塊的上下 margin 特別穩定，最好不要將它寫到模塊的類里，而是使用類的組合，單獨為上下 margin 掛用于邊框的原子類；

(P81) 權重的規則是這樣的 &mdash;&mdash; HTML標簽的權重是1，class 的權重是10，id 權重是100；

(P82) 如果 CSS 選擇符權重相同，那么樣式會遵循就近原則，哪個選擇符最后定義，就采用哪個選擇符的樣式 &mdash;&mdash; “就近原則”指的是選擇符定義的先后順序，而不是 class 名的先后順序；

(P84) 為了保證樣式容易被覆蓋，提高可維護性，CSS選擇符需保證權重盡可能低；

(P85) 少使用子選擇器，就需要多添加 class ；

(P87) CSS Sprite “圖片翻轉技術” &mdash;&mdash; 將多張圖片合并為一張，然后利用 background-position 屬性來展示需要的部分；

(P88) 是否使用 CSS Sprite 主要取決于網站流量；

(P89) 一般情況下，建議盡量使用 class ，少用 id ；

(P93)
CSS hack &mdash;&mdash;
1. IE條件注釋法 <!-- [if IE]> ...... <![endif]>
2. 選擇符前綴法 *html *+html
3. 樣式屬性前綴法 "_" "*"

(P94) <a> 標簽的四種狀態排序問題 &mdash;&mdash; Love Hate 原則 &mdash;&mdash; L(link)ov(Visible)e， H(Hover)a(Active)te；

(P95)
塊級元素： div、p、form、ul、ol、li

行內元素： span、strong、em

塊級元素會獨占一行，默認情況下，其寬度自動填滿其父元素寬度；

行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化；

(P95)
塊級元素可以設置 width、height 屬性；
行內元素設置 width、height 屬性無效；

(P96) 塊級元素可以設置 margin 和 padding 屬性。行內元素只有水平方向的 margin 和 padding 產生邊距效果；

(P97) 塊級元素和行內元素的 CSS 相關屬性是 display ，其中塊級元素對應于 display : block ，行內元素對應于 display : inline。 可以通過修改 display 屬性來切換塊級元素和行內元素；

(P103)
position : relate 和 position : absolute 都可以改變元素在文檔中的位置。設置 position : relative 和 position : absolute 都可以讓元素激活 left、top、right、bottom 和 z-index 屬性（默認情況下，這些屬性未激活，設置了也無效）；

默認情況下，所有元素都是在 z-index : 0 這一層；

設置 position : relative 或 position : absolute 會讓元素“浮”起來；

position : relative &mdash;&mdash; 會保留自己在 z-index : 0 層的占位；

position : absolute &mdash;&mdash; 會完全脫離文檔流，不再在 z-index : 0 層保持占位符，其 left、top、right、bottom 值是相對于自己最近的一個設置了 position : relative 或 position : absolute 的祖先元素的，如果祖先元素全部沒有設置 position : realtive 或 position : absolute ，那么就相對于 body 元素；

(P104)
float 元素屬性不會讓元素“上浮”到另一個 z-index 層，它仍然讓元素在 z-index : 0 層排列， float 不能通過 left、top、right、bottom 屬性精確地控制元素的坐標，它只能通過 float : left 和 float : right 來控制元素在同層里“左浮”和“右浮”。flaot 會改變正常的文檔流排列，影響到周圍元素；

只要設置了 position : absolute 、float : left 或 float : right 中任意一個，都會讓元素以 display : inline-block 的方式顯示 &mdash;&mdash; 可以設置長寬、默認寬度并不占滿父元素，就算顯式地設置 display : inline 或者 display : block 也仍然無效；

值得注意的是， position : relative 卻不會隱式改變 display 的類型；

(P104)
行內元素水平居中 &mdash;&mdash; text-align : center
塊級元素水平居中 (確定寬度) &mdash;&mdash; margin-left : auto 和 margin-right : auto

(P111)
CSS中有一個用于豎直居中的屬性 vertical-align ，但只有當父元素為 <td> 或 <th> 時，這個 vertial-align 屬性才會生效；

<td> 標簽默認情況下就隱式地設置了 vertical-align 的值為 middle ；

(P114) 注意： main 的內容比起 sidebar 更重要，無論 sidebar 和 main 在樣式上誰左誰右，在HTML標簽上要保證 main 的標簽在 sidebar 之前被加載；

(P136) 用匿名函數將腳本包起來，可以有效地控制全局變量，避免沖突隱患；

(P147)
添加必要的注釋，可以大大提高代碼的可維護性，對于團隊合作來說，更是十分有必要的；

讓JS不產生沖突，需要避免全局變量的泛濫，合理使用命名空間以及為代碼添加必要的注釋；

(P153) window 對象會在網頁內元素全部加載完畢以后出發 onload 事件；

(P153) DOMReady 只判斷頁面內所有的 DOM 節點，是否已經全部生成，至于子節點的內容是否加載完成，它并不關心。 DOMReady 觸發的速度比 window.onload 更快；

(P159) CSS 放在頁頭，Javascript 放在頁尾；

(P174) attachEvent 是 IE 支持的方法，而 addEventListener 是 Firefox 支持的方法，attachEvent 和 addEventListener 方法支持監聽處理函數的疊加，而不是覆蓋；

(P185) 很多開源的 Javascript 庫可以為我們提供強大的 base 層和 common 層，最常見的 Javascript 庫有 jQuery 和 YUI 等；

(P186)
jQuery 本身分成兩大部分： jQuery 核心文件 和 jQuery UI 文件。 jQuery UI 文件依賴 jQuery 核心文件；

jQuery 核心文件提供了 base 層功能，還提供了部分 common 層功能， jQuery UI 文件提供了 common 層功能；

(P194)
因為一個頁面內，相同的 id 只能出現一次，所以它不適合來獲取一組有“相似功能”的 DOM 節點；

用標簽名來獲得 DOM 節點，讓程序和 HTML 結構耦合太緊；

(P196) 同一頁面里 id 只能出現一次，所以如果你的程序需要被多處復用，就一定不能使用 id 作為 Javascript 獲得 DOM 節點的掛鉤；

(P198) 組件需要指定一個根節點，以保持每個組件之間的獨立性；

(P205) 如果一個函數內某個因素很不穩定，我們可以將它從函數內部分離出來，以參數的形式傳入，從而將不穩定因素和函數解耦；

(P223)
面向對象英文全稱叫做 Object Oriented ，簡稱 OO 。OO 其實包括 OOA (Object Oriented Analysis，面向對象分析)、OOD (Object Oriented Design，面向對象分析) 和 OOP (Object Oriented Programming，面向對象的程序設計)。面向對象的語法只對應 OOP ，只是 OO 的一部分；

OOA 和 OOD 是面向對象編程的思想，和具體語言無關，而 OOP 是面向對象編程工具，和選用語言相關；

OOA 和 OOD 與具體要求語言無關，一般情況下可以輕易跨語言重用；

(P224) 從大局上決定程序品質的，不是 OOP ，而是 OOA 和 OOD；

(P225) 函數在 Javascript 中既可以當做普通函數使用，也可以用作類來使用，在充當類的時候，它本身又擔負著構造函數的責任；

(P228) 用 this xxx 定義的屬性是公有的， 而用 var xxx 定義的屬性是私有的；

(P230) 原型中的行為一定是公有的，而且無法訪問私有屬性；

(P231) 放在構造函數里的私有行為，實現真正的似有；

(P253) 無論在類的構造函數中還是在原型中，this 都指向實例化的對象；

(P239) 作為函數的 function ,其 this 指向的是 window 對象，而作為類構造函數的 function ，其 this 指向的是實例化對象；

(P259) 對于常規屬性，統一使用 node.xxx 的方式讀取，對于自定義屬性，統一使用 node.getAttribute("xxx")讀取；

關于“Web前端開發如何編寫高質量代碼”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。