web前端的開發規範比較重要的知識點

千鋒HTML5學院發表於2019-04-28
Web前端


　　本文主要從以下幾個方面來概述前端的開發規範
　　1. 目錄構建規範
　　2. 前端命名規範
　　3. 前端工作規範
　　4. 開發文件的書寫規範
　　1. 前端目錄構建規範
　　我們從命名原則、根目錄、業務邏輯等方面進行目錄構建
　　1.1 命名原則：

　　1.2 根目錄(root)結構按職能劃分(如下：)

　　1.3 根據業務邏輯進行資料夾的劃分(如下：)
　　1.4 總結：
　　以上目錄開發規範有兩種使用途徑
　　1. 使用前端工程化工具如webpack、gulp等進行手動打造
　　2. 利用框架提供的腳手架工具進行修改
　　2. 前端命名規範
　　這部分內容我從以下兩個方面來進行講解
　　· CSS命名規範
　　o BEM規範
　　o OOCSS規範
　　· javaScript編寫規範
　　o jslint
　　o eslint
　　2.1 css命名規範
　　2.1.1 BEM規範
　　2.1.2 OOCSS規範
　　2.2 js編寫程式碼規範
　　· jslint
　　· eslint
　　3. 前端工作規範
　　我們從 日報 、 週報以及郵件格式三個方面來了解
　　3.1 日報內容如下
　　- 上午你做什麼
　　- 下午你做了什麼
　　- 遇到什麼問題?是否有解決?
　　- 明天的計劃?(明天準備做什麼)
　　- 最後在內容最後面跟上日期
　　3.2 週報內容如下：
　　· 2016.07.25-2016.07.29週報：
　　i. 本週工作主要內容：
　　§ 完成了宏視雲h5播放器升級及大資料上報;
　　§ 修復xk-h5播放器bug：在三星手機自帶瀏覽器無法進行滑動seek;
　　§ admin-console後臺管理系統初步完成終端訪問頁面和資料統計概覽頁面的製作;
　　ii. 工作中存在的主要問題：
　　iii. - webserver大資料展示頁面移植到admin-console後臺管理系統存在bootstrap與jquery.easyui衝突等幾個相容性問題;
　　iv. - 解決這個問題的思路可能不是最有效的方法，可能使用iframe會快些;使用iframe存在如何在easyui頁面控制iframe頁面及如何在瀏覽器視窗改變時，iframe也跟著改變等問題;
　　v. 下週工作計劃：
　　§ 完成上週未完成的admin-console大資料展示頁面的製作;
　　§ 完成工作以後，如果有時間的話嘗試下用iframe解決;
　　§ 詢問師兄有沒有可以幫忙做的工作;
　　3.3 常用郵件格式如下：
　　1. 明確郵件傳送誰?
　　o 參與者： 一定要想清楚， 如果不清楚， 記得問一下你直接上司(同事)
　　2. 郵件的主題：
　　o 主題必須有且僅有一個
　　o 必要時， 可以新增： 【請批閱】 、 等字眼
　　3. 郵件正文
　　o 稱呼要明確：
　　o 條理分明 舉例：
　　o 各位領導好：
　　o 以下內容是xxx 請熟知/請批閱
　　4. 署名：
　　o 什麼部分 什麼職位 什麼姓名 什麼時間
　　5. 附件
　　o 需要說明附件是做什麼的?
　　6. 轉發;
　　o 需要對原郵件進行說明。，然後寫清楚自己的意圖
　　4. 開發文件的書寫規範
　　這部分內容從以下幾個部分進行說明
　　· html規範
　　· css規範
　　· js規範
　　4.1 html規範
　　1. 標籤上屬性的順序建議如下： class ( class 是為高可複用元件設計的,所以應處在第一位) id name (id 更加具體且應該儘量少使用,所以將它放在第二位) data-* src for type href value placeholder title alt aria-* role required readonly disabled
　　2. id/class 命名規則: BEM OOCSS SMACSS(擴充套件)
　　3. 註釋規範(最好用英文)

　　4.2 css規範
　　4. 屬性順序
　　o 位置屬性 ( position top right z-index display float etc.)
　　o 大小 ( width height padding margin etc.)
　　o 文字系列 ( font line-height letter-spacing color text-align ect.)
　　o 背景 ( background border etc.)
　　o 其他 ( animation transition etc.)
　　o 以及註釋的寫法
　　5. 儘量不使用選擇器 (css3選擇器)
　　.content.first-child

　　6. 屬性使用縮寫：



　　7. 去掉小數點前面的 0

　　4.3 Js規範
　　8. 語言規範
　　o 宣告變數必須加上 let 關鍵字.不要再使用 var
　　o 優先使用箭頭函式
　　o 使用模板字串取代連線字串
　　9. 使用分號
　　o 如果僅依靠語句間的隱式分隔,有時會很麻煩,使用分號更能清楚哪裡是語句的起止,而且有些情況下,漏掉分號會出 BUG
　　10. 塊內函式宣告
　　o 不要在塊內宣告一個函式,e.g.

　　o 如果確實需要,使用函式表示式來初始化變數



　　11. 迴圈注意
　　o forEach
　　o map
　　o filter
　　o every
　　o some
　　o for..in
　　o for...of
　　o for迴圈 while
　　o do...while
　　12. 命名規範：
　　o camel 表示駝峰命名法 pascal表示 首字母大寫
　　o 變數名: 必須使用 camel 命名法
　　o 引數名: 必須使用 camel 命名法
　　o 函式名: 必須使用 camel 命名法
　　o 方法/屬性: 必須使用 camel 命名法
　　o 私有 ( 保護 ) 成員: 必須以下劃線開頭
　　o 常量名: 必須使用全部大寫的下劃線命名法,e.g. XTEP_HOST_API
　　o 類名: 必須使用 pascal 命名法
　　o 列舉名: 必須使用 pascal 命名法
　　o 列舉的屬性: 必須使用全部大寫的下劃線命名法,e.g. XTEP_HOST_API
　　o 名稱空間: 必須使用 camel 命名法
　　o 語義: 命名同時還需要關注語義
　　13. 宣告：
　　o var let const 應該放在function 已進入函式的時候
　　o 註釋變數的功能及代表的含義,且應以字母順序排序.每個變數單獨佔一行以便新增註釋



　　14. 回撥函式規範：
　　回撥函式統一使用 Promise 函式,回撥成功的引數統一為 res,錯誤引數為 err

　　15. 標點規範
　　js中統一使用反引號()或是單引號('')， 不使用雙引號("")
　　16. 函式預設值
　　函式預設值寫在其他引數後面
原文轉自知乎：      


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69917019/viewspace-2642835/，如需轉載，請註明出處，否則將追究法律責任。

相關文章