Phương pháp hay nhất để tổ chức Thư viện Javascript & Cấu trúc Thư mục CSS [đã đóng]

Bạn tổ chức thư mục js & css trong ứng dụng web của mình như thế nào?

Cấu trúc dự án hiện tại của tôi giống như sau:

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

Nhưng nó phức tạp hơn khi tôi sử dụng nhiều thư viện javascript & plugin css. Plugin Javascript đi kèm với tệp .js của riêng nó và đôi khi có tệp .css của riêng nó.

Ví dụ: khi tôi sử dụng JQuery với plugin JQueryUI, tôi đặt jquery.js và jquery-ui.js bên trong thư mục js / lib. Nhưng JQueryUI đi kèm với tệp css của riêng nó. Tôi nên đặt css từ plugin javascript ở đâu để thực hành tốt nhất? Tôi có nên đặt chúng bên trong thư mục lib để phân biệt plugin css và javascript css của tôi không? Hay ở đâu đó khác?

Tôi biết đó là sở thích cá nhân, nhưng tôi chỉ muốn biết các bạn sắp xếp thư mục dự án của mình như thế nào.

Cảm ơn trước :)

Tôi sẽ phác thảo một cấu trúc được đề xuất để tổ chức các tệp trong ứng dụng HTML5 của bạn. Đây không phải là một nỗ lực để tạo ra bất kỳ loại tiêu chuẩn nào. Thay vào đó, tôi sẽ đưa ra đề xuất về cách nhóm và đặt tên tệp theo cách hợp lý thuận tiện.

Dự án của bạn

Giả sử bạn đang xây dựng một ứng dụng HTML5. Trong một số trường hợp, bạn có thể sử dụng thư mục gốc của máy chủ làm vùng chứa chính nhưng với mục đích của bài viết này, tôi sẽ giả sử rằng ứng dụng HTML5 của bạn được chứa trong một thư mục. Bên trong thư mục này, bạn phải tạo tệp chỉ mục ứng dụng hoặc điểm nhập chính của mình.

• appcropolis-dự án
• my-index.html

Nói chung, ứng dụng của bạn sẽ bao gồm các tệp HTML, CSS, Hình ảnh và Javascript. Một số tệp đó sẽ dành riêng cho ứng dụng của bạn và một số tệp khác có thể được sử dụng trên nhiều ứng dụng. Đây là một sự phân biệt rất quan trọng. Để thực hiện một nhóm hiệu quả các tệp của bạn, bạn phải bắt đầu bằng cách tách các tệp có mục đích chung khỏi các tài nguyên dành riêng cho ứng dụng.

• appcropolis-dự án
• tài nguyên
• người bán hàng
• my-index.html

Sự tách biệt đơn giản này giúp điều hướng qua các tệp của bạn dễ dàng hơn rất nhiều. Khi bạn đặt thư viện và các tệp có mục đích chung bên trong thư mục nhà cung cấp , rõ ràng là các tệp bạn sẽ chỉnh sửa sẽ nằm trong thư mục tài nguyên .

Ngoài mã HTML của bạn, các tệp còn lại trong ứng dụng của bạn chủ yếu là CSS, Javascript và hình ảnh. Rất có thể bạn đã nhóm các tệp ứng dụng của mình bên trong các thư mục tương ứng với các loại nội dung này.

• appcropolis-dự án
• tài nguyên
• css
• js
• hình ảnh
• dữ liệu
• người bán hàng
• my-index.html

Các js thư mục sẽ giữ mã Javascript của bạn. Tương tự, thư mục hình ảnh là nơi bạn nên thêm hình ảnh được sử dụng trực tiếp từ index.html hoặc bất kỳ trang nào khác trong ứng dụng của mình. Không nên sử dụng thư mục hình ảnh này để lưu trữ các tệp liên quan đến biểu định kiểu. Mã CSS của bạn và các hình ảnh liên quan phải được đặt bên trong thư mục css . Bằng cách này, bạn có thể xây dựng các trang có thể dễ dàng sử dụng các chủ đề khác nhau và bạn cho phép ứng dụng của mình trở nên linh hoạt hơn.

• appcropolis-dự án
• tài nguyên
• css
• chủ đề màu xanh
• background.png
• hình ảnh
• background.png
• blue-theme.css
• my-index.css
• js
• my-index.js
• my-contact-info.js
• hình ảnh
• các sản phẩm
• computer.jpg
• cellphone.png
• máy in.jpg
• my-company-logo-small.png
• my-company-logo-large.png
• dữ liệu
• some-data.json
• more-data.xml
• table-data.csv
• extra-data.txt
• người bán hàng
• jquery
• hình ảnh
• ajax-loader.gif
• icon-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• thư viện some-css
• some-plugin.jquery
• my-index.html
• my-contact-info.html
• my-products.html

Ví dụ trước hiển thị nội dung của thư mục css . Lưu ý rằng có một tệp có tên default.css sẽ được sử dụng làm tệp CSS chính của bạn. Hình ảnh được sử dụng bởi biểu định kiểu mặc định phải được đặt bên trong thư mục hình ảnh . Nếu bạn muốn tạo các biểu định kiểu thay thế hoặc nếu bạn muốn ghi đè các quy tắc được xác định trong biểu định kiểu mặc định của mình, bạn có thể tạo tệp CSS bổ sung và các thư mục tương ứng. Ví dụ: bạn có thể tạo biểu định kiểu blue-theme.css và đặt tất cả các hình ảnh có liên quan bên trong chủ đề màu xanh lamthư mục. Nếu bạn có mã CSS hoặc Javascript chỉ được sử dụng bởi một trang (trong trường hợp này là my-index.html), bạn có thể nhóm mã trang cụ thể bên trong các tệp .css và .js với cùng tên của trang (ei my-index .css và my-index.js). Mã CSS và Javascript của bạn phải là mã chung càng tốt nhưng bạn có thể theo dõi các ngoại lệ bằng cách đặt chúng trong các tệp riêng biệt.

Khuyến nghị cuối cùng

Một số khuyến nghị cuối cùng phải được thực hiện xung quanh tên thư mục và tệp. Theo quy tắc chung, hãy đảm bảo rằng bạn sử dụng chữ thường trong tất cả các tên thư mục và tệp. Khi sử dụng nhiều từ để đặt tên cho một tệp hoặc một thư mục, hãy phân tách chúng bằng dấu gạch ngang (tức là my-company-logo-small.png). Nếu bạn làm theo lời khuyên trong bài viết này, bạn sẽ có thể kết hợp nhiều trang trong khi vẫn giữ các tài nguyên chung với nhau và mã tùy chỉnh được phân tách độc đáo.

Cuối cùng, ngay cả khi bạn không chọn sử dụng cấu trúc được đề xuất trong bài viết này, điều quan trọng là phải tuân theo một quy ước. Nó sẽ làm tăng năng suất của bạn và quan trọng hơn nó sẽ làm cho công việc bạn làm dễ dàng được người khác hiểu.

Tín dụng nguồn: Cách tổ chức các tệp HTML, CSS và Javascript của bạn

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

Đây là cách tôi tổ chức các tài nguyên tĩnh của ứng dụng của mình.