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

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名與空間、虛擬空間、營銷軟件、網(wǎng)站建設、鼓樓網(wǎng)站維護、網(wǎng)站推廣。

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

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

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

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

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

(P29) Web Developer —— 網(wǎng)頁調(diào)試插件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

行內(nèi)元素： span、strong、em

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

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

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

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

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

(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)
行內(nèi)元素水平居中 &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 的內(nèi)容比起 sidebar 更重要，無論 sidebar 和 main 在樣式上誰左誰右，在HTML標簽上要保證 main 的標簽在 sidebar 之前被加載；

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

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

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

(P153) window 對象會在網(wǎng)頁內(nèi)元素全部加載完畢以后出發(fā) onload 事件；

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

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

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

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

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

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

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

用標簽名來獲得 DOM 節(jié)點，讓程序和 HTML 結(jié)構(gòu)耦合太緊；

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

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

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

(P223)
面向?qū)ο笥⑽娜Q叫做 Object Oriented ，簡稱 OO 。OO 其實包括 OOA (Object Oriented Analysis，面向?qū)ο蠓治?、OOD (Object Oriented Design，面向?qū)ο蠓治? 和 OOP (Object Oriented Programming，面向?qū)ο蟮某绦蛟O計)。面向?qū)ο蟮恼Z法只對應 OOP ，只是 OO 的一部分；

OOA 和 OOD 是面向?qū)ο缶幊痰乃枷?，和具體語言無關，而 OOP 是面向?qū)ο缶幊坦ぞ?，和選用語言相關；

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

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

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

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

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

(P231) 放在構(gòu)造函數(shù)里的私有行為，實現(xiàn)真正的似有；

(P253) 無論在類的構(gòu)造函數(shù)中還是在原型中，this 都指向?qū)嵗膶ο螅?br/>
(P239) 作為函數(shù)的 function ,其 this 指向的是 window 對象，而作為類構(gòu)造函數(shù)的 function ，其 this 指向的是實例化對象；

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

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

文章題目：Web前端開發(fā)如何編寫高質(zhì)量代碼-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://www.rwnh.cn/article34/csehpe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、企業(yè)建站、網(wǎng)站設計、App設計、定制開發(fā)、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)