每個(gè)項(xiàng)目中需包含editorconfig和eslint，具體以這兩個(gè)文件配置為準(zhǔn)浑吟，參考下實(shí)際代碼開(kāi)發(fā)中比較好的規(guī)范標(biāo)準(zhǔn)笙纤。
一、通用規(guī)范
- TAB鍵統(tǒng)一為兩個(gè)空格组力，整齊緊湊
- CSS樣式屬性或者JavaScript代碼后加“;”省容，方便斷句
- 文件內(nèi)容統(tǒng)一編碼為UTF-8
- 換行符統(tǒng)一為lf，除了IDE設(shè)置忿项，還需設(shè)置git里的轉(zhuǎn)換
- 做好兼容IE10+/firefox蓉冈，
- 做自適應(yīng)方案flex(柵格)+viewport+media query
二、目錄規(guī)范
- 層次轩触，建議扁平化寞酿，最多不要超過(guò)三層
- 分類(lèi)，建議按模塊分
- 模塊脱柱，每個(gè)模塊基本文件一致伐弹，模塊入口文件默認(rèn)為index.(相關(guān)后綴名)
三、命名規(guī)范
- 做到最簡(jiǎn)化榨为，但能一眼看出意思
- 變量一般為名詞惨好，同模塊不同功能可寫(xiě)成“模塊名+功能”，類(lèi)聚便于排序查找
- 方法随闺、函數(shù)一般為動(dòng)詞（開(kāi)頭）
- 多單詞駝峰日川，簡(jiǎn)寫(xiě)詞大寫(xiě)
- 常量名：大寫(xiě)加下劃線，如CONNECT_CLOSE
- 類(lèi)名：開(kāi)頭大寫(xiě)
- 私有變量：開(kāi)頭下劃線
四矩乐、JSON規(guī)范
- 屬性名雙引號(hào)""
- 花括號(hào)中最后一個(gè)屬性后不需要逗號(hào)
五龄句、HTML規(guī)范
- 開(kāi)頭第一行HTML5文檔標(biāo)準(zhǔn) <!doctype html>
- IE采用最新模式配置 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- 360等雙核默認(rèn)選用急速模式 <meta name="renderer" content="webkit">
- 自適應(yīng)通用配置 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> 不需rem配合
- 非特殊情況下CSS樣式文件外鏈至HEAD之間，JavaScript文件在body底部引用
- 所有標(biāo)簽閉合
- 屬性值雙引號(hào)""
- 保持結(jié)構(gòu)整合散罕，避免無(wú)謂的增加層次嵌套
六分歇、CSS規(guī)范
- 根據(jù)新建樣式的適用范圍分為三級(jí)：全站級(jí)、產(chǎn)品級(jí)欧漱、頁(yè)面級(jí)
- 盡量通過(guò)疊層和繼承重用已有樣式
- 不要輕易改動(dòng)全站級(jí)CSS职抡。改動(dòng)后，要經(jīng)過(guò)全面測(cè)試
- 使用選擇器時(shí)误甚，命名比較短的詞匯或縮寫(xiě)不建議直接定義缚甩，重名率高
- 可用上級(jí)節(jié)點(diǎn)進(jìn)行限定谱净，命名空間的概念，保證只對(duì)該模塊有作用
- 盡量不要在標(biāo)簽上直接寫(xiě)樣式
- 盡量不要寫(xiě)!important
- 避免寫(xiě)表達(dá)式expression
- 使用CSS擴(kuò)展語(yǔ)言蹄胰，如Sass
七岳遥、JavaScript規(guī)范
- “()”前后需要加空格
- “=”前后需要加空格
- “,”“:”后面需要加空格
- for-in循環(huán)體中必須用hasOwnProperty方法檢查成員是否為自身成員，避免來(lái)自原型鏈上的污染
- 長(zhǎng)語(yǔ)句斷行
- 注重HTML分離裕寨，減小reflow
- 空行分隔邏輯獨(dú)立塊
- 多用why型的注釋
- 需改進(jìn)或未完成代碼用TODO標(biāo)記
- 使用Eslint中Airbnb標(biāo)準(zhǔn)
- 減少代碼重復(fù)率和復(fù)雜度
八、圖片規(guī)范
- 大圖需要優(yōu)化派继，保持大小不超過(guò)一兩百K
- 圖標(biāo)用字體代替
- 極小圖可用base64
- 可使用第三方圖片服務(wù)宾袜，顯示可控
- 圖片加載考慮懶加載
- 圖片顯示建議采用相框居中
九、接口規(guī)范
- 統(tǒng)一接收驾窟、返回格式庆猫，現(xiàn)流行JSON，contentType最好為application/json而不是表單形式提交（表單傳的值都是字符串绅络，且不能嵌套）月培，有圖片用multipart/form-data
- 統(tǒng)一返回固定參數(shù)，成功/失敗格式
- 統(tǒng)一分頁(yè)參數(shù)
- 統(tǒng)一金額單位
- 統(tǒng)一時(shí)間日期格式
- 統(tǒng)一返回關(guān)聯(lián)數(shù)據(jù)格式恩急，2one需要一個(gè)顯示名稱(chēng)杉畜，2many需要數(shù)組對(duì)象
- 實(shí)現(xiàn)CORS跨域
- 在線接口文檔維護(hù)，利于管理及mock衷恭，如YAPI
