ディレクトリ構造の最適化

現在、フロントエンドプロジェクトはますます大規模プロジェクトに近づき、チームメンバー間のコラボレーションを処理する必要があります。ブロッキングとデカップリングにより、高効率の開発を維持しながらメンテナンスコストが削減されます。

プロジェクトのディレクトリ構造を最適化することは、この目標を達成する 1 つの方法です。一般に、複数ページのプロジェクトであっても、単一ページのアプリケーションであっても、あるいはその両方であっても、ディレクトリ構造は次の 2 通りになります。

タイプのグループ化 (ファイルタイプ別、ビジネス別)タイプなどのグループ化)
モジュールブロック (ページモジュール、ビジネスモジュールなどのブロック)

1. タイプのグループ化

この方法は、ファイルの種類、ビジネスの種類、その他の種類ごとにグループ化する方法です。

#複数ページのプロジェクト

|-- 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 文件目录（内部结构跟上面类似）
    |-- images/ 图片文件目录（内部结构跟上面类似）
    |-- data/ api-mock 文件目录（内部结构跟上面类似）
    |-- ...

ログイン後にコピー

単一ページのアプリケーション

|-- 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/ 图片文件目录（内部结构跟上面类似）
|-- data/ api-mock 文件目录（内部结构跟上面类似）
|-- ...

ログイン後にコピー

この方法の利点は、ファイル分類と関数分類が非常に明確になり、チームメンバーの記述方法(ディレクトリ構造)をある程度制約できることです。また、明確でシンプルで理解しやすいことです。。ただし、この方法には明らかな欠点があります。

特定のページまたは機能ブロックにどのファイルがあるかを知るのは簡単かつ迅速ではありません。ファイルを見つけるために別のファイルカテゴリのディレクトリに移動する必要があるため、ページの更新と削除は非常に非効率になります。
開発効率は高くなく、疲れやすくなります。なぜなら、エディターページで作業するとき、エディターのファイルナビゲーションで各ファイルを展開する必要があり、ナビゲーションが非常に長くなります。
したがって、フロントエンドプロジェクトの場合、ほとんどの場合、このディレクトリ構造は使用しません。
2. モジュールブロッキング

このメソッドは、ページモジュール、ビジネスモジュール、またはその他のタイプに分かれています。

#複数ページのプロジェクト

|-- src/ 源代码目录

    |-- page1/ page1 页面的工作空间
        |-- index.html html 入口文件
        |-- index.js js 入口文件
        |-- index.(css|less|scss) 样式入口文件
        |-- html/ html 片段目录
        |-- js/ js 文件目录
        |-- (css|less|scss)/ 样式文件目录
        |-- data/ 本地 json 数据模拟
        |-- images/ 图片文件目录
        |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
        |-- ...
        
    |-- module1/ 子目录
        |-- page2/ page2 页面的工作空间（内部结构跟 page1 类似）
        
    |-- ...
    
|-- html/ 公共 html 片段
|-- less/ 公共 less 目录
|-- components/ 公共组件目录
|-- images/ 公共图片目录
|-- data/ 公共 api-mock 文件目录
|-- ...

ログイン後にコピー

単一ページのアプリケーション

|-- src/ 源代码目录
    |-- page1/ page1 页面的工作空间
        |-- index.js 入口文件
        |-- service.js
        |-- model.js
        |-- data/ 本地 json 数据模拟
        |-- images/ 图片文件目录
        |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
        |-- ...
        
    |-- module1/ 子目录
        |-- page2/ page2 页面的工作空间（内部结构跟 page1 类似）
        
    |-- ...
    
|-- images/ 公共图片目录
|-- data/ 公共 api-mock 文件目录
|-- components/ 公共组件目录   
|-- ...

ログイン後にコピー

この方法では、「タイプのグループ化」の問題は回避されますが、いくつかの欠点もあります。グループメンバーに対する制約は非常に小さく、各ワークスペースのディレクトリ構造は次のとおりです。