Cách cấu trúc một dự án JavaScript bằng cách sử dụng RequireJS

Question

Tôi hiện đang làm việc trên một dự án JavaScript lớn mà chúng tôi muốn xác định API của chính mình. Tôi đang sử dụng RequireJS làm trình tải phụ thuộc của tôi và nó phù hợp với tôi tốt, cho phép tôi xác định các mô-đun trong tệp tương ứng của họ. Tôi không sử dụng không gian tên của riêng tôi, một mô-đun sẽ trả về một cá thể, có thể được sử dụng trong các mô-đun khác, tức là:

define(
    ['imported_module'], 
    function(module){ 
     module.doSomething(); 
    } 
) 

Tuy nhiên khi số lượng tệp tăng lên, tôi muốn quyết định cách cấu trúc các tệp này trong các thư mục. Hiện tại tôi sử dụng sơ đồ sau để đặt tên tệp của mình:

[projectname].[packagename].[ModuleName] 

Ví dụ có thể là stackoverflow.util.HashMap.js. Tôi xin giới thiệu một thư mục dự án, một thư mục cho mỗi gói và đổi tên các tập tin với tên module, như:

stackoverflow/util/HashMap.js 

này cấu trúc mã của tôi khá gọn gàng vào các thư mục, tuy nhiên tên tập tin chỉ phản ánh các module bây giờ. Tôi muốn xác định một số loại định tuyến để có thể xác định cách RequireJS nên tìm kiếm tệp. Ví dụ:

File

stackoverflow/util/stackoverflow.util.HashMap.js 

nên có thể nhập cảng bằng cách tuyên bố

define(['stackoverflow.util.HashMap'],function(HashMap){}); 

Có kinh nghiệm bất cứ ai có dự án hoạt Javascript lớn cơ cấu và nếu như vậy, bạn có thể chia sẻ cách tiếp cận của bạn?

Answer 1

Bạn không nên chỉ định thông tin định tuyến trên tên tệp js của bạn, đó là các công việc của không gian tên và đường dẫn thư mục. Vì vậy, stackoverflow/util/HashMap.js là tốt. Và bạn có thể sử dụng xác định ("stackoverflow/util/HashMap", ....) để cho biết sự phụ thuộc.

Nếu bạn cần đặt mô-đun của mình trong một thư mục khác, bạn có thể định cấu hình đường dẫn cho trình tải của mình, xem this manual từ API RequireJS.

Không có cách nào tốt nhất để cấu trúc tệp js của bạn. Nhưng đặt không gian tên gốc trong một thư mục src luôn luôn là một thực hành tốt. Bạn có thể thấy dojo source code và YUI source code và sử dụng các cách tương tự cho dự án của mình. Cả hai đều là các dự án Javascript quy mô lớn.

Answer 2

thực sự tốt hơn là định tuyến js lib để tải tất cả js bằng giao diện chuẩn: "js.yoursite.com/lib-0.2.js" nên có bộ định tuyến (php hoặc các truy vấn bộ nhớ cache khác). Vì vậy, ở đó bạn có thể xác định và kiểm soát toàn bộ đường dẫn mà bạn sử dụng. Vì plugin jquery phổ biến nên ở một thư mục, với jquery, và các plugin tùy chỉnh của riêng bạn thì không.

Và có bạn kiểm soát từng dự án theo các quy tắc riêng của nó:

jquery/ 
    plugins/ 
    jquery.prettyPhoto.js 
    jquery.min.js 

mySuperJS/ 
    stable.0/ -- there your production version for 1.0 branch 
    module.js 
    0.1/ 
    module.js 
    0.2/ 
    module.js 
    0.3/ 
    module.js 

myOtherlib/ 
    stable.0/ -- production version for all 0.* versions 
    stable.1/ -- production version for all 1.0 versions 
    0.1/ 
    0.2/ 
    0.3/ 
    0.4/ 
    0.4.1/ 
    0.4.1.18/ 

Chúng tôi đang sử dụng cấu trúc như vậy khoảng một năm và đó là tốt nhất cho chúng ta. Nhưng đôi khi chúng tôi sử dụng giải pháp phức tạp hơn và tách riêng tất cả các mô-đun cho libs, plugin, công cụ, thành phần và ứng dụng.