頁面模塊化

規(guī)范

在具體談?wù)撘?guī)范的之前，可以下去查看下各大網(wǎng)絡(luò)公司的前端開發(fā)規(guī)范（Developemnt Style Guide）例如谷歌，F(xiàn)acebook 或者 Dropbox。從而更好的理解開發(fā)規(guī)范在實(shí)際應(yīng)用中和多人協(xié)作中的重要性。

不同開發(fā)者在開發(fā)過程中使用不同的代碼風(fēng)格會直接的提升在之后的開發(fā)和維護(hù)的成本和難度，對前端開發(fā)來說更是尤為突出。這時(shí)使用代碼規(guī)范來約束開發(fā)者的編碼風(fēng)格就可以大體解決這些問題。規(guī)范的制訂應(yīng)從下面的幾個方面來開始考慮：

• 文件規(guī)范
• 注釋規(guī)范
• 命名規(guī)范
• 書寫規(guī)范
• 其他規(guī)范

文件規(guī)范

文件規(guī)范又可以從三個方面入手，分類，引入，以及文本本身的內(nèi)容。

• 分類（分類可分為通用類和業(yè)務(wù)類。通用類有第三方的庫，團(tuán)隊(duì)開發(fā)的通用模塊或者通用樣式。業(yè)務(wù)類則有不同業(yè)務(wù)所對應(yīng)的特定模塊。）

• 引入
  • CSS （引入文件則需盡少的使用行內(nèi)樣式）
  • JavaScript （文件名的約束，以及編碼設(shè)置通常使用 utf-9）

注釋規(guī)范

注釋可使用塊狀，單行注釋和行內(nèi)注釋，需要統(tǒng)一縮進(jìn)等細(xì)節(jié)要求。

命名規(guī)范

例如 CSS 選擇器的命名規(guī)范

• 分類命名 （例如 g-header 來給布局類的樣式設(shè)置命名空間來防止樣式污染，m-header 來制定模塊類的樣式）
• 命名格式 （大小寫的規(guī)定，建議使用小寫并使用 - 分隔，也許控制選擇器的長度避免過長的樣式選擇器名稱但不可失去選擇器語義）
• 語義化命名 （以內(nèi)容的語義來給選擇器命名）

書寫規(guī)范

這里使用 CSS 的書寫規(guī)范來做示例，可以參考下面的約束：

• 單行與多行（單行與多行的 CSS 書寫格式，使用多行?。?/li>
• 空格與分號（使用空格進(jìn)行縮進(jìn)并保留最后一個屬性的分號）
• 書寫順序（更具顯示的重要性來安排可參照下表）
• Hack 方式（三思而后行）
• 值格式（例如顏色值的格式以及引用中是否使用引號）

http://wiki.jikexueyuan.com/project/fend_note/images/M/module_page_style_order.png" alt="" />

其他規(guī)范

這里包括有 HTML 以及圖片的規(guī)范：

• HTML
  • 文檔聲明
  • 閉合
  • 屬性
  • 層級
  • 注釋
  • 大小寫
• 圖片
  • 文件名稱（語言以及長度的規(guī)范）
  • 保留源文件
  • 圖片合并

模塊化

模塊化是一系列相關(guān)的結(jié)果組成的整體，這部分具備獨(dú)立存在的意義不單純只是表現(xiàn)。

在開發(fā)模塊化是需要注意的一些步驟（以 CSS 模塊化為例）：

• 為模塊分類命名（m-module-name）
• 以一個主選擇器作為開頭（模塊跟節(jié)點(diǎn)）
• 使用以主選擇器開頭的后代選擇器（模塊子節(jié)點(diǎn)）

http://wiki.jikexueyuan.com/project/fend_note/images/M/module_css_class_extend.jpg" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/M/module-css-name-module.jpg" alt="" />

模塊化可以利于多人開發(fā)，便于擴(kuò)展，當(dāng)然也可以提高代碼的可讀性與可維護(hù)性。