Bạn đang xem: Requirejs là gì
Định nghĩa mô-đun Async (AMD) Đầu tiên
Bạn không thể bắt đầu nói về RequireJS mà không đề cập đến các mô-đun JavaScript là gì và AMD là gì.
Các mô-đun JavaScript chỉ là các đoạn mã tuân theo SRP (Nguyên tắc trách nhiệm đơn lẻ) và hiển thị API công khai. Trong phát triển JavaScript ngày nay, bạn gói gọn rất nhiều chức năng bên trong các mô-đun và trong hầu hết các dự án, mỗi mô-đun tồn tại trong tệp riêng của nó. Điều đó làm cho cuộc sống của các nhà phát triển JavaScript khó khăn hơn một chút vì họ cần liên tục theo dõi sự phụ thuộc giữa các mô-đun và tải các mô-đun theo một thứ tự cụ thể hoặc nếu không có lỗi trong thời gian chạy.
Khi bạn muốn tải các mô-đun JavaScript, bạn sử dụng các thẻ script. Để tải phụ thuộc mô-đun, bạn cần tải phụ thuộc trước và sau đó phụ thuộc. Khi sử dụng thẻ script, bạn cần sắp xếp tải chúng theo thứ tự cụ thể đó và các script sẽ được tải đồng bộ. Bạn có thể sử dụng các từ khóa async và defer để làm cho tải không đồng bộ nhưng bạn có thể mất thứ tự tải trong quy trình. Một tùy chọn khác là gói tất cả các tập lệnh nhưng bạn vẫn cần phải sắp xếp chúng theo đúng thứ tự trong quá trình gói.
AMD là tất cả về việc xác định các mô-đun theo cách mà mô-đun và các phụ thuộc của nó có thể được tải không đồng bộ và theo đúng thứ tự.
CommonJS , là một nỗ lực để chuẩn hóa các mẫu JavaScript phổ biến, bao gồm một định nghĩa AMD mà tôi khuyến khích bạn đọc trước khi bạn tiếp tục bài viết này. Trong ECMAScript 6, thông số kỹ thuật JavaScript vNext, có các thông số kỹ thuật cho xuất, nhập và mô-đun sẽ là một phần của ngôn ngữ JavaScript nhưng chỉ trong tương lai gần. Đây là nơi RequireJS đang bước vào câu chuyện của chúng tôi.
Yêu cầuJS?
RequireJS là một tệp JavaScript và khung mô-đun có thể được tải xuống từ http : //requirejs.org / hoặc bằng cách sử dụng Nuget, nếu bạn làm việc trong môi trường Visual Studio. Nó được hỗ trợ cả các trình duyệt và trong môi trường máy chủ như Node.js . Sử dụng RequireJS, bạn sẽ chỉ tải các phụ thuộc mô-đun có liên quan theo đúng thứ tự của chúng.
Xem thêm: Phân Loại Các Nguồn Tài Nguyên Thiên Nhiên Là Gì
Những gì RequireJS đang làm khi bạn sử dụng nó là tạo các thẻ script cho từng phụ thuộc mà bạn đã xác định và tải các phụ thuộc đó một cách nhanh chóng bằng cách sử dụng hàm head.appendChild () . Sau đó, sau khi các phụ thuộc được tải, RequireJS sẽ tìm đúng thứ tự để xác định các mô-đun và sẽ gọi từng định nghĩa mô-đun theo đúng thứ tự đó. Điều đó có nghĩa là bạn chỉ cần một root để tải toàn bộ chức năng mà bạn cần và RequireJS sẽ làm phần còn lại. Để sử dụng chức năng đó phù hợp, bạn sẽ phải xác định từng mô-đun của mình bằng API RequireJS nếu không sẽ không có gì hoạt động như mong đợi.
API RequireJS tồn tại bên trong không gian tên requestjs được tải khi bạn tải tập lệnh RequireJS. RequireJS bao gồm ba hàm API chính:
định nghĩa – chức năng được sử dụng để xác định một mô-đun. Mỗi mô-đun được xác định với một ID mô-đun duy nhất sẽ được sử dụng bởi chức năng thời gian chạy RequireJS. Hàm xác định là một hàm toàn cục và bạn không cần sử dụng nó với không gian tên requestjs . yêu cầu – chức năng được sử dụng để tải các phụ thuộc cần thiết. Đây là một chức năng toàn cầu và bạn không cần phải sử dụng nó với không gian tên requestjs . cấu hình – chức năng được sử dụng để cấu hình các requirejs chức năng thời gian chạy.
Sau đó, chúng tôi sẽ kiểm tra cách sử dụng các chức năng đó, nhưng trước tiên hãy hiểu cách bắt đầu quá trình tải RequireJS.
Thuộc tính dữ liệu chính
Khi bạn đã tải xuống RequireJS, điều đầu tiên cần làm sau khi bạn đặt tập lệnh của nó vào giải pháp của bạn là hiểu cách RequireJS bắt đầu hoạt động. Khi RequireJS được tải, nó tìm kiếm một tập lệnh có thuộc tính data-main (nó phải là cùng một tập lệnh với thuộc tính src được đặt để tải RequireJS). Các dữ liệu chính nên được thiết lập để các cơ sở Url cho tất cả các kịch bản. Từ Url cơ sở, RequireJS sẽ bắt đầu tải tất cả các mô-đun có liên quan. Dưới đây là ví dụ về thẻ script với thuộc tính data-main :
Một cách khác để xác định Url cơ sở là sử dụng chức năng cấu hình mà chúng ta sẽ thấy sau này. RequireJS giả định rằng tất cả các phụ thuộc là các tập lệnh nên khi bạn khai báo một phụ thuộc, bạn không cần phải sử dụng hậu tố .js.
Chức năng cấu hình
Nếu bạn muốn thay đổi các giá trị cấu hình RequireJS mặc định bằng các cấu hình của riêng bạn, bạn có thể thực hiện điều đó bằng cách sử dụng hàm requestjs.config . Hàm cấu hình nhận được một đối tượng tùy chọn có thể bao gồm rất nhiều tùy chọn cấu hình. Dưới đây là một số cấu hình mà bạn có thể sử dụng:
baseUrl – đường dẫn gốc để bắt đầu tải các mô-đun. đường dẫn – ánh xạ đường dẫn cho các mô-đun không tồn tại trong cơ sởUrl shims – cấu hình cho các phụ thuộc, xuất và chức năng khởi tạo để bọc các tập lệnh / mô-đun không sử dụng chức năng xác định RequireJS . Ví dụ: nếu thư viện gạch dưới không sử dụng chức năng xác định RequireJS và bạn vẫn muốn sử dụng nó với RequireJS, bạn sẽ phải xác định nó là một shim trong chức năng cấu hình . deps – mảng phụ thuộc để tải.
Dưới đây là một ví dụ về việc sử dụng chức năng cấu hình :
require.config({ //By default load any module IDs from scripts/app baseUrl: “scripts/app”, //except, if the module ID starts with “lib” paths: { lib: “../lib” }, // load backbone as a shim shim: { “backbone”: { //The underscore script dependency should be loaded before loading backbone.js deps: , // use the global “Backbone” as the module name. exports: “Backbone” } }});Url cơ sở trong ví dụ được đặt thành script / ứng dụng, mọi mô-đun bắt đầu bằng lib được cấu hình để được sử dụng từ thư mục scripts / lib và xương sống được tải dưới dạng shim với các phụ thuộc.
Xác định mô-đun bằng RequireJS
Các mô-đun chỉ là các đối tượng có phạm vi tốt phơi bày API và đóng gói các phần bên trong của chúng. Để xác định mô-đun, RequireJS trưng ra chức năng xác định . Chỉ nên có một cuộc gọi để xác định trong mỗi tệp JavaScript theo quy ước. Hàm định nghĩa nhận một mảng các phụ thuộc và một hàm sẽ giữ tất cả các định nghĩa mô-đun. Theo quy ước, hàm định nghĩa mô-đun nhận dưới dạng tham số tất cả các phụ thuộc trước đó và theo thứ tự chúng được cung cấp trong mảng. Ví dụ, đây là một định nghĩa mô-đun đơn giản:
define(, function(logger) { return { firstName: “John”, lastName: “Black“, sayHello: function () { logger.log(‘hello’); } } });Như bạn có thể thấy, một mảng được truyền cho hàm định nghĩa với một phụ thuộc logger mà sau này được sử dụng trong mô-đun. Ngoài ra, bạn có thể thấy rằng trong hàm định nghĩa mô-đun có một tham số gọi là logger sẽ được đặt thành mô-đun logger được tải. Mỗi mô-đun sẽ trả về API của nó, trong trường hợp này là hai thuộc tính (FirstName và LastName) và một hàm (sayHello). Sau này, nếu bạn sẽ tải mô-đun này dưới dạng phụ thuộc mô-đun khác với id mô-đun, bạn sẽ có thể sử dụng API được hiển thị.
Xem thêm: Mạng 5g Là Gì – Có Những ưu điểm Gì So Với 4g
Sử dụng Hàm yêu cầu
Một chức năng hữu ích khác trong RequireJS là chức năng yêu cầu . Hàm yêu cầu được sử dụng để tải các phụ thuộc mà không cần tạo mô-đun. Ví dụ, đây là cách sử dụng hàm yêu cầu xác định hàm yêu cầu jQuery hoạt động:
require(, function ($) { //jQuery was loaded and can be used now});
Tóm lược
Trong bài đăng tôi đã giới thiệu RequireJS, một trong những thư viện mà tôi đang sử dụng trong mọi dự án ứng dụng JavaScript. Khác sau đó chỉ cần tải các phụ thuộc mô-đun và theo thứ tự có liên quan, RequireJS giúp viết mã JavaScript mô-đun có thể duy trì và tái sử dụng nhiều hơn.
Chuyên mục: Hỏi Đáp
