一、JavaScript
1）語言
- 對所有引用都使用 const，不要使用 var。原因：這樣做可以確保你無法重新分配引用，以避免出現錯誤和難以理解的代碼。
- 如果引用是可變動的，使用 let 代替 var。原因：let 是塊級作用域的，而不像 var 屬於函數級作用域。
- 堅持使用全等 === 摒棄相等 ==，原因：相等會進行隱式的類型轉換。
- 使用瀏覽器全局變量時加上 window 前綴，document 和 navigator 除外。
參考《語言規范》
2）命名
- 變量、函數、參數、方法、屬性使用駝峰式命名（CamelCase），例如 loadingModules。
- 函數或方法在命名時，建議帶上可區分的特定詞語，便於全局搜索。
- 常量、枚舉屬性使用全部字母大寫，單詞間下划線分隔，例如 HTML_ENTITY。
- 類、枚舉變量使用Pascal命名法，例如 TargetState。
- 函數名使用動賓短語，例如 getStyle()。
- 布爾類型的變量使用 is 或 has 為前綴。
- Promise對象使用動賓短語的進行時表達，例如 loadingData。
3）React
如果是組件文件，則使用 PascalCase，如 MyComponent.js。React 組件使用 PascalCase，組件實例使用 CamelCase。
import ReservationCard from './ReservationCard'
const reservationItem = <ReservationCard />
如果組件是一個目錄，則組件主入口命名為 index，如 index.js。對於文件夾中的根組件，使用 index.js 作為文件名，使用文件夾的名字作為組件的名字。
import Footer from './Footer'
React DOM 使用小駝峰式命名法來定義屬性的名稱，而不使用 HTML 屬性名稱的命名約定，例如 onClick。
Hooks 只能應用於函數式組件中，只在 React 函數最頂層使用 Hooks。不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最頂層調用他們。
4）注釋
單行注釋用 //，多行注釋用 /**...*/。
- 為函數、方法、變量、事件、文件添加注釋，說明其功能。
- 對於內部實現、不容易理解的邏輯、摘要信息等，尤其要注明核心的細節注釋。
- 對於一些常量，需修飾其含義。
特殊標記：
- TODO: 有功能待實現。此時需要對將要實現的功能進行簡單說明。
- FIXME: 該處代碼運行沒問題，但可能由於時間趕或者其他原因，需要修正。此時需要對如何修正進行簡單說明。
- HACK: 為修正某些問題而寫的不太好或者使用了某些詭異手段的代碼。此時需要對思路或詭異手段進行描述。
- XXXX: 該處存在陷阱。此時需要對陷阱進行描述。
5）參數設計
- 一個函數的參數控制在 6 個以內。
- 有些函數的參數並不是作為算法的輸入，而是對算法的某些分支條件判斷之用，此類參數建議通過一個 options 參數傳遞。
二、圖片
1）大小
中國普通家庭的寬帶基本能達到8Mbps，實際速率大約為500—900KB/s，全國3G/4G用戶占有比超過了50%，為了保證圖片能更好地加載展示給用戶看，約定：
- PC平台單張的圖片的大小不應大於 200KB。
- 移動平台單張的圖片的大小不應大於 100KB。
- 透明PNG圖片可使用壓縮工具壓縮后提供。
2）質量
- 上線的圖片都應該經過壓縮處理，壓縮后的圖片不應該出現肉眼可感知的失真區域。
- 60質量的JPEG格式圖片與質量大於60的相比，肉眼已看不出明顯的區別，因此保存 JPEG 圖的時候，質量一般控制在60，若保真度要求高的圖片可適量提高到 80，圖片大小控制在 200KB 以內。
- JPG圖片必須壓縮，一般80%品質即可，保證文字清晰。
- JPG圖片必須使用漸進式圖片：使用Photoshop的“存儲為Web所用格式”時候，勾選“連續”。
3）跨域
圖片跨域問題的解決：設置圖片 crossOrigin 屬性為 ”Anonymous“。
三、多媒體
1）輸出
- 音頻格式為.mp3。
- 音頻文件大小壓縮控制在 1M 以內。
2）自動播放
背景音樂不能自動播放，音頻在H5頁面中通常做為背景音樂，有些需求要求實現自動播放，解決方法：
- 頁面設計中添加播放音樂的開關，通過交互操作實現音樂的播放；
- 微信或APP場景中通過監聽WeixinJSBridgeReady事件、DOMContentLoaded事件；
- 通過手勢事件播放音樂，監聽body的touchstart事件，回調中播放音樂；
參考《移動端H5頁面音頻/視頻規范》
四、CSS
1）分類
- 重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差異，並設置部分標簽的初始樣式，以減少后面的重復勞動。
- 統一處理：建議在這個位置統一調用背景圖（這里指多個布局或模塊或元件共用的圖）和清除浮動（這里指通用性較高的布局、模塊、元件內的清除）等統一設置處理的樣式。
- 布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等。
- 模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊、各種列表、評論、搜索等。
- 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用於各種模塊中！比如按鈕、輸入框、loading、圖標等。
- 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等。
- 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色。
- 狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為后代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}）。
2）命名規則
ClassName的命名以上面的前綴開頭，且全部字母為小寫，單詞之間統一使用橫杠 “-” 連接。
若這六類前綴不能滿足需求，則可以另外定義一個或多個大類，但必須符合單個字母+”-“為前綴的命名規則，即 .x- 的格式。
這么設計可讓同樣的 ClassName 在不同的模塊或元件中重復使用，互不干擾；在多人協作或者分模塊協作的時候效果尤為明顯。
命名也可參考《tailwind.css》。
五、Node.js
1）MySQL
數據庫在設計表的字段時，除了顯而易見的字段（例如 cdate、mdate等），其余都必須配有注釋，包括表的作用。
當字段的值為常量時，應將其各個常量所對應的含義，也書寫在備注中。
六、工程師規范
1）自測聯調
- 對自己的代碼進行全面的多設備測試和兼容性測試。
- 如果自測過程中發現別人寫的代碼有問題，及時反饋。
2）總結分享
- 分享內容可以包含：架構思想、協作心得、設備特性介紹、新技術應用、調研展示、遇到的問題和解決方案等。
- 分享對象不限於：交互、視覺、前端及所有感興趣的人。
3）變更維護
- 如果未經過需求變更和設計變更，原則上不允許直接進行開發變更。
- 變更前應了解變更原因，變更后應該及時通知相關人員。
參考：