Hoặc, baseUrl có thể được đặt thủ công thông qua. Nếu không có config tường minh và không dùng data-main thì baseUrl mặc định là thư mục chứa trang HTML chạy RequireJS
RequireJS cũng giả định theo mặc định rằng tất cả các phụ thuộc đều là tập lệnh, do đó, nó không mong muốn thấy dấu ". js" trên ID mô-đun. RequireJS sẽ tự động thêm nó khi dịch ID mô-đun thành một đường dẫn. Với , bạn có thể thiết lập vị trí của một nhóm tập lệnh. Tất cả những khả năng này cho phép bạn sử dụng các chuỗi nhỏ hơn cho tập lệnh so với truyền thống
và trong ứng dụng. js
requirejs.config[{
//By default load any module IDs from js/lib
baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
app: '../app'
}
}];
// Start the main app logic.
requirejs[['jquery', 'canvas', 'app/sub'],
function [$, canvas, sub] {
//jQuery, canvas and the app/sub module are all
//loaded and can be used here now.
}];
Lưu ý như một phần của ví dụ đó, các thư viện của nhà cung cấp như jQuery không có số phiên bản trong tên tệp của chúng. Bạn nên lưu trữ thông tin phiên bản đó trong một tệp văn bản riêng nếu bạn muốn theo dõi nó hoặc nếu bạn sử dụng một công cụ như volo, nó sẽ đóng dấu gói. json với thông tin phiên bản nhưng giữ tệp trên đĩa là "jquery. js". Điều này cho phép bạn có cấu hình rất tối thiểu thay vì phải đặt một mục trong cấu hình "đường dẫn" cho mỗi thư viện. Chẳng hạn, định cấu hình "jquery" thành "jquery-1. 7. 2"
Lý tưởng nhất là các tập lệnh bạn tải sẽ là các mô-đun được xác định bằng cách gọi. Tuy nhiên, bạn có thể cần sử dụng một số tập lệnh "toàn cầu trình duyệt" truyền thống/kế thừa không thể hiện sự phụ thuộc của chúng thông qua định nghĩa[]. Đối với những người, bạn có thể sử dụng. Để thể hiện đúng sự phụ thuộc của họ
Nếu bạn không thể hiện các phần phụ thuộc, bạn có thể sẽ gặp lỗi tải vì RequireJS tải các tập lệnh không đồng bộ và không theo thứ tự về tốc độ
Thuộc tính data-main là một thuộc tính đặc biệt yêu cầu. js sẽ kiểm tra để bắt đầu tải tập lệnh
Thông thường, bạn sẽ sử dụng tập lệnh data-main và sau đó tải mô-đun ứng dụng đầu tiên. Ghi chú. thẻ tập lệnh yêu cầu. js tạo cho mô-đun chính dữ liệu của bạn bao gồm. Điều này có nghĩa là bạn không thể cho rằng quá trình tải và thực thi tập lệnh chính dữ liệu của mình sẽ kết thúc trước các tập lệnh khác được tham chiếu sau trong cùng một trang
Ví dụ: sự sắp xếp này sẽ thất bại ngẫu nhiên khi yêu cầu. đường dẫn cấu hình cho mô-đun 'foo' chưa được đặt trước khi nó được yêu cầu[]'d sau
Nếu bạn muốn thực hiện cuộc gọi
Một mô-đun khác với tệp tập lệnh truyền thống ở chỗ nó xác định một đối tượng có phạm vi tốt để tránh làm ô nhiễm không gian tên chung. Nó có thể liệt kê rõ ràng các phụ thuộc của nó và xử lý các phụ thuộc đó mà không cần tham chiếu đến các đối tượng toàn cục, mà thay vào đó nhận các phụ thuộc làm đối số cho hàm xác định mô-đun. Các mô-đun trong RequireJS là một phần mở rộng của Mẫu mô-đun, với lợi ích là không cần toàn cục để tham chiếu đến các mô-đun khác
Cú pháp RequireJS cho các mô-đun cho phép chúng được tải nhanh nhất có thể, thậm chí không theo thứ tự, nhưng được đánh giá theo thứ tự phụ thuộc chính xác và vì các biến toàn cục không được tạo nên có thể
[Nếu bạn đã quen thuộc hoặc đang sử dụng các mô-đun CommonJS, vui lòng xem thêm Ghi chú CommonJS để biết thông tin về cách định dạng mô-đun RequireJS ánh xạ tới các mô-đun CommonJS]
Chỉ nên có một định nghĩa mô-đun cho mỗi tệp trên đĩa. Các mô-đun có thể được nhóm thành các gói được tối ưu hóa bằng công cụ tối ưu hóa
§ 1. 3. 1
Nếu mô-đun không có bất kỳ phụ thuộc nào và nó chỉ là một tập hợp các cặp tên/giá trị, thì chỉ cần chuyển một đối tượng bằng chữ cho định nghĩa[]
//Inside file my/shirt.js:
define[{
color: "black",
size: "unisize"
}];
§ 1. 3. 2
Nếu mô-đun không có các phần phụ thuộc, nhưng cần sử dụng một hàm để thực hiện một số công việc thiết lập, thì hãy xác định chính nó, chuyển một hàm tới định nghĩa[]
§ 1. 3. 3
Nếu mô-đun có các thành phần phụ thuộc, thì đối số đầu tiên phải là một mảng tên của thành phần phụ thuộc và đối số thứ hai phải là một hàm định nghĩa. Hàm sẽ được gọi để xác định mô-đun sau khi tất cả các phụ thuộc đã được tải. Hàm sẽ trả về một đối tượng xác định mô-đun. Các phụ thuộc sẽ được chuyển đến hàm định nghĩa dưới dạng đối số hàm, được liệt kê theo thứ tự giống như thứ tự trong mảng phụ thuộc
Trong ví dụ này, mô-đun my/shirt được tạo. Nó phụ thuộc vào của tôi/giỏ hàng và của tôi/hàng tồn kho. Trên đĩa, các tệp được cấu trúc như thế này
- giỏ hàng của tôi. js
- của tôi / khoảng không quảng cáo. js
- áo sơ mi của tôi. js
Hàm gọi ở trên chỉ định hai đối số, "giỏ hàng" và "hàng tồn kho". Đây là những mô-đun được đại diện bởi ". /giỏ hàng" và ". /inventory" tên mô-đun
Hàm không được gọi cho đến khi các mô-đun my/cart và my/inventory được tải và hàm nhận các mô-đun dưới dạng đối số "giỏ hàng" và "hàng tồn kho"
Các mô-đun xác định toàn cầu rõ ràng không được khuyến khích, do đó, nhiều phiên bản của một mô-đun có thể tồn tại trong một trang cùng một lúc [xem Cách sử dụng nâng cao]. Ngoài ra, thứ tự của các đối số hàm phải khớp với thứ tự của các thành phần phụ thuộc
Đối tượng trả về từ lệnh gọi hàm xác định mô-đun "my/shirt". Bằng cách xác định các mô-đun theo cách này, "my/shirt" không tồn tại dưới dạng đối tượng toàn cầu
§ 1. 3. 4
Các mô-đun không phải trả về các đối tượng. Mọi giá trị trả về hợp lệ từ một hàm đều được cho phép. Đây là một mô-đun trả về một hàm như định nghĩa mô-đun của nó
§ 1. 3. 5
Nếu bạn muốn sử dụng lại một số mã được viết theo định dạng mô-đun CommonJS truyền thống, có thể khó làm việc lại với mảng phụ thuộc được sử dụng ở trên và bạn có thể muốn căn chỉnh trực tiếp tên phụ thuộc với biến cục bộ được sử dụng cho điều đó . Bạn có thể sử dụng trình bao bọc CommonJS đơn giản hóa cho những trường hợp đó
Trình bao bọc này dựa trên Chức năng. nguyên mẫu. toString[] để cung cấp giá trị chuỗi hữu ích cho nội dung hàm. Điều này không hoạt động trên một số thiết bị như PS3 và một số trình duyệt di động Opera cũ hơn. Sử dụng trình tối ưu hóa để rút ra các phần phụ thuộc ở định dạng mảng để sử dụng trên các thiết bị đó
Thông tin thêm có sẵn trên trang CommonJS và trong
§ 1. 3. 6
Bạn có thể gặp một số lệnh gọi định nghĩa [] bao gồm tên cho mô-đun làm đối số đầu tiên để định nghĩa []
Chúng thường được tạo bởi công cụ tối ưu hóa. Bạn có thể tự đặt tên cho các mô-đun một cách rõ ràng, nhưng điều đó làm cho các mô-đun ít di động hơn -- nếu bạn di chuyển tệp sang thư mục khác, bạn sẽ cần phải thay đổi tên. Thông thường, tốt nhất là tránh mã hóa tên cho mô-đun và chỉ để công cụ tối ưu hóa ghi vào tên mô-đun. Công cụ tối ưu hóa cần thêm tên để có thể gói nhiều mô-đun trong một tệp, để cho phép tải nhanh hơn trong trình duyệt
§ 1. 3. 7
Một mô-đun cho mỗi tệp. Chỉ nên xác định một mô-đun cho mỗi tệp JavaScript, dựa trên bản chất của thuật toán tra cứu đường dẫn tên đến tệp của mô-đun. Bạn chỉ nên sử dụng công cụ tối ưu hóa để nhóm nhiều mô-đun thành các tệp được tối ưu hóa
Tên mô-đun tương đối bên trong định nghĩa[]. Đối với yêu cầu [". /relative/name"] có thể xảy ra bên trong lệnh gọi hàmdefine[], hãy đảm bảo yêu cầu "require" làm phần phụ thuộc để tên tương đối được giải quyết chính xác
Hoặc tốt hơn nữa, hãy sử dụng cú pháp rút gọn có sẵn để dịch các mô-đun CommonJS
Biểu mẫu này sẽ sử dụng Chức năng. nguyên mẫu. toString[] để tìm các lệnh gọi require[] và thêm chúng vào mảng phụ thuộc, cùng với "require", để mã sẽ hoạt động chính xác với các đường dẫn tương đối
Các đường dẫn tương đối thực sự hữu ích nếu bạn đang tạo một vài mô-đun bên trong một thư mục, để bạn có thể chia sẻ thư mục với người khác hoặc các dự án khác và bạn muốn có thể xử lý các mô-đun anh em trong thư mục đó mà không cần phải
Tên mô-đun tương đối có liên quan đến các tên khác, không phải đường dẫn. Trình tải lưu trữ các mô-đun theo tên của chúng chứ không phải theo đường dẫn bên trong. Vì vậy, đối với các tham chiếu tên tương đối, những tham chiếu đó được giải quyết tương ứng với tên mô-đun tạo tham chiếu, sau đó tên mô-đun hoặc ID đó sẽ được chuyển đổi thành đường dẫn nếu cần tải. Mã ví dụ cho gói 'tính toán' có mô-đun 'chính' và 'phụ' trong đó
nơi chính. mô-đun js trông như thế này
Nếu đây là cấu hình đường dẫn
Và một
Đối với trường hợp này, là một tùy chọn tốt hơn, vì nó cho phép thiết lập mô-đun chính là 'tính toán', nhưng bên trong trình tải sẽ lưu trữ mô-đun có ID là 'tính toán/chính' để tham chiếu tương đối cho '. /công việc bổ sung
Một tùy chọn khác là xây dựng một mô-đun tại lib/compute. js chỉ là
Hoặc, không đặt cấu hình đường dẫn hoặc gói đó và thực hiện cuộc gọi yêu cầu cấp cao nhất là
Tạo URL liên quan đến mô-đun. Bạn có thể cần tạo một URL liên quan đến một mô-đun. Để làm như vậy, hãy yêu cầu "yêu cầu" làm phụ thuộc và sau đó sử dụng yêu cầu. toUrl[] để tạo URL
Gỡ lỗi bảng điều khiển. Nếu bạn cần làm việc với mô-đun mà bạn đã tải qua lệnh gọi
Lưu ý rằng điều này chỉ hoạt động nếu "mô-đun/tên" đã được tải trước đó qua phiên bản yêu cầu không đồng bộ.
//Inside file my/shirt.js:
define[{
color: "black",
size: "unisize"
}];
§ 1. 3. 8
Nếu bạn xác định một phụ thuộc vòng tròn ["a" cần "b" và "b" cần "a"], thì trong trường hợp này khi hàm mô-đun của "b" được gọi, nó sẽ nhận giá trị không xác định cho "a". "b" có thể tìm nạp "a" sau khi các mô-đun đã được xác định bằng cách sử dụng phương thức require[] [hãy đảm bảo chỉ định yêu cầu là phần phụ thuộc để ngữ cảnh phù hợp được sử dụng để tra cứu "a"]
Thông thường, bạn không cần sử dụng require[] để tìm nạp mô-đun, mà thay vào đó hãy dựa vào mô-đun được truyền vào hàm dưới dạng đối số. Phụ thuộc tròn rất hiếm và thường là dấu hiệu cho thấy bạn có thể muốn suy nghĩ lại về thiết kế. Tuy nhiên, đôi khi chúng cần thiết và trong trường hợp đó, hãy sử dụng yêu cầu [] như đã chỉ định ở trên
Nếu bạn đã quen thuộc với các mô-đun CommonJS, thay vào đó, bạn có thể sử dụng xuất để tạo một đối tượng trống cho mô-đun có sẵn ngay lập tức để các mô-đun khác tham khảo. Bằng cách thực hiện điều này ở cả hai phía của sự phụ thuộc vòng tròn, sau đó bạn có thể giữ mô-đun kia một cách an toàn. Điều này chỉ hoạt động nếu mỗi mô-đun đang xuất một đối tượng cho giá trị mô-đun, không phải một hàm
Hoặc, nếu bạn đang sử dụng cách tiếp cận mảng phụ thuộc, hãy yêu cầu phương thức đặc biệt
§ 1. 3. 9
là một cách gọi một số dịch vụ trong JavaScript. Nó hoạt động trên các miền và nó là một cách tiếp cận đã được thiết lập để gọi các dịch vụ chỉ yêu cầu HTTP GET thông qua thẻ tập lệnh
Để sử dụng dịch vụ JSONP trong RequireJS, hãy chỉ định "xác định" làm giá trị của tham số gọi lại. Điều này có nghĩa là bạn có thể lấy giá trị của URL JSONP như thể đó là định nghĩa mô-đun
Dưới đây là một ví dụ gọi điểm cuối API JSONP. Trong ví dụ này, tham số gọi lại JSONP được gọi là "gọi lại", vì vậy "callback=define" yêu cầu API bọc phản hồi JSON trong trình bao bọc "define[]"
Việc sử dụng JSONP này nên được giới hạn ở các dịch vụ JSONP để thiết lập ứng dụng ban đầu. Nếu dịch vụ JSONP hết thời gian, điều đó có nghĩa là các mô-đun khác mà bạn xác định thông qua định nghĩa[] có thể không được thực thi, do đó việc xử lý lỗi không mạnh mẽ
Chỉ hỗ trợ các giá trị trả về JSONP là các đối tượng JSON. Phản hồi JSONP là một mảng, một chuỗi hoặc một số sẽ không hoạt động
Không nên sử dụng chức năng này cho các kết nối JSONP bỏ phiếu dài -- Các API xử lý truyền trực tuyến theo thời gian thực. Các loại API đó sẽ thực hiện nhiều thao tác dọn dẹp tập lệnh hơn sau khi nhận được mỗi phản hồi và RequireJS sẽ chỉ tìm nạp URL JSONP một lần -- các lần sử dụng tiếp theo của cùng một URL dưới dạng phụ thuộc trong lệnh gọi require[] hoặcdefine[] sẽ nhận được giá trị được lưu trong bộ nhớ cache
Lỗi khi tải dịch vụ JSONP thường xuất hiện khi hết thời gian chờ cho dịch vụ, vì việc tải thẻ tập lệnh không cung cấp nhiều thông tin chi tiết về các sự cố mạng. Để phát hiện lỗi, bạn có thể ghi đè các yêu cầu. onError[] để nhận lỗi. Có thêm thông tin trong phần
§ 1. 3. 10
Có một chức năng toàn cầu, requestjs. undef[], cho phép hủy xác định mô-đun. Nó sẽ đặt lại trạng thái bên trong của trình tải để quên đi định nghĩa trước đó của mô-đun
Tuy nhiên, nó sẽ không xóa mô-đun khỏi các mô-đun khác đã được xác định và xử lý mô-đun đó dưới dạng phụ thuộc khi chúng thực thi. Vì vậy, nó thực sự chỉ hữu ích khi sử dụng trong các tình huống lỗi khi không có mô-đun nào khác xử lý giá trị mô-đun hoặc là một phần của bất kỳ tải mô-đun nào trong tương lai có thể sử dụng mô-đun đó. Xem ví dụ
Nếu bạn muốn thực hiện phân tích biểu đồ phụ thuộc tinh vi hơn cho công việc không xác định, API onResourceLoad bán riêng tư có thể hữu ích
RequireJS tải từng phần phụ thuộc dưới dạng thẻ tập lệnh, sử dụng phần đầu. appendChild[]
RequireJS đợi tất cả các phụ thuộc tải, tìm ra thứ tự phù hợp để gọi các hàm xác định mô-đun, sau đó gọi các hàm định nghĩa mô-đun sau khi các phụ thuộc cho các hàm đó đã được gọi. Lưu ý rằng các phụ thuộc cho một hàm định nghĩa mô-đun nhất định có thể được gọi theo bất kỳ thứ tự nào, do mối quan hệ phụ thuộc phụ của chúng và thứ tự tải mạng
Sử dụng RequireJS trong môi trường JavaScript phía máy chủ có tải đồng bộ sẽ dễ dàng như việc xác định lại yêu cầu. trọng tải[]. Hệ thống xây dựng thực hiện điều này, yêu cầu. phương thức tải cho môi trường đó có thể được tìm thấy trong build/jslib/requirePatch. js
Trong tương lai, mã này có thể được kéo vào thư mục yêu cầu/ dưới dạng mô-đun tùy chọn mà bạn có thể tải trong env của mình để có hành vi tải phù hợp dựa trên môi trường máy chủ
Khi sử dụng yêu cầu [] trong trang HTML cấp cao nhất [hoặc tệp tập lệnh cấp cao nhất không xác định mô-đun], một đối tượng cấu hình có thể được chuyển làm tùy chọn đầu tiên
Bạn cũng có thể gọi yêu cầu. config từ , nhưng lưu ý rằng tập lệnh data-main được tải không đồng bộ. Tránh các tập lệnh điểm vào khác giả định sai rằng dữ liệu chính và yêu cầu của nó. config sẽ luôn thực thi trước khi tải tập lệnh của họ
Ngoài ra, bạn có thể định nghĩa đối tượng cấu hình là biến toàn cục
//Inside file my/shirt.js:
define[{
color: "black",
size: "unisize"
}];
Ghi chú. Tốt nhất là sử dụng
//Inside file my/shirt.js:
define[{
color: "black",
size: "unisize"
}];
//Inside file my/shirt.js:
define[{
color: "black",
size: "unisize"
}];
Có một số mẫu để tách cấu hình khỏi tải mô-đun chính
Tùy chọn cấu hình được hỗ trợ
đường dẫn gốc để sử dụng cho tất cả các tra cứu mô-đun. Vì vậy, trong ví dụ trên, thẻ script của "my/module" sẽ có src="/another/path/my/module. js". baseUrl không được sử dụng khi tải đơn giản. js [được biểu thị bằng một chuỗi phụ thuộc], các chuỗi đó được sử dụng nguyên trạng, do đó,. js và b. js sẽ được tải từ cùng thư mục với trang HTML chứa đoạn mã trên
Nếu không có baseUrl nào được đặt rõ ràng trong cấu hình, giá trị mặc định sẽ là vị trí của trang HTML tải yêu cầu. js. Nếu thuộc tính data-main được sử dụng, đường dẫn đó sẽ trở thành baseUrl
BaseUrl có thể là một URL trên một tên miền khác vì trang sẽ tải yêu cầu. js. Tải tập lệnh RequireJS hoạt động trên các miền. Hạn chế duy nhất là nội dung văn bản được tải bởi văn bản. bổ sung. những đường dẫn đó phải nằm trên cùng một miền với trang, ít nhất là trong quá trình phát triển. Công cụ tối ưu hóa sẽ nội tuyến văn bản. tài nguyên plugin để sau khi sử dụng công cụ tối ưu hóa, bạn có thể sử dụng tài nguyên tham khảo văn bản. tài nguyên plugin từ miền khác
ánh xạ đường dẫn cho tên mô-đun không được tìm thấy trực tiếp dưới baseUrl. Cài đặt đường dẫn được coi là có liên quan đến baseUrl, trừ khi cài đặt đường dẫn bắt đầu bằng "/" hoặc có giao thức URL trong đó ["như http. "]. Sử dụng cấu hình mẫu ở trên, thẻ script của "some/module" sẽ là src="/another/path/some/v1. 0/mô-đun. js"
Đường dẫn được sử dụng cho tên mô-đun không được bao gồm phần mở rộng, vì ánh xạ đường dẫn có thể dành cho một thư mục. Mã ánh xạ đường dẫn sẽ tự động thêm. js khi ánh xạ tên mô-đun thành một đường dẫn. Nếu được sử dụng, nó sẽ thêm phần mở rộng thích hợp, nếu nó dành cho thứ gì đó như mẫu văn bản
Khi chạy trong trình duyệt, có thể được chỉ định để cho phép thử tải từ vị trí CDN, nhưng quay trở lại vị trí cục bộ nếu vị trí CDN không tải được
Được giới thiệu trong RequireJS 2. 1. 10. cho phép định cấu hình nhiều ID mô-đun được tìm thấy trong tập lệnh khác. Ví dụ
Trạng thái cấu hình đó. mô-đun 'chính', 'sử dụng', 'văn bản' và 'văn bản. mẫu. html' sẽ được tìm thấy bằng cách tải ID mô-đun 'chính'. Mô-đun 'văn bản. thứ hai. html' có thể được tìm thấy bằng cách tải ID mô-đun 'phụ'
Điều này chỉ thiết lập vị trí tìm mô-đun bên trong tập lệnh có nhiều mô-đun xác định [] trong đó. Nó không tự động liên kết các mô-đun đó với ID mô-đun của gói. ID mô-đun của gói chỉ được sử dụng để định vị tập hợp các mô-đun
Một cái gì đó tương tự có thể xảy ra với cấu hình đường dẫn, nhưng nó dài dòng hơn nhiều và lộ trình cấu hình đường dẫn không cho phép ID tài nguyên plugin trình tải trong cấu hình của nó, vì các giá trị cấu hình đường dẫn là các phân đoạn đường dẫn, không phải ID
cấu hình bó hữu ích nếu thực hiện xây dựng và mục tiêu xây dựng đó không phải là ID mô-đun hiện có hoặc nếu bạn có tài nguyên plugin trình tải trong các tệp JS được tạo mà plugin trình tải không nên tải. Lưu ý rằng các khóa và giá trị là ID mô-đun, không phải đoạn đường dẫn. Chúng là ID mô-đun tuyệt đối, không phải tiền tố ID mô-đun như hoặc. Ngoài ra, cấu hình gói khác với cấu hình bản đồ ở chỗ cấu hình bản đồ là mối quan hệ ID mô-đun một đối một, trong đó cấu hình gói dùng để trỏ nhiều ID mô-đun đến ID mô-đun của gói
Kể từ RequireJS 2. 2. 0, trình tối ưu hóa có thể tạo cấu hình gói và chèn nó vào yêu cầu cấp cao nhất. cuộc gọi cấu hình []. Xem tùy chọn cấu hình bản dựng để biết thêm chi tiết
Định cấu hình các phụ thuộc, xuất và khởi tạo tùy chỉnh cho các tập lệnh "toàn cầu trình duyệt" truyền thống, cũ hơn không sử dụng định nghĩa[] để khai báo các phụ thuộc và đặt giá trị mô-đun
Đây là một ví dụ. Nó yêu cầu RequireJS 2. 1. 0+ và giả định xương sống. js, gạch dưới. js và jquery. js đã được cài đặt trong thư mục baseUrl. Nếu không, thì bạn có thể cần đặt cấu hình đường dẫn cho chúng
Trong RequireJS 2. 0. *, thuộc tính "xuất" trong cấu hình shim có thể là một hàm thay vì một chuỗi. Trong trường hợp đó, nó hoạt động giống như thuộc tính "init" như hình trên. Mẫu "init" được sử dụng trong RequireJS 2. 1. 0+ nên giá trị chuỗi cho
//Inside file my/shirt.js:
define[{
color: "black",
size: "unisize"
}];
Đối với "mô-đun" chỉ là plugin jQuery hoặc Xương sống không cần xuất bất kỳ giá trị mô-đun nào, cấu hình shim chỉ có thể là một mảng phụ thuộc
Tuy nhiên, xin lưu ý rằng nếu bạn muốn phát hiện tải 404 trong IE để bạn có thể sử dụng dự phòng đường dẫn hoặc lỗi errback, thì bạn phải cung cấp giá trị xuất chuỗi để trình tải có thể kiểm tra xem tập lệnh có thực sự được tải hay không [trả về từ init không được sử dụng cho
//Inside file my/shirt.js:
define[{
color: "black",
size: "unisize"
}];
Lưu ý quan trọng cho cấu hình "shim"
- Cấu hình shim chỉ thiết lập các mối quan hệ mã. Để tải các mô-đun là một phần của hoặc sử dụng cấu hình shim, cần có lệnh gọi yêu cầu/xác định thông thường. Tự đặt shim không kích hoạt mã để tải
- Chỉ sử dụng các mô-đun "shim" khác làm phần phụ thuộc cho các tập lệnh được làm mờ hoặc các thư viện AMD không có phần phụ thuộc và gọi định nghĩa[] sau khi chúng cũng tạo một tập lệnh chung [như jQuery hoặc lodash]. Mặt khác, nếu bạn sử dụng mô-đun AMD làm phần phụ thuộc cho mô-đun cấu hình shim, thì sau khi xây dựng, mô-đun AMD đó có thể không được đánh giá cho đến khi mã được làm mờ trong bản dựng thực thi và sẽ xảy ra lỗi. Cách khắc phục cuối cùng là nâng cấp tất cả mã lấp lánh để có lệnh gọi AMDdefine[] tùy chọn
- Nếu không thể nâng cấp mã lấp lánh để sử dụng lệnh gọi AMDdefine[], kể từ RequireJS 2. 1. 11, trình tối ưu hóa sẽ cố gắng tự động bọc mã lấp lánh trong một định nghĩa[] cho một bản dựng. Điều này thay đổi phạm vi của các phần phụ thuộc được làm mờ, do đó, nó không được đảm bảo luôn hoạt động, nhưng, ví dụ, đối với các phần phụ thuộc được làm mờ phụ thuộc vào phiên bản AMD của Backbone, nó có thể hữu ích
- Chức năng init sẽ không được gọi cho các mô-đun AMD. Ví dụ: bạn không thể sử dụng hàm shim init để gọi hàm noConflict của jQuery. Xem cách tiếp cận thay thế cho jQuery
- Cấu hình Shim không được hỗ trợ khi chạy các mô-đun AMD trong nút thông qua RequireJS [mặc dù nó hoạt động để sử dụng trình tối ưu hóa]. Tùy thuộc vào mô-đun được làm mờ, nó có thể bị lỗi trong Node vì Node không có cùng môi trường toàn cầu như các trình duyệt. Kể từ RequireJS 2. 1. 7, nó sẽ cảnh báo bạn trong bảng điều khiển rằng cấu hình shim không được hỗ trợ và nó có thể hoạt động hoặc không. Nếu bạn muốn chặn tin nhắn đó, bạn có thể vượt qua
6//Inside file my/shirt.js: define[{ color: "black", size: "unisize" }];
Ghi chú tối ưu hóa quan trọng cho cấu hình "shim"
- Bạn nên sử dụng để chỉ định tệp nơi tìm cấu hình shim. Nếu không, trình tối ưu hóa sẽ không biết cấu hình shim. Tùy chọn khác là sao chép cấu hình shim trong cấu hình bản dựng
- Không kết hợp tải CDN với cấu hình shim trong bản dựng. kịch bản ví dụ. bạn tải jQuery từ CDN nhưng sử dụng cấu hình shim để tải thứ gì đó giống như phiên bản gốc của Backbone phụ thuộc vào jQuery. Khi bạn thực hiện việc xây dựng, hãy nhớ đặt nội tuyến jQuery trong tệp đã tạo và không tải nó từ CDN. Nếu không, Xương sống sẽ được nội tuyến trong tệp đã tạo và nó sẽ thực thi trước khi tải jQuery được tải bằng CDN. Điều này là do cấu hình shim chỉ trì hoãn việc tải các tệp cho đến khi các phần phụ thuộc được tải, nhưng không thực hiện bất kỳ thao tác tự động ngắt định nghĩa nào. Sau khi xây dựng, các phụ thuộc đã được nội tuyến, cấu hình shim không thể trì hoãn việc thực thi mã không xác định [] cho đến sau này. Các mô-đun định nghĩa []'d hoạt động với mã được tải CDN sau khi xây dựng vì chúng bao bọc đúng mã nguồn của chúng trong hàm xác định của nhà máy sẽ không thực thi cho đến khi các phụ thuộc được tải. Vì vậy bài học. shim config là thước đo khoảng cách dừng cho mã không theo mô-đun, mã kế thừa. mô-đun xác định[]'d tốt hơn
- Đối với các bản dựng cục bộ, nhiều tệp, lời khuyên CDN ở trên cũng được áp dụng. Đối với bất kỳ tập lệnh được làm mờ nào, các phần phụ thuộc của nó phải được tải trước khi tập lệnh được làm mờ thực thi. Điều này có nghĩa là xây dựng các phần phụ thuộc của nó trực tiếp trong lớp bản dựng bao gồm tập lệnh được làm mờ hoặc tải các phần phụ thuộc của nó bằng lệnh gọi
7, sau đó thực hiện lệnh gọi//Inside file my/shirt.js: define[{ color: "black", size: "unisize" }];
8 lồng nhau cho lớp bản dựng có tập lệnh được làm mờ//Inside file my/shirt.js: define[{ color: "black", size: "unisize" }]; - Nếu bạn đang sử dụng uglifyjs để thu nhỏ mã, không đặt tùy chọn uglify
9 thành true hoặc nếu sử dụng dòng lệnh thì không vượt qua//Inside file my/shirt.js: define[{ color: "black", size: "unisize" }];
00. Tùy chọn đó xáo trộn các tên toàn cầu mà shim sử dụng để tìm xuất khẩu
Đối với tiền tố mô-đun đã cho, thay vì tải mô-đun bằng ID đã cho, hãy thay một ID mô-đun khác
Loại khả năng này thực sự quan trọng đối với các dự án lớn hơn có thể có hai bộ mô-đun cần sử dụng hai phiên bản 'foo' khác nhau, nhưng chúng vẫn cần hợp tác với nhau
Điều này là không thể với. Ngoài ra, chỉ để thiết lập đường dẫn gốc cho ID mô-đun, không phải để ánh xạ ID mô-đun này sang ID mô-đun khác
ví dụ bản đồ
Nếu các mô-đun được đặt trên đĩa như thế này
Khi 'some/newmodule' thực hiện `require['foo']` nó sẽ lấy foo1. 2. js và khi 'some/oldmodule' thực hiện `require['foo']` thì nó sẽ nhận được foo1. 0. tập tin js
Tính năng này chỉ hoạt động tốt đối với các tập lệnh là mô-đun AND thực gọi định nghĩa [] và đăng ký dưới dạng mô-đun ẩn danh. Ngoài ra, chỉ sử dụng ID mô-đun tuyệt đối cho cấu hình bản đồ. ID tương đối [như
Ngoài ra còn có hỗ trợ cho giá trị bản đồ "*" có nghĩa là "đối với tất cả các mô-đun được tải, hãy sử dụng cấu hình bản đồ này". Nếu có cấu hình bản đồ cụ thể hơn, cấu hình đó sẽ được ưu tiên hơn cấu hình sao. Thí dụ
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
Có nghĩa là đối với bất kỳ mô-đun nào ngoại trừ "some/oldmodule", khi muốn có "foo", hãy sử dụng "foo1. 2" thay vào đó. Chỉ dành cho "some/oldmodule", hãy sử dụng "foo1. 0" khi nó yêu cầu "foo"
Ghi chú. khi thực hiện các bản dựng với cấu hình bản đồ, cấu hình bản đồ cần được cung cấp cho trình tối ưu hóa và đầu ra của bản dựng vẫn phải chứa lệnh gọi cấu hình requestjs để thiết lập cấu hình bản đồ. Trình tối ưu hóa không thực hiện đổi tên ID trong quá trình xây dựng vì một số tham chiếu phụ thuộc trong dự án có thể phụ thuộc vào trạng thái biến thời gian chạy. Vì vậy, trình tối ưu hóa không làm mất hiệu lực nhu cầu cấu hình bản đồ sau khi xây dựng
Có một nhu cầu phổ biến để chuyển thông tin cấu hình cho một mô-đun. Thông tin cấu hình đó thường được biết đến như một phần của ứng dụng và cần có một cách để chuyển thông tin đó xuống một mô-đun. Trong RequireJS, điều đó được thực hiện với tùy chọn cấu hình cho các yêu cầu. cấu hình[]. Sau đó, các mô-đun có thể đọc thông tin đó bằng cách yêu cầu "mô-đun" phụ thuộc đặc biệt và gọi mô-đun. cấu hình[]. Ví dụ
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
Để chuyển cấu hình tới a , hãy nhắm mục tiêu mô-đun chính trong gói chứ không phải ID gói
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
định cấu hình tải các mô-đun từ các gói CommonJS. Xem để biết thêm thông tin
Nút xử lý ID mô-đun
Số giây phải đợi trước khi từ bỏ việc tải tập lệnh. Đặt nó thành 0 sẽ vô hiệu hóa thời gian chờ. Mặc định là 7 giây
Tên để đặt cho bối cảnh tải. Điều này cho phép yêu cầu. js để tải nhiều phiên bản mô-đun trong một trang, miễn là mỗi lệnh gọi yêu cầu cấp cao nhất chỉ định một chuỗi ngữ cảnh duy nhất. Để sử dụng nó một cách chính xác, hãy xem phần
Một mảng các phụ thuộc để tải. Hữu ích khi yêu cầu được xác định là đối tượng cấu hình trước khi yêu cầu. js đã được tải và bạn muốn chỉ định các phụ thuộc sẽ tải ngay khi yêu cầu [] được xác định. Sử dụng deps cũng giống như thực hiện lệnh gọi
//Inside file my/shirt.js:
define[{
color: "black",
size: "unisize"
}];
Một chức năng để thực thi sau khi deps đã được tải. Hữu ích khi yêu cầu được xác định là đối tượng cấu hình trước khi yêu cầu. js đã được tải và bạn muốn chỉ định một hàm để yêu cầu sau khi mảng deps của cấu hình đã được tải
Nếu được đặt thành true, một lỗi sẽ xuất hiện nếu tập lệnh tải không gọi định nghĩa[] hoặc có giá trị chuỗi xuất khẩu shim có thể được kiểm tra. Xem để biết thêm thông tin
Nếu được đặt thành true, tài liệu. createElementNS[] sẽ được sử dụng để tạo các phần tử tập lệnh
Các đối số chuỗi truy vấn bổ sung được thêm vào các URL mà RequireJS sử dụng để tìm nạp tài nguyên. Hữu ích nhất để phá vỡ bộ đệm khi trình duyệt hoặc máy chủ không được định cấu hình chính xác. Ví dụ về cài đặt ngắt bộ nhớ cache cho urlArgs
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
Kể từ RequireJS 2. 2. 0, urlArgs có thể là một hàm. Nếu là một hàm, nó sẽ nhận ID mô-đun và URL làm tham số và nó sẽ trả về một chuỗi sẽ được thêm vào cuối URL. Trả về một chuỗi rỗng nếu không có đối số. Đảm bảo cẩn thận khi thêm '?' . Thí dụ
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
Trong quá trình phát triển, có thể hữu ích khi sử dụng tính năng này, tuy nhiên hãy chắc chắn xóa nó trước khi triển khai mã của bạn
Chỉ định giá trị cho thuộc tính type="" được sử dụng cho các thẻ tập lệnh được RequireJS chèn vào tài liệu. Mặc định là "văn bản/javascript". Để sử dụng JavaScript của Firefox 1. 8 tính năng, sử dụng "text/javascript;version=1. số 8"
Được giới thiệu trong RequireJS 2. 1. 9. Nếu được đặt thành
RequireJS hỗ trợ tải các mô-đun trong cấu trúc thư mục Gói CommonJS, nhưng một số cấu hình bổ sung cần được chỉ định để nó hoạt động. Cụ thể, có hỗ trợ cho các tính năng Gói CommonJS sau
- Một gói có thể được liên kết với tên/tiền tố mô-đun
- Cấu hình gói có thể chỉ định các thuộc tính sau cho một gói cụ thể
- Tên. Tên của gói [được sử dụng cho ánh xạ tiền tố/tên mô-đun]
- vị trí. Vị trí trên đĩa. Vị trí có liên quan đến giá trị cấu hình baseUrl, trừ khi chúng chứa giao thức hoặc bắt đầu bằng dấu gạch chéo trước [/]
- chủ yếu. Tên của mô-đun bên trong gói sẽ được sử dụng khi ai đó yêu cầu "tên gói". Giá trị mặc định là "chính", vì vậy chỉ chỉ định nó nếu nó khác với giá trị mặc định. Giá trị liên quan đến thư mục gói
LƯU Ý QUAN TRỌNG
- Mặc dù các gói có thể có bố cục thư mục CommonJS, nhưng bản thân các mô-đun phải ở định dạng mô-đun mà RequireJS có thể hiểu được. Ngoại lệ đối với quy tắc. nếu bạn đang sử dụng r. js Node, các mô-đun có thể ở định dạng mô-đun CommonJS truyền thống. Bạn có thể sử dụng nếu bạn cần chuyển đổi các mô-đun CommonJS truyền thống sang định dạng mô-đun không đồng bộ mà RequireJS sử dụng
- Mỗi lần chỉ có thể sử dụng một phiên bản của gói trong ngữ cảnh dự án. Bạn có thể sử dụng RequireJS để tải hai ngữ cảnh mô-đun khác nhau, nhưng nếu bạn muốn sử dụng Gói A và B trong một ngữ cảnh và chúng phụ thuộc vào các phiên bản khác nhau của Gói C, thì đó sẽ là một vấn đề. Nó có thể thay đổi tương lai
Nếu bạn sử dụng bố cục dự án tương tự như được chỉ định trong Hướng dẫn Bắt đầu, phần đầu dự án web của bạn sẽ giống như thế này [Các dự án dựa trên Node/Rhino cũng tương tự như vậy, chỉ cần sử dụng nội dung của thư mục tập lệnh làm thư mục dự án cấp cao nhất
Đây là cách bố trí thư mục mẫu với hai gói, giỏ hàng và cửa hàng
- thư mục dự án /
- dự án. html
- kịch bản/
- xe đẩy/
- cửa hàng/
- chủ yếu. js
- yêu cầu. js
dự án. html sẽ có một thẻ script như thế này
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
Điều này sẽ hướng dẫn yêu cầu. js để tải tập lệnh/chính. js. chủ yếu. js sử dụng cấu hình "gói" để thiết lập các gói tương ứng với yêu cầu. js, trong trường hợp này là các gói nguồn "cart" và "store"
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
Yêu cầu của "giỏ hàng" có nghĩa là nó sẽ được tải từ tập lệnh/giỏ hàng/chính. js, vì "main" là cài đặt mô-đun chính mặc định được RequireJS hỗ trợ. Yêu cầu "store/util" sẽ được tải từ scripts/store/util. js
Nếu gói "cửa hàng" không tuân theo "chính. js" và trông như thế này
- thư mục dự án /
- dự án. html
- kịch bản/
- xe đẩy/
- cửa hàng/
- chủ yếu. js
- bưu kiện. json
- yêu cầu. js
Sau đó, cấu hình RequireJS sẽ giống như vậy
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
Để tránh dài dòng, bạn nên luôn sử dụng các gói sử dụng quy ước "chính" trong cấu trúc của chúng
Như đã đề cập trong phần , nhiều phiên bản của mô-đun có thể được tải trong một trang bằng cách sử dụng các tùy chọn cấu hình "ngữ cảnh" khác nhau. yêu cầu. config[] trả về một hàm yêu cầu sẽ sử dụng cấu hình ngữ cảnh. Đây là một ví dụ tải hai phiên bản khác nhau của mô-đun alpha và beta [ví dụ này được lấy từ một trong các tệp thử nghiệm]
Lưu ý rằng "yêu cầu" được chỉ định làm phụ thuộc cho mô-đun. Điều này cho phép hàm request[] được chuyển đến hàm gọi lại để sử dụng đúng ngữ cảnh để tải các mô-đun một cách chính xác để hỗ trợ đa phiên bản. Nếu "yêu cầu" không được chỉ định làm phụ thuộc, thì có khả năng sẽ xảy ra lỗi
Ví dụ ở trên trong phần Hỗ trợ đa phiên bản cho thấy cách mã có thể được tải sau này bằng các lệnh gọi hàm require[] lồng nhau
Kể từ khi phát hành 0. 12, RequireJS có thể chạy bên trong Web Worker. Chỉ cần sử dụng importScripts[] bên trong web worker để tải yêu cầu. js [hoặc tệp JS chứa định nghĩa require[]], sau đó gọi yêu cầu
Bạn có thể sẽ cần đặt baseUrl để đảm bảo rằng require[] có thể tìm thấy tập lệnh để tải
Bạn có thể xem một ví dụ về việc sử dụng nó bằng cách xem một trong các tệp được sử dụng trong bài kiểm tra đơn vị
RequireJS có thể được sử dụng trong Rhino thông qua. Xem r. js README để biết thêm thông tin
Kể từ RequireJS 2. 1. 16, RequireJS có thể được sử dụng trong công cụ JavaScript của Nashorn, Java 8+, thông qua. Xem r. js README để biết thêm thông tin
Loại lỗi chung là lỗi 404 đối với tập lệnh [không tìm thấy], thời gian chờ mạng hoặc lỗi trong tập lệnh được tải. RequireJS có một vài công cụ để giải quyết chúng. lỗi yêu cầu cụ thể, cấu hình mảng "đường dẫn" và yêu cầu toàn cầu. onLỗi
Đối tượng lỗi được chuyển đến errback và các yêu cầu toàn cầu. Hàm onError thường sẽ chứa hai thuộc tính tùy chỉnh
- yêu cầuType. Một giá trị chuỗi có phân loại chung, như "timeout", "nodefine", "scripterror"
- yêu cầuModules. một mảng tên mô-đun/URL đã hết thời gian chờ
Nếu bạn gặp lỗi với một requestModules, điều đó có thể có nghĩa là các mô-đun khác phụ thuộc vào các mô-đun trong mảng requireModules đó không được xác định
§ 4. 6. 1
Internet Explorer có một loạt sự cố gây khó khăn cho việc phát hiện lỗi tải đối với dự phòng lỗi/đường dẫn
- kịch bản. onerror không hoạt động trong IE 6-8. Không có cách nào để biết liệu việc tải tập lệnh có tạo ra lỗi 404 hay không, tệ hơn là nó kích hoạt onreadystatechange với trạng thái hoàn chỉnh ngay cả trong trường hợp 404
- kịch bản. onerror không hoạt động trong IE 9+, nhưng nó có một lỗi khiến nó không kích hoạt tập lệnh. onload trình xử lý sự kiện ngay sau khi thực thi tập lệnh, vì vậy nó không thể hỗ trợ phương pháp tiêu chuẩn cho phép các mô-đun AMD ẩn danh. Vì vậy, kịch bản. onreadystatechange vẫn được sử dụng. Tuy nhiên, onreadystatechange kích hoạt với trạng thái hoàn chỉnh trước tập lệnh. chức năng onerror kích hoạt
Vì vậy, IE rất khó cho phép cả mô-đun AMD ẩn danh, đây là lợi ích cốt lõi của mô-đun AMD và phát hiện lỗi đáng tin cậy
Tuy nhiên, nếu bạn đang ở trong một dự án mà bạn biết sử dụng định nghĩa [] để khai báo tất cả các mô-đun của nó hoặc nó sử dụng cấu hình để chỉ định xuất chuỗi cho bất kỳ thứ gì không sử dụng định nghĩa [], thì nếu bạn đặt giá trị cấu hình thành true
Vì vậy, nếu bạn muốn hỗ trợ Internet Explorer, phát hiện lỗi tải và có mã mô-đun thông qua lệnh gọi định nghĩa trực tiếp [] hoặc cấu hình shim, hãy luôn đặt thực thiDefine thành đúng. Xem phần tiếp theo để biết ví dụ
GHI CHÚ. Nếu bạn đặt thực thiDefine. đúng và bạn sử dụng data-main="" để tải mô-đun JS chính của mình, thì mô-đun JS chính đó phải gọi định nghĩa[] thay vì yêu cầu[] để tải mã cần thiết. Mô-đun JS chính vẫn có thể gọi yêu cầu/requirejs để đặt giá trị cấu hình, nhưng để tải mô-đun, nó nên sử dụng định nghĩa[]
Nếu sau đó bạn cũng sử dụng hạnh nhân để xây dựng mã của mình mà không yêu cầu. js, hãy đảm bảo sử dụng cài đặt bản dựng để chèn lệnh gọi yêu cầu cho mô-đun chính -- phục vụ cùng mục đích của lệnh gọi require[] ban đầu mà data-main thực hiện
§ 4. 6. 2
Errbacks, khi được sử dụng với , sẽ cho phép bạn phát hiện nếu một mô-đun không tải được, xác định lại mô-đun đó, đặt lại cấu hình sang một vị trí khác, sau đó thử lại
Trường hợp sử dụng phổ biến cho việc này là sử dụng phiên bản thư viện được lưu trữ trên CDN, nhưng nếu không thành công, hãy chuyển sang tải tệp cục bộ
// contents of main.js:
require.config[{
paths: {
foo: 'libs/foo-1.1.3'
}
}];
Với `requirejs. undef[]`, nếu sau đó bạn thiết lập một cấu hình khác và thử tải cùng một mô-đun, trình tải sẽ vẫn nhớ những mô-đun nào cần phần phụ thuộc đó và hoàn tất tải chúng khi tải mô-đun mới được định cấu hình
Ghi chú. errback chỉ hoạt động với các cuộc gọi yêu cầu kiểu gọi lại, không phải các cuộc gọi xác định []. định nghĩa [] chỉ để khai báo các mô-đun
§ 4. 6. 3
Mẫu trên để phát hiện lỗi tải, undef[] trong một mô-đun, sửa đổi đường dẫn và tải lại là một yêu cầu phổ biến và cũng có một cách viết tắt cho nó. Cấu hình đường dẫn cho phép giá trị mảng
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
Đoạn mã trên sẽ thử vị trí CDN, nhưng nếu không thành công, hãy quay lại lib/jquery cục bộ. vị trí js
Ghi chú. dự phòng đường dẫn chỉ hoạt động đối với các kết quả ID mô-đun chính xác. Điều này khác với cấu hình đường dẫn thông thường có thể áp dụng cho bất kỳ phần nào của phân đoạn tiền tố ID mô-đun. Dự phòng được nhắm mục tiêu nhiều hơn để khôi phục lỗi bất thường, không phải là giải pháp đường dẫn tìm kiếm đường dẫn chung, vì chúng không hiệu quả trong trình duyệt
§ 4. 6. 4
Để phát hiện các lỗi không bị lỗi cục bộ bắt được, bạn có thể ghi đè các yêu cầu. onError[]
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
RequireJS hỗ trợ các plugin trình tải. Đây là một cách để hỗ trợ các phần phụ thuộc không phải là tệp JS đơn giản, nhưng vẫn quan trọng đối với tập lệnh được tải trước khi nó có thể thực hiện công việc của mình. Wiki RequireJS có một danh sách các plugin. Phần này nói về một số plugin cụ thể được duy trì cùng với RequireJS
Thật tuyệt khi xây dựng HTML bằng cách sử dụng các thẻ HTML thông thường, thay vì xây dựng cấu trúc DOM trong tập lệnh. Tuy nhiên, không có cách nào tốt để nhúng HTML vào tệp JavaScript. Điều tốt nhất có thể làm là sử dụng một chuỗi HTML, nhưng điều đó có thể khó quản lý, đặc biệt đối với HTML nhiều dòng
RequireJS có một plugin, văn bản. js, điều đó có thể giúp giải quyết vấn đề này. Nó sẽ tự động được tải nếu văn bản. tiền tố được sử dụng cho một phụ thuộc. xem văn bản. js README để biết thêm thông tin
Khi sử dụng RequireJS, có thể tải tập lệnh đủ nhanh để chúng hoàn thành trước khi DOM sẵn sàng. Bất kỳ công việc nào cố gắng tương tác với DOM nên đợi DOM sẵn sàng. Đối với các trình duyệt hiện đại, điều này được thực hiện bằng cách đợi sự kiện DOMContentLoaded
Tuy nhiên, không phải tất cả các trình duyệt đang sử dụng đều hỗ trợ DOMContentLoaded. Mô-đun domReady triển khai một phương thức trên nhiều trình duyệt để xác định thời điểm DOM sẵn sàng. và sử dụng nó trong dự án của bạn như vậy
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
Do DOM sẵn sàng là một nhu cầu phổ biến của ứng dụng, lý tưởng nhất là có thể tránh được các hàm lồng nhau trong API ở trên. Mô-đun domReady cũng triển khai API trình cắm Trình tải, vì vậy bạn có thể sử dụng cú pháp trình cắm trình tải [chú ý. trong phần phụ thuộc domReady] để buộc hàm gọi lại require[] đợi DOM sẵn sàng trước khi thực thi
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
Ghi chú. Nếu tài liệu mất một lúc để tải [có thể đó là một tài liệu rất lớn hoặc có các thẻ tập lệnh HTML đang tải các tệp JS lớn chặn quá trình hoàn thành DOM cho đến khi chúng hoàn tất], việc sử dụng domReady làm plugin trình tải có thể dẫn đến "thời gian chờ" của RequireJS . Nếu đây là sự cố, hãy tăng cấu hình hoặc chỉ sử dụng domReady làm mô-đun và gọi domReady[] bên trong hàm gọi lại require[]
Khi ứng dụng web của bạn đạt đến một kích thước và mức độ phổ biến nhất định, việc bản địa hóa các chuỗi trong giao diện và cung cấp thông tin cụ thể về ngôn ngữ khác sẽ trở nên hữu ích hơn. Tuy nhiên, có thể phức tạp để tìm ra một sơ đồ có quy mô tốt để hỗ trợ nhiều ngôn ngữ
RequireJS cho phép bạn thiết lập một mô-đun cơ bản có thông tin được bản địa hóa mà không buộc bạn phải cung cấp trước tất cả thông tin cụ thể về ngôn ngữ. Nó có thể được thêm vào theo thời gian và chỉ các chuỗi/giá trị thay đổi giữa các ngôn ngữ mới có thể được xác định trong tệp dành riêng cho ngôn ngữ
hỗ trợ gói i18n được cung cấp bởi i18n. plugin js. Nó được tải tự động khi một mô-đun hoặc phần phụ thuộc chỉ định i18n. tiền tố [thêm thông tin bên dưới]. và đặt nó vào cùng thư mục với tệp JS chính của ứng dụng của bạn
Để xác định một gói, hãy đặt nó trong thư mục có tên "nls" -- i18n. plugin giả định tên mô-đun có "nls" trong đó biểu thị gói i18n. Dấu "nls" trong tên cho plugin i18n biết nơi mong đợi các thư mục ngôn ngữ [chúng phải là con ngay lập tức của thư mục nls]. Nếu bạn muốn cung cấp một nhóm tên màu trong bộ mô-đun "của tôi", hãy tạo cấu trúc thư mục như vậy
Nội dung của tập tin đó sẽ giống như vậy
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
Một đối tượng bằng chữ có thuộc tính "root" xác định mô-đun này. Đó là tất cả những gì bạn phải làm để tạo tiền đề cho công việc bản địa hóa sau này
Sau đó, bạn có thể sử dụng mô-đun trên trong một mô-đun khác, chẳng hạn như trong tệp my/lamps. tập tin js
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
Mô-đun my/đèn có một thuộc tính gọi là "testMessage" sử dụng màu sắc. đỏ để hiển thị giá trị bản địa hóa cho màu đỏ
Sau này, khi bạn muốn thêm một bản dịch cụ thể vào một tệp, chẳng hạn đối với ngôn ngữ fr-fr, hãy thay đổi my/nls/colors thành như vậy
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
Sau đó xác định một tệp tại my/nls/fr-fr/colors. js có nội dung sau
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
RequireJS sẽ sử dụng bộ điều hướng của trình duyệt. ngôn ngữ, hoa tiêu. ngôn ngữ hoặc hoa tiêu. userLanguage để xác định giá trị ngôn ngữ nào sẽ sử dụng cho my/nls/colors, vì vậy ứng dụng của bạn không phải thay đổi. Nếu bạn muốn đặt ngôn ngữ, bạn có thể sử dụng để chuyển ngôn ngữ cho plugin
// contents of other.js:
// This code might be called before the require.config[] in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require[['foo'], function[foo] {
}];
Lưu ý rằng RequireJS sẽ luôn sử dụng phiên bản chữ thường của ngôn ngữ, để tránh các vấn đề về chữ hoa chữ thường, vì vậy tất cả các thư mục và tệp trên đĩa cho gói i18n nên sử dụng ngôn ngữ chữ thường
RequireJS cũng đủ thông minh để chọn gói ngôn ngữ phù hợp, gói phù hợp nhất với gói được cung cấp bởi my/nls/colors. Chẳng hạn, nếu ngôn ngữ là "en-us", thì gói "root" sẽ được sử dụng. Nếu ngôn ngữ là "fr-fr-paris" thì gói "fr-fr" sẽ được sử dụng
RequireJS cũng kết hợp các gói lại với nhau, ví dụ: nếu gói tiếng Pháp được định nghĩa như vậy [bỏ qua giá trị cho màu đỏ]
Sau đó, giá trị cho màu đỏ trong "root" sẽ được sử dụng. Điều này hoạt động cho tất cả các phần địa phương. Nếu tất cả các gói được liệt kê bên dưới đã được xác định, thì RequireJS sẽ sử dụng các giá trị theo thứ tự ưu tiên sau [giá trị ở trên cùng được ưu tiên nhất]
- my/nls/fr-fr-paris/colors. js
- my/nls/fr-fr/colors. js
- my/nls/fr/colors. js
- của tôi/nls/màu sắc. js
Nếu bạn không muốn bao gồm gói gốc trong mô-đun cấp cao nhất, bạn có thể định nghĩa nó giống như gói ngôn ngữ bình thường. Trong trường hợp đó, mô-đun cấp cao nhất sẽ giống như