前端開發規范整理 · (。＿。） ?＿學習計劃走起

# 前端開發規范 #### 原則 - 堅持遵循代碼規范; - 寫代碼前先看看周圍同事的代碼，然后決定代碼風格; - 代碼規范的意義在于提供一個參照物，不會讓閱讀你代碼的人覺得很痛苦; - **制定符合公司的開發規范是很簡單的，重要的是我們能夠認識到規范的重要性，并堅持規范的開發習慣。** #### 目的 - 養成良好的編程習慣； - 寫出清楚、易懂、易維護的程序代碼； - 提高協同、開發效率； - 減少編碼過程中不必要的錯誤； - 降低企業成本。 ## HTML **正確閉合：** 盡可能使用正確的 `HTML` 閉合元素。 ```html <article>This is only a test.</article> ``` **語義化：** 根據使用場景選擇正確的 `HTML` 元素。 ```html  <a href="recommendations/">跳轉</a> ``` **小寫：** 推薦使用小寫字母，小寫風格看起來更加清爽，容易識別和編寫。 ```html <img src="google.png" /> color: #e5e5e5; ``` **雙引號：** 屬性的賦值應使用 `""` 確保統一的風格。 ```html <input data-state="title" type="text" /> ``` **縮進：** 一次縮進 `2` 個空格，不要使用 tab 或者混合 tab 和空格的縮進。 ```html <ul> <li>Fantastic</li> </ul> .example { color: blue; } ``` **多媒體元素：** 圖片、視頻、canvas、動畫等元素，應定義其 `alt` 屬性，提供其他可訪問的內容。 ```html <img src="spreadsheet.png" alt="Spreadsheet screenshot."> ``` **代碼注釋：** 采用類似標簽閉合的寫法，與 `HTML` 統一格式；注釋文案兩頭空格，與CSS注釋統一格式。 - 開始注釋：（注釋兩頭空格）。 - 結束注釋：（注釋前加 `/` 符號，類似標簽的閉合）。 - 允許只有開始注釋 ```html <body>  <div class="m_side">  <div class="sideblk"> <div class="m_hd3"><h3 class="tit">熱門標簽</h3> </div> ... </div> </div> </div>  </body> ``` **合理的結構布局** - 按照從上至下、從左到右的視覺順序書寫HTML結構; - 用 `<div>` 代替 `<table>` 布局，但表現具有明顯表格形式的數據，首選 `<table>` ; - 提倡并列結構布局，減少嵌套結構布局； - 提倡簡潔的嵌套，減少額外的冗余嵌套。 ## CSS **語義化命名：** 應該根據 `他們是什么` 來為元素命名，而不應該根據 `他們的外觀如何` 來命名。 ```css .primary {} .login {} ``` **分隔符：** 提倡使用 `_` 分隔符作為統一的命名規范。 ```css #video_id {} .ads_sample {} ``` **CSS書寫順序** ```css 1. 位置屬性 (position, top, right, z-index, display, float...) 2. 大小 (width, height, padding, margin...) 3. 文字系列 (font, line-height, letter-spacing, color- text-align...) 4. 背景 (background, border...) 5. 其他 (animation, transition...) .heavy{ position: absolute; top: 0; left: 10px; width: 100px; color: #008000; background: url(../img/logo.pg) no-repeat left center; } ``` **簡短：** `id` 和 `class` 應該盡量簡短，同時要容易理解。 ```css #nav {} .author {} ``` **縮進：** 為了反映層級關系和提高可讀性，塊級內容都應縮進 `2` 個空格位置。 ```css @media screen { html { background: #fff; color: #444; } } ``` **選擇器規則分隔：** 每個選擇器規則之間都用空行隔開。 ```css html { background: #fff; } body { margin: auto; width: 50%; } ``` **選擇器分隔：** 每個選擇器都另起一行。 ``` h1, h2, h3 { font-weight: normal; line-height: 1.2; } ``` **選擇器結尾：** 在選擇器和 `{}` 之間用空格隔開。 ```css #video { margin-top: 1em; } ``` **css屬性結尾：** 屬性名和值之間都應有一個空格。 ```css h3 { font-weight: bold; } ``` **css屬性賦值結尾：** 每行屬性之間都應以 `;` 結尾。 ```css .test { display: block; height: 100px; } ``` **規則注釋：** 注釋把 CSS 分成各個部分。 ```css // Header #adw_header {} // Footer #adw_footer {} // Gallery .adw_gallery {} ``` **選擇器：** 除非需要，否則不要在 `id` 或 `class` 前加元素名。 ```css // 不推薦 ul#example {} div.error {} ``` **避免使用標簽名：** 在使用子選擇器的時候，應盡量選擇定義新的`class`來做選擇器，除非確定子元素是最后一層。 ```css  .warp span{ font-size: 14px; } ``` **屬性簡寫：** 盡量使用 CSS 中可以簡寫的屬性 (如 `font、background、padding、margin、animation`等)，可以提高編碼效率及代碼可讀性。 ```css font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em; ``` **命名空間：** 給最外層的父容器設置選擇器防止命名沖突，同時提高代碼可維護性。 ```css .adw_container {} #note_container {} ``` **嵌套：** 選擇器的嵌套層級應不大于 `3` 級 ```css // 不推薦 .main { .content { .mark_content { .mark_txt { ... } } } } ``` **CSS 引號：** 屬性選擇器和屬性值用 `''` ，URI 的值不加引號。 ```css @import url(//www.google.com/css/maia.css); html { font-family: 'open sans', arial, sans-serif; } ``` **CSS 顏色：** 顏色色值盡量使用簡寫小寫形式，不建議使用命名色值。 ```css .a-body { color: #fff; } ``` **>、+、~選擇器：** 的兩邊各保留一個空格。 ```css label + input { margin-left: 5px; } ``` **偽類：** 偽類使用 `:` 標識。 ```css a:hover {} - active - focus - hover - link - visited - lang - not(n) - first-chlid - last-child - only-child - nth-child(n) - nth-last-child(n) - empty - checked - enabled - disabled - target - @page:first - @page:left - @page:right ``` **偽元素：** 偽元素使用 `::` 標識。 ```css div::after {} - first-letter - first-line - before - after - placeholder - selection ``` **0：** 長度為 `0` 時須省略單位，數值不足 `1` 的應省略 `.` 前的數字。 ``` .a-body { padding: 0 5px; opacity: .3; } ``` ## Javascript **文件命名：** 對于項目中出現的 `.js` `.vue`等文件的命名。 - `.md`：前綴全部大寫 - `.vue`：大駝峰式命名法（除 `index.vue` ） - `.js`：小駝峰式命名法 - `.其他`：小駝峰式命名法 ```javascript README.md Home.vue index.vue date.js package.json .env.development ``` **變量命名：** 小駝峰式命名法，前綴應當是 `名詞` ，盡量在變量名字中體現所屬類型（數字、字符串）。 ```javascript // 推薦 const maxCount = 10; const tableTitle = 'LoginTable'; ``` **常量命名：** 名稱 `全部大寫` ，使用字母和下劃線來組合命名，下劃線用以分割單詞 ```javascript const MAX_COUNT = 10; const URL = 'http://www.xxx.com'; ``` **函數：** 小駝峰式命名法，前綴應當是 `動詞`。 ```javascript // 是否可閱讀 function canRead() { return true; } ``` **構造函數：** 大駝峰式命名法，`首字母` 大寫。 ```javascript function Student(name) { this.name = name; } let st = new Student('tom'); ``` **類** - 類的聲明：大駝峰式命名法，`首字母` 大寫。 - 公有屬性和方法：參考變量命名和函數的命名。 - 私有屬性和方法：添加前綴 `_`，后面參考變量命名和函數的命名。 ```javascript class Student { constructor (name) { this.name = name this._times = 1 this._nation = 'china' } getTimes () { return this._times } _getNation () { return this._nation } } let st = new Student('tom') ``` **空格：** 添加 `空格` 有利于提高代碼的可讀性。 - 花括號前添加一個 `空格` - 在控制語句的小括號前添加一個 `空格` - 在多個參數之間添加一個 `空格` - 在屬性賦值 `=` 前后添加一個 `空格` - 字面量賦值 `：` 后面添加一個 `空格` - 在運算符 `+ - * / %` 等前后添加一個 `空格` - 在導入信息 `{ }` 里左右各添加一個 `空格` - 注釋 `*` 后添加一個 `空格·，`TODO` 前后添加 `空格` ```javascript function Person(name, arg2, arg3) { this.name = name } class Person { } if (true) {} let user = { name: 'zhangsan', age: '18' } const number = x + y import { name } from '/user' ``` **空行：** 添加 `空行` 有利于程序塊的劃分。 - 在新語句前和塊末后插入 `空行` - 不同功能屬性之間插入 `空行` - 注釋之前插入 `空行` ``` function setName() { } let age = 12 let userName = '張三' const maxTimes = 5 // 獲取姓名 function getName() { } ``` **換行：** 對象與數組過多情況下，酌情使用換行。 ``` let items = [ { name: '路由', title: '跳轉' }, { name: '路由', title: '跳轉' } ] let userInfo = { name: '張三', age: '18', gender: '男' } ``` **單行注釋：** 以 `//` 雙斜杠開始，`//` 與注釋文字之間保留一個空格。 ```javascript // 調用了一個函數 setTitle() ``` **多行注釋：** 注釋行數 `>2` 行時開啟，以 `/*` 開頭，以 `*/` 結尾，其他行以 `*` 開始，并且與注釋文字保留一個空格。 ```javascript /* * 代碼執行到這里后會調用setTitle()函數 * setTitle()：設置title的值 */ setTitle() ``` **功能注釋：** 功能未實現或有待完善的功能，需添加 `TODO` 注釋標記，后面加上 `描述`。 ```javascript // TODO 未實現分頁 setTitle() ``` **函數（方法）注釋：** 以多行注釋為基礎，添加特殊的 `注釋要求`。 ```javascript /** * 函數說明 * @關鍵字 */ ``` | 注釋名 | 語法 | 含義 | 示例 | | :---: | :---: | :---: | :---: | | @param | @param 參數名 {參數類型} 描述信息 | 描述參數的信息 | @param name {String} 傳入名稱 | | @return | @return {返回類型} 描述信息 | 描述返回值的信息 | @return {Boolean} true:可執行;false:不可執行 | | @autho | @author 作者信息 \[附屬信息：如郵箱、日期\] | 描述此函數作者的信息 | @author 張三 2015/07/21 | | @version | @version XX.XX.XX | 描述此函數的版本號 | @version 1.0.3 | | @example | @example 示例代碼 | 演示函數的使用 | @example setTitle('測試') | ```javascript /** * 合并Grid的行 * @param {Grid} grid 需要合并的Grid * @param {Array} cols 需要合并列的Index(序號)數組；從0開始計數，序號也包含。 * @param {Boolean} isAllSome 是否2個tr的cols必須完成一樣才能進行合并。true：完成一樣；false(默認)：不完全一樣 * @return void * @author polk6 2015/07/21 * @example * _________________ _________________ * | 年齡 | 姓名 | | 年齡 | 姓名 | * ----------------- mergeCells(grid,[0]) ----------------- * | 18 | 張三 | => | | 張三 | * ----------------- - 18 --------- * | 18 | 王五 | | | 王五 | * ----------------- ----------------- */ function mergeCells(grid, cols, isAllSome) { // Do Something } ``` **單引號：** 屬性的賦值應使用`''`確保統一的風格。 ```javascript const name = 'zhangsan' ``` **變量賦值：** 建議賦值使用 `const`，可變動的使用 `let` ，減少 `var` 的使用。 ```javascript const a = 1 let count = 1 if (true) { count += 1 } ``` **創建對象：** 建議使用 `字面值` 創建對象，方法與屬性均使用 `簡寫`，簡寫屬性提到 `開頭`。 ```javascript const first = 1 const second = 2 const item = { first, second, name: '張三', getName () { return item.name } } const userList = [1, 2, 3, 4] ``` **解構：** 增加操作的便利性。 ```javascript // Object const user = { name: 'zhangsan', age: '18', gender: '男' } const { name, age } = user const { name, ...params } = user // Array let items = [] const itemsCopy = [...items] const [first, second] = items // String let firstName = 'zhang', lastName = 'si' let innerHtml = `我叫${firstName} ${lastName}` ``` **函數表達式：** 建議使用函數表達式增加程序的可讀性。 ```javascript const foo = function getName() { } ``` **函數參數：** 建議使用 `...` rest語法，如使用其他方式，建議參數存在默認值。 ```javascript function foo(...args) { } function func(options = {}, name) { } ``` **箭頭函數：** 推薦使用 `=>` 函數，并且盡量簡潔化。 ```javascript const count = item => item + 1 (item => item + 1)(1) ``` **import 與 export：** 推薦使用 `import` `export` 來進行模塊之間的依賴。 - 不推薦使用 `import *` 來作為依賴模塊 - 依賴同一個文件不推薦多次`import` - 引入數據過多時，大于 `3` 行，建議換行處理，提升程序的可讀性 - 在只有一個需要 `export` 的模時，添加 `default` 更利于理解與維護 ```javascript import { username, password } from 'user' import { name, title, id, type } from 'project' export default function foo() {} ``` **數組函數：** 推薦使用數組新的函數 ` -高階函數-` 對數據進行處理。 ```javascript Array.map() Array.every() Array.filter() Array.find() Array.findIndex() Array.reduce() Array.some() Array.every() Array.foreach() Array.keys() Array.value() Array.entries() ``` **DOM & JS** - 盡可能的減少 `JS` 操作 `DOM` - 不建議在循環中進行 `DOM` 操作 - 使用 `CSS` 實現優先級要大于 `JS` 實現 - 酌情使用事件委托，事件委托要接近事件觸發節點，避免將所有事件冒泡委托給body節點。 ## 命名參考 **元素命名參考** ``` 1. page: 代表整個頁面，用于最外層。 2. wrapper: 頁面外圍控制整體布局寬度，用于最外層 3. container: 一個整體容器，用于最外層 4. header: 頁頭區域，用于頭部 5. nav: 導航條 6. main: 網站中的主要區域，用于中部主體內容 7. content: 網站中的內容區域 8. column: 欄目 9. sidebar: 側欄 10. footer: 頁尾、頁腳 11. copyright: 網站一些附加信息 ``` **文件命名參考** ``` 1. index.css: 一般用于首頁建立樣式 2. head.css: 頭部樣式，當多個頁面頭部設計風格相同時使用。 3. base.css: 共用樣式。 4. style.css: 獨立頁面所使用的樣式文件。 5. global.css: 頁面樣式基礎，全局公用樣式，頁面中必須包含。 6. layout.css: 布局、版面樣式，公用類型較多時使用，一般用在首頁級頁面和產品類頁面中 7. module.css: 模塊，用于產品類頁，也可與其它樣式配合使用。 8. master.css: 主要的樣式表 9. columns.css: 專欄樣式 10. themes.css: 主體樣式 11. forms.css: 表單樣式 12. mend.css: 補丁，基于以上樣式進行的私有化修補。 ``` **導航命名參考** ``` 1. nav, navbar, navigation, nav_wrapper: 導航條或導航包，代表橫向導航 2. top_nav: 頂部導航 3. main_nav: 主導航 4. sub_nav: 子導航 5. sidebar: 邊導航 6. left_sidebar: 左導航 7. right_sidebar: 右導航 8. title: 標題 9. summary: 摘要 10. menu: 菜單，區域包含一般的鏈接和菜單 11. sub_menu: 子菜單 12. drop: 下拉 13. dorp_menu: 下拉菜單 14. links: 鏈接菜單 ``` **功能命名參考** ``` 1. logo: 標記網站logo標志 2. banner: 標語、廣告條、頂部廣告條 3. login: 登陸，（例如登錄表單：form_login） 4. login_bar: 登錄條 5. register: 注冊 6. tool, toolbar: 工具條 7. search: 搜索 8. search_bar: 搜索條 9. search_input: 搜索輸入框 10. shop: 功能區，表示現在的 11. icon: 小圖標 12. label: 商標 13. homepage: 首頁 14. subpage: 二級頁面子頁面 15. hot: 熱門熱點 16. list: 文章列表，（例如：新聞列表：list_news） 17. scroll: 滾動 18. tab: 標簽 19. sitemap: 網站地圖 20. message: 提示信息 21. current: 當前的 22. joinus: 加入 23. status: 狀態 24. btn: 按鈕，（例如：搜索按鈕可寫成：btn_search） 25. tips: 小技巧 26. note: 注釋 27. guild: 指南 28. arr, arrow: 標記箭頭 29. service: 服務 30. breadcrumb: (即頁面所處位置導航提示） 31. download: 下載 32. vote: 投票 33. site_info: 網站信息 34. partner: 合作伙伴 35. link, friend_link: 友情鏈接 36. copyright: 版權信息 37. siteinfo_credits: 信譽 38. siteinfo_legal: 法律信息 ``` **動詞命名參考** | 動詞 | 含義 | 動詞 | 含義 | 動詞 | 含義 | 動詞 | 含義 | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | can | 能夠 | transfer | 轉換 | is | 是否判斷 | append | 添加 | | has | 含有 | finish | 完成 | get | 獲取 | set | 設置 | | load | 加載數據 | save | 保存 | add | 添加 | remove | 刪除 | | create | 創建 | destory | 銷毀 | start | 啟動 | stop | 停止 | | open | 打開 | close | 關閉 | read | 讀取 | write | 寫入 | | begin | 開始 | end | 結束 | backup | 備份 | restore | 恢復 | | import | 導入 | export | 導出 | split | 分割 | merge | 合并 | | inject | 注入 | extract | 提取 | attach | 附著 | detach | 脫離 | | bind | 綁定 | separate | 分離 | view | 查看 | browse | 瀏覽 | | edit | 編輯 | modify | 修改 | select | 選取 | mark | 標記 | | copy | 拷貝 | paste | 粘貼 | undo | 撤銷 | redo | 重做 | | insert | 插入 | delete | 移除 | clean | 清理 | clear | 清除 | | index | 索引 | sort | 排序 | find | 查找 | search | 搜索 | | increase | 增加 | decrease | 減少 | play | 播放 | pause | 暫停 | | launch | 啟動 | run | 運行 | compile | 編譯 | execute | 執行 | | debug | 調試 | trace | 跟蹤 | observe | 觀察 | listen | 監聽 | | build | 構建 | publish | 發布 | input | 輸入 | output | 輸出 | | encode | 編碼 | decode | 解碼 | compress | 壓縮 | decompress | 解壓縮 | | pack | 打包 | unpack | 解包 | parse | 解析 | emit | 生成 | | connect | 連接 | disconnect | 斷開連接 | send | 發送 | recive | 接收 | | download | 下載 | upload | 上傳 | refresh | 刷新 | synchronize | 同步 | | lock | 鎖定 | unlock | 解鎖 | check out | 遷出 | check in | 遷入 | | update | 更新 | revert | 復原 | submit | 提交 | commit | 交付 | | push | 推 | pull | 拉 | expand | 展開 | collapse | 折疊 | | begin | 開始 | end | 結束 | enter | 進入 | exit | 退出 | | abort | 放棄 | quit | 離開 | collect | 收集 | aggregate | 聚集 | | obsolete | 廢棄 | depreciate | 廢舊 ||||