前端標準規範-v1.0

整體原則：極簡、極快、解耦
主要適用範圍：vue 單頁項目+

文件組織規範

文件結構

原則：文件少、層級淺、資源集中、相對獨立互不影響
基本結構：

.
|_ node_modules
|_ dist
|_ src
    |_ assets // 公共資源
        |_ img // 全局圖片
            |- favicon.png
        |- common.js // 全局公用 js
        |- common.less // 重置樣式表 + 自定義全局樣式
        |- mixin.less // 全局 less 變量
        |- template.html // 模板
    |_ components // 組件
        |_toast 
            |- index.vue 
            |- index.less
        |- index.js // 全部組件的集合
    |_ pages // 具體頁面
        |_ index // 首頁
            |- index.vue
            |- index.less
            |- good.png // 少許本頁面下獨自使用的圖片
        |- img // 兩個以上頁面都用到的圖片單獨抽離防止
            |- copy.jpg
        |_ temp // 模板
            |- index.vue
            |- index.less
    |_ router // 路由
        |- index.js
    |_ vuex // vuex 插件
        |- index.js
    |- App.vue 
    |- main.js

說明：

1. 關於圖片：少許直接放到本頁面文件下（資源集中，互不影響），有兩個頁面以上公用則抽離放到 img 文件夾下（下降層級），assets 下的 img 主要放 favicon.png、pwa等全局圖片（低頻資源遠離，不分散注意力）
2. assets 目錄：放全局資源，此類資源輻射全局，改動頻率低，集中在一塊兒，爲更好地聚焦核心
3. temp 文件：不用新建頁面，直接複製而後改個文件名便可

文件命名

文件命名統一使用小寫字母，必要的時候能夠加中劃線 -
頁面文件名不宜過長，裏面的文件統一以 index 爲前綴，index.vue、index.less

父子組件命名：

|_ button-group // 組件組合
    |_ button // 組件
    |_ cell // 父組件
    |_ cell-item // 子組件

JS 規範

JS 書寫格式

藉助 Eslint 以及編輯器的代碼格式化功能確保代碼格式統一
Eslint 使用 JavaScript standard 代碼規範

JS 命名

1. 所有用單引號
2. 統一用駝峯命名法，儘可能保持語義化
3. 類名開頭大寫
4. 合理使用複數、簡稱、縮寫
5. 多寫註釋，同時保持精煉

CSS 規範

規則：所有用雙引號，小寫。每一個頁面的 css 命名以文件外層文件夾名字加 _index 做爲開頭（因此說一開始文件夾名字不宜過長），統一使用下劃線輔助 _
好比：

.about_index{
        .tit{
            font-size: 18px; 
        }
        .nav{
            margin-bottom: 20PX;
        }
    }

緣由：下劃線易選中複製，js 中不容許有中劃線，js 操做類名夾帶中劃線互相混在一塊兒，加劇記憶負擔，容易混淆；文件名稱都是不重複的，以文件名做爲此頁面類名的開頭能夠確保不會有重複，而後此類名下的命名可與其餘頁面重複，依靠層級限制類名可重複使用，極大減輕樣式命名的工做量

HTML 規範

1. 加強語義化：儘可能使用 h5 新標籤
2. 標籤嵌套規則，防止詭異錯誤：ul、ol 下嵌套 li，dl 下嵌套dt、dd，p、dt、h標籤裏面不嵌套塊元素，a 標籤不能嵌套 a，行內元素不能嵌套塊元素
3. 注意 seo 優化：img、a、strong、em、h1-h3
4. 格式化標籤：span、em、strong 格式化成無語義標籤，i 統一給圖標使用
5. 所有用雙引號，小寫

性能優化

提交代碼前檢查

1. 圖片
   必須加 favicon；
   有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現；
   ps 中的切圖 jpg 品質取很是高(80)，而後用 PPDuck 壓圖工具作無損壓縮；
   儘可能使用 jpg 的圖，移動端大張圖片不大於 50kb；
   移動端使用 2x 圖；
   避免空的 src 和 href；
2. a 標籤 href 若是爲空，統一使用 "javascript:;" 而非 "void(0)"
3. border-radius: 2px 值不能爲單數，最小爲 2px
4. 定位元素垂直居中 top 值通常寫 45%，50% 看起來會偏下
5. 合理的鼠標光標
6. 節流防抖
7. 類型轉換、非空判斷
8. 異步請求空白處理機制，好比加載 loading
9. 統一的錯誤返回處理機制
10. 微信分享標題敏感字，紅包、錢...
11. app回退、跳轉是否正確 iOS、android
12. 適配須要考慮 320~750 320 480 640 iphoneX 等
13. 擴大點擊區域

優化速度

1. 頁面首次打開請求接口不可超過3個，過多請求須要整合
2. 控制域名數量，每一個頁面請求域名通常有3個，一個主域名，一個靜態資源域名，一個埋點分析域名（存在資源並行下載數限制的問題）
3. 綜合衡量 css、js 的請求數量和包大小，超過 150kb 考慮作拆分
4. 後端接口作緩存
5. 靜態資源統一部署到 CDN
6. 開啓 zip 壓縮