web前端之頁面模塊化

規(guī)范

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

“相信有很多想學(xué)前端的小伙伴,今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨,從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理,送給每一位前端小伙伴,53763,

1707這里是小白聚集地,歡迎初學(xué)和進(jìn)階中的小伙伴?!?/p>

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

文件規(guī)范

注釋規(guī)范

命名規(guī)范

書寫規(guī)范

其他規(guī)范

文件規(guī)范

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

分類(分類可分為通用類業(yè)務(wù)類。通用類有第三方的庫,團(tuán)隊(duì)開發(fā)的通用模塊或者通用樣式。業(yè)務(wù)類則有不同業(yè)務(wù)所對(duì)應(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 書寫格式,使用多行?。?/p>

空格與分號(hào)(使用空格進(jìn)行縮進(jìn)并保留最后一個(gè)屬性的分號(hào))

書寫順序(更具顯示的重要性來安排可參照下表)

Hack 方式(三思而后行)

值格式(例如顏色值的格式以及引用中是否使用引號(hào))

其他規(guī)范

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

HTML

文檔聲明

閉合

屬性

層級(jí)

注釋

大小寫

圖片

文件名稱(語言以及長度的規(guī)范)

保留源文件

圖片合并

模塊化

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

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

為模塊分類命名(m-module-name)

以一個(gè)主選擇器作為開頭(模塊跟節(jié)點(diǎn))

使用以主選擇器開頭的后代選擇器(模塊子節(jié)點(diǎn))

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,115評(píng)論 25 709
  • 用兩張圖告訴你,為什么你的 App 會(huì)卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 14,030評(píng)論 2 59
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,825評(píng)論 1 45
  • ——觀《后來的我們》有感 前言 其實(shí)一開始是不知道這部電影的。最早是被網(wǎng)易云推了陳奕迅的《我們》,看了mv,但也沒...
    鵬入渤海_lion閱讀 1,158評(píng)論 2 4
  • 今天
    李李紅燒肉閱讀 261評(píng)論 0 0

友情鏈接更多精彩內(nèi)容