Cấu trúc thư mục/thư mục của dự án Web - Các phương pháp hay nhất

Question

Tôi đang làm việc trên các dự án web khác nhau và tôi tự hỏi liệu có bất kỳ quy tắc nào liên quan đến cấu trúc dự án/thư mục không?

Nhiều ứng dụng của tôi được xây dựng trong cấu trúc mà mỗi loại tệp có thư mục riêng. Ví dụ:

└─┬root 
    | 
    ├─┬node_modules 
    | └ // node_modules (npm libraries) 
    | 
    └─┬www 
    | 
    ├─┬Libs // Js libraries 
    | | 
    | ├─┬Angular 
    | | └ … (.js files) 
    | | 
    | └─┬Bootstrap 
    | └ … (.js files) 
    | 
    ├─┬JavaScript // my Js files 
    | | 
    | ├─┬Services 
    | | └ … // my services (.js files) 
    | | 
    | ├─┬Controllers 
    | | └ … // my controllers (.js files) 
    | | 
    | ├─┬Directives 
    | | └ … // my directives (.js files) 
    | | 
    | └app.js // js entry point 
    | 
    ├─┬StyleSheets 
    | | 
    | ├─┬Less 
    | | └ … // my styles (.less files) 
    | | 
    | └─┬Css 
    | └ … // my styles (.css files) 
    | 
    ├─┬Views 
    | | 
    | ├─┬Pages 
    | | └ … // pages layout (.html files) 
    | | 
    | └─┬DirectivesTemplates 
    | └ // templates layout (.html files) 
    | 
    ├─┬Assets 
    | | 
    | ├─┬Fonts 
    | | └ … // app fonts (.ttf/ .woff files) 
    | | 
    | └─┬Images 
    | └ // app images (.jpg/ .png files) 
    | 
    ├─┬Data 
    | | 
    | └ // app info (.json files) 
    | 
    └index.html // web site entry point 

Tuy nhiên thời gian gần đây tôi thấy một số dự án, trong đó mỗi mô-đun có nó là thư mục riêng với nó là mã (.js tập tin), view (file .html), phong cách (.css/file .less) và dữ liệu (tệp .json, hình ảnh, phông chữ, v.v.) Ví dụ:

└─┬root 
    | 
    ├─┬node_modules 
    | └ // node_modules (npm libraries) 
    | 
    └─┬www 
    | 
    ├─┬Libs // Js libraries 
    | | 
    | ├─┬Angular 
    | | └ … (.js files) 
    | | 
    | └─┬Bootstrap 
    | └ … (.js files) 
    | 
    ├─┬Modules 
    | | 
    | ├─┬moduleA 
    | | | 
    | | ├moduleA.js //modules controller 
    | | | 
    | | ├moduleA.html //modules view 
    | | | 
    | | ├moduleA.less //modules style 
    | | | 
    | | └moduleA.json //modules data 
    | | 
    | ├─┬moduleB 
    | | | 
    | | ├moduleB.js 
    | | | 
    | | ├moduleB.html 
    | | | 
    | | ├moduleB.less 
    | | | 
    | | ├moduleB.json 
    | | | 
    | | └moduleB-icon.png 
    | | 
    | └─┬moduleC 
    | | 
    | ├moduleC.js 
    | | 
    | ├moduleC.html 
    | | 
    | ├moduleC.less 
    | | 
    | ├moduleC.json 
    | | 
    | └moduleC-font.woff 
    | 
    └index.html // web site entry point 

Có thực tiễn nào tốt nhất về cấu trúc dự án không?

Answer 1

Ví dụ của bạn hiển thị hai cấu trúc dự án phổ biến, sắp xếp tệp theo loại hoặc theo mô-đun. Tôi thích thứ hai (mã được tách thành các mô-đun) và tôi thấy nó được sử dụng rất nhiều cho các khung công tác frontend javascript. Đó là một cái gì đó Angular style guide (một tài liệu tham khảo tốt cho thực hành tốt nhất góc) đề cập đến là folders by feature.

Tôi tham khảo hướng dẫn kiểu Góc vì các ví dụ của bạn đã hiển thị các dự án Góc, nhưng khái niệm này có thể được dịch sang các khung công tác khác. Mã được sắp xếp theo tính năng để dễ dàng tìm thấy tệp bạn cần chỉnh sửa. Như một người nào đó đã chỉ ra trong một nhận xét, cấu trúc dự án này có quy mô tốt khi ứng dụng và nhóm phát triển về kích thước.