作者介紹：劉露茜，同濟大學研究生，美團點評點餐團隊成員。
OpenDoc
我們將團隊內部的部分文件經過編輯分享出來，主要出於以下考慮：
- 我們希望有志於加入團隊的朋友能得到同等的資訊，做好相應的準備
- 團隊的工作經驗與方法的分享和技術分享一樣是有價值的
- 聽取同行們的改進建議
目的
1）規範目錄結構
2）清理無用程式碼
以業務為維度組織檔案
幾個主流框架在構建大型專案時常用的目錄結構：
框架 | 目錄結構 |
|---|---|
| Angular |
|
| React |
|
| Vue |
|
以業務為維度組織檔案有以下好處：
元件資源聚合，更容易管理和維護，考慮到長期迭代和工作交接應該是必要的
引用元件時不需要關心資源依賴的問題
區分業務元件和通用元件有利於更好把握元件的粒度和方法的抽象程度
專案結構規範
資料夾 | 功能 | 最佳實踐 | 舉例 |
|---|---|---|---|
| entries | 入口檔案 | 無子資料夾，只有每個頁面的js入口檔案 | |
| lib | 自定義元件庫 | 將每個頁面都會引用的公共元件置於common子資料夾下，其他元件檔案平行置於lib資料夾下 使用redux時，在lib下新建actions和reducers資料夾，分別儲存相應檔案 |
|
| less | 自定義樣式庫 | 新增檔案按照功能進行分類：
|
|
| templates | 模板庫 |
|
|
引用檔案規範
| 類別 | 規範 | 舉例 |
|---|---|---|
| 引用檔案 | 引用檔案時按照以下分類引用，不同分類間空一行
|
|
| 引用 js 和 less 檔案時不加字尾，引用模板檔案時加 js 字尾 | ||
| 命名 | 新頁面的 html、less、js 檔案命名一致，檔名均小寫、並以短橫線（-）連線 | menu-list.html menu-list.less menu-list.js |
| 處理廢棄檔案 | 當某個頁面被其他頁面替換或被刪除後，應在對應檔案頂部新增註釋，說明該檔案廢棄原因、廢棄時間、需要review人員和確認刪除時間 |
|
清理程式碼
清理範圍包括：
- 已廢棄的檔案
- 未使用的less、js中函式
- 已被引用但未被使用檔案
檔案種類 | 清理方法 |
|---|---|
| html | 找 前端&後端&產品 確認是否已棄用 |
| css | chrome devTool → Audits → 選中Audit Present State → Run → Remove unused CSS rules chrome還提供了css tracker 和css coverage來檢測css使用（實驗特性） |
| js |
注意未被呼叫的函式 |