OpenDoc

作者介紹：劉露茜，同濟大學研究生，美團點評點餐團隊成員。

我們將團隊內部的部分文件經過編輯分享出來，主要出於以下考慮：

1）規範目錄結構

2）清理無用程式碼

幾個主流框架在構建大型專案時常用的目錄結構：

框架

目錄結構

Angular

React

Vue

以業務為維度組織檔案有以下好處：

資料夾	功能	最佳實踐
entries	入口檔案	無子資料夾，只有每個頁面的js入口檔案
lib	自定義元件庫	將每個頁面都會引用的公共元件置於common子資料夾下，其他元件檔案平行置於lib資料夾下使用redux時，在lib下新建actions和reducers資料夾，分別儲存相應檔案
less	自定義樣式庫	新增檔案按照功能進行分類：被頁面直接引用－直接置於less資料夾下自定義元件樣式－置於less/components資料夾下基礎元件樣式－置於less/ui-base資料夾下全域性預定義樣式－置於less/lib資料夾下
templates	模板庫	僅被一個檔案引用的模板置於子資料夾下，該資料夾以引用檔名稱命名被多個檔案引用的模板直接置於templates資料夾下

類別	規範	舉例
引用檔案	引用檔案時按照以下分類引用，不同分類間空一行包管理器庫檔案自定義元件（lib/）模板檔案（templates/）
	引用 js 和 less 檔案時不加字尾，引用模板檔案時加 js 字尾
命名	新頁面的 html、less、js 檔案命名一致，檔名均小寫、並以短橫線（-）連線	menu-list.html menu-list.less menu-list.js
處理廢棄檔案	當某個頁面被其他頁面替換或被刪除後，應在對應檔案頂部新增註釋，說明該檔案廢棄原因、廢棄時間、需要review人員和確認刪除時間

清理範圍包括：

檔案種類	清理方法
html	找前端&後端&產品確認是否已棄用
css	chrome devTool → Audits → 選中Audit Present State → Run → Remove unused CSS rules chrome還提供了css tracker 和css coverage來檢測css使用（實驗特性）
js	使用unusedjs github.com/gmetais/unu… （不支援https）通過模組/元件之間的呼叫關係來判斷 eslint能找出未使用過的表示式、變數、引數，但不適用於使用 `new` 操作符的函式或建構函式呼叫注意未被呼叫的函式

檔案種類

清理方法

html 找前端&後端&產品確認是否已棄用

css

chrome devTool → Audits → 選中Audit Present State → Run → Remove unused CSS rules

chrome還提供了css tracker 和css coverage來檢測css使用（實驗特性）

js

注意未被呼叫的函式

OpenDoc - 專案程式碼整理指南