本篇文章給大家分享的是有關(guān)有什么實現(xiàn)前端項目中目錄結(jié)構(gòu)優(yōu)化的方法，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

為湟源等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及湟源網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、做網(wǎng)站、湟源網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

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

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

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

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

1. 類型分組

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

多頁面工程

|-- src/ 源代碼目錄

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

單頁面應(yīng)用

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

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

1. 不能很簡單快捷的知道某個頁面或某個功能塊有哪些文件；

2. 創(chuàng)建、更新、刪除頁面會變得很低效，因為需要到不同文件類別目錄去找文件；

3. 開發(fā)效率不高，并且很容易疲勞，因為編輯一個頁面的時候需要在編輯器的文件導航中展開各個文件，導航就會非常長。

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

2. 模塊分塊

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

多頁面工程

|-- src/ 源代碼目錄

    |-- page1/ page1 頁面的工作空間
        |-- 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 頁面的工作空間（內(nèi)部結(jié)構(gòu)跟 page1 類似）
        
    |-- ...
    
|-- html/ 公共 html 片段
|-- less/ 公共 less 目錄
|-- components/ 公共組件目錄
|-- images/ 公共圖片目錄
|-- data/ 公共 api-mock 文件目錄
|-- ...

單頁面應(yīng)用

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

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

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

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

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

3. 配合使用

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

|-- src/ 源代碼目錄

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

以上就是有什么實現(xiàn)前端項目中目錄結(jié)構(gòu)優(yōu)化的方法，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：有什么實現(xiàn)前端項目中目錄結(jié)構(gòu)優(yōu)化的方法
轉(zhuǎn)載來于：http://chinadenli.net/article44/gidohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、虛擬主機、網(wǎng)站營銷、建站公司、域名注冊、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)