目錄結(jié)構(gòu)優(yōu)化

現(xiàn)在前端項(xiàng)目越來(lái)越變得像大型工程了，而且越來(lái)越復(fù)雜了，需要處理好組員之間的協(xié)作，也需要做好業(yè)務(wù)分塊、去耦合來(lái)降低維護(hù)成本，并且還要保持高效率開發(fā)。

工程目錄結(jié)構(gòu)的優(yōu)化是能達(dá)到這個(gè)目的的一種方式。一般而言，不是多頁(yè)面工程還是單頁(yè)面應(yīng)用，抑或二者都有，目錄結(jié)構(gòu)都是以下兩種方式：

1. 類型分組（按文件類型、業(yè)務(wù)類型等進(jìn)行分組）

2. 模塊分塊（按頁(yè)面模塊、業(yè)務(wù)模塊等進(jìn)行分塊）

1. 類型分組

這種方式是以文件類型、業(yè)務(wù)類型或其他類型進(jìn)行分組。

多頁(yè)面工程

 -- src/ 源代碼目錄

     -- html/ html 文件目錄
         -- page1.html page1 頁(yè)面的 html 文件
         -- module1/ 子目錄
             -- page2.html page2 頁(yè)面的 html 文件
             -- ...
            
         -- ...    
        
     -- js/ js 文件目錄
         -- common/ 公共文件目錄
         -- page1/ page1 頁(yè)面的 js 目錄
         -- module1/ 子目錄
             -- page2/ page2 頁(yè)面的 js 目錄
             -- ...
            
         -- ...
        
     -- css/ css 文件目錄
         -- common/ 公共文件目錄
         -- page1/ page1 頁(yè)面的 css 目錄
         -- module1/ 子目錄
             -- page2/ page2 頁(yè)面的 css 目錄
             -- ...
            
         -- ...
        
     -- less/ less 文件目錄（內(nèi)部結(jié)構(gòu)跟上面類似）
     -- images/ 圖片文件目錄（內(nèi)部結(jié)構(gòu)跟上面類似）
     -- data/ api-mock 文件目錄（內(nèi)部結(jié)構(gòu)跟上面類似）
     -- ...

單頁(yè)面應(yīng)用

 -- src/ 源代碼目錄
     -- components/ 組件文件目錄（如 react）
         -- common/ 公共文件目錄
         -- page1.js page1 頁(yè)面的組件文件
         -- module1/ 子目錄
             -- page2.js page2 頁(yè)面的組件文件
             -- ...
            
         -- ...    
        
     -- services/ service 文件目錄
         -- service1.js page1 頁(yè)面的 service
         -- module1/ 子目錄
             -- service2.js page2 頁(yè)面的 service
             -- ...
            
         -- ...
        
     -- models/ model 文件目錄
         -- model1.js page1 頁(yè)面的 model
         -- module1/ 子目錄
             -- model2.js page2 頁(yè)面的 model
             -- ...
            
         -- ...
        
     -- ...
    
 -- images/ 圖片文件目錄（內(nèi)部結(jié)構(gòu)跟上面類似）
 -- data/ api-mock 文件目錄（內(nèi)部結(jié)構(gòu)跟上面類似）
 -- ...

這種方式的優(yōu)勢(shì)是能使文件分類、功能分類非常清晰，并且能夠在一定程度上約束組員的書寫方式（目錄結(jié)構(gòu)），也清晰明了、簡(jiǎn)單易懂。但這種方式有很明顯的缺點(diǎn)：

1. 不能很簡(jiǎn)單快捷的知道某個(gè)頁(yè)面或某個(gè)功能塊有哪些文件；

2. 創(chuàng)建、更新、刪除頁(yè)面會(huì)變得很低效，因?yàn)樾枰�到不同文件類別目錄去找文件；

3. 開發(fā)效率不高，并且很容易疲勞，因?yàn)榫庉嬕粋�(gè)頁(yè)面的時(shí)候需要在編輯器的文件導(dǎo)航中展開各個(gè)文件，導(dǎo)航就會(huì)非常長(zhǎng)。

所以，對(duì)前端項(xiàng)目而言，多數(shù)情況下我不會(huì)使用這種目錄結(jié)構(gòu)。

2. 模塊分塊

這種方式是以頁(yè)面模塊、業(yè)務(wù)模塊或其他類型進(jìn)行分塊。

多頁(yè)面工程

 -- src/ 源代碼目錄

     -- page1/ page1 頁(yè)面的工作空間
         -- index.html html 入口文件
         -- index.js js 入口文件
         -- index.(css less scss) 樣式入口文件
         -- html/ html 片段目錄
         -- js/ js 文件目錄
         -- (css less scss)/ 樣式文件目錄
         -- data/ 本地 json 數(shù)據(jù)模擬
         -- images/ 圖片文件目錄
         -- components/ 組件目錄（如果基于 react, vue 等組件化框架）
         -- ...
        
     -- module1/ 子目錄
         -- page2/ page2 頁(yè)面的工作空間（內(nèi)部結(jié)構(gòu)跟 page1 類似）
        
     -- ...
    
 -- html/ 公共 html 片段
 -- less/ 公共 less 目錄
 -- components/ 公共組件目錄
 -- images/ 公共圖片目錄
 -- data/ 公共 api-mock 文件目錄
 -- ...

單頁(yè)面應(yīng)用

 -- src/ 源代碼目錄
     -- page1/ page1 頁(yè)面的工作空間
         -- index.js 入口文件
         -- service.js
         -- model.js
         -- data/ 本地 json 數(shù)據(jù)模擬
         -- images/ 圖片文件目錄
         -- components/ 組件目錄（如果基于 react, vue 等組件化框架）
         -- ...
        
     -- module1/ 子目錄
         -- page2/ page2 頁(yè)面的工作空間（內(nèi)部結(jié)構(gòu)跟 page1 類似）
        
     -- ...
    
 -- images/ 公共圖片目錄
 -- data/ 公共 api-mock 文件目錄
 -- components/ 公共組件目錄   
 -- ...

這種方式避免了“類型分組”的問題，但也有一些不足：

1. 對(duì)組員的約束很小，每個(gè)工作空間下的目錄結(jié)構(gòu)可以完全不一樣；

2. 工作空間下的目錄結(jié)構(gòu)不是很容易定義好，對(duì)開發(fā)人員水平要求要高一些。

盡管有一些不足，但是可以配合構(gòu)建工具消除，所以一般情況下我會(huì)選擇這種目錄結(jié)構(gòu)。

3. 配合使用

很多情況下，這兩種方式是可以配合使用的，比如多頁(yè)面工程中有小型單頁(yè)面應(yīng)用。

 -- src/ 源代碼目錄

     -- page1/ page1 頁(yè)面的工作空間
         -- index.html html 入口文件
         -- index.js js 入口文件
         -- index.(css less scss) 樣式入口文件
         -- html/ html 片段目錄
         -- js/ js 文件目錄
             -- ajax/ 對(duì) ajax 封裝的目錄
             -- util/ 工具類函數(shù)的目錄
             -- pages/ spa 應(yīng)用頁(yè)面目錄
             -- data/ 靜態(tài)數(shù)據(jù)目錄
             -- tpl/ 模板目錄
             -- (event view)/ 事件監(jiān)聽文件目錄
             -- ...
         -- data/ 本地 json 數(shù)據(jù)模擬
         -- (css less scss)/ 樣式文件目錄
         -- images/ 圖片文件目錄
         -- components/ 組件目錄（如果基于 react, vue 等組件化框架）
         -- ...
        
     -- ...

以上就是前端項(xiàng)目中目錄結(jié)構(gòu)優(yōu)化的方法總結(jié)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！