フロントエンドプロジェクトのディレクトリ構造を最適化する方法のまとめ

この記事は、フロントエンド プロジェクトのディレクトリ構造を最適化する方法をまとめたものです。必要な方は参考にしていただければ幸いです。

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

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

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

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

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

1. 特定のページまたは機能ブロックにどのファイルがあるかを知るのは簡単かつ迅速ではありません。ファイルを見つけるために別のファイル カテゴリのディレクトリに移動する必要があるため、ページの更新と削除は非常に非効率になります。

2. 開発効率は高くなく、疲れやすくなります。なぜなら、エディター ページで作業するとき、エディターのファイル ナビゲーションで各ファイルを展開する必要があり、ナビゲーションが非常に長くなります。

3. したがって、フロントエンド プロジェクトの場合、ほとんどの場合、このディレクトリ構造は使用しません。
   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/ 公共组件目录   
|-- ...

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

ワークスペースの下のディレクトリ構造を定義するのは簡単ではなく、開発者に対する要件はさらに高くなります。
いくつか欠点はありますが、ビルドツールで解消できるので、通常はこのディレクトリ構成を選択します。

2. 3. 併用する

多くの場合、複数ページのプロジェクト内の小さな単一ページのアプリケーションなど、これら 2 つの方法を併用できます。

rree

以上がフロントエンドプロジェクトのディレクトリ構造を最適化する方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。