프런트엔드 프로젝트의 디렉터리 구조를 최적화하는 방법 요약

이 글은 프론트엔드 프로젝트에서 디렉토리 구조를 최적화하는 방법을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

디렉터리 구조 최적화

이제 프런트엔드 프로젝트는 점점 더 대규모 프로젝트처럼 변하고 점점 더 복잡해지고 있습니다. 팀 구성원 간의 협업을 처리해야 하며 비즈니스 세분화도 필요합니다. 유지 관리 비용을 줄이고 고효율 개발을 유지하기 위한 분리.

프로젝트 디렉터리 구조를 최적화하는 것은 이 목표를 달성하는 한 가지 방법입니다. 일반적으로 다중 페이지 프로젝트이든 단일 페이지 응용 프로그램이든 또는 둘 다이든 디렉토리 구조는 다음 두 가지 방식입니다.

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/ 公共组件目录   
|-- ...

이 방법은 "유형 그룹화" 문제를 방지하지만 몇 가지 단점도 있습니다.

1. 거의 몇 가지 단점이 있습니다. 그룹 구성원에 대한 제약, 각 작업 공간 아래의 디렉터리 구조는 완전히 다를 수 있습니다.

2. 작업 공간 아래의 디렉터리 구조는 정의하기 쉽지 않으며 개발자에 대한 요구 사항도 더 높습니다.

몇 가지 단점이 있지만 빌드 도구로 해결할 수 있으므로 일반적으로 이 디렉토리 구조를 선택합니다.

3. 함께 사용

여러 페이지 프로젝트의 작은 단일 페이지 응용 프로그램과 같이 많은 경우 이 두 가지 방법을 함께 사용할 수 있습니다.

아아아아

위 내용은 프런트엔드 프로젝트의 디렉터리 구조를 최적화하는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!