Requirejs Là Gì

)

Trong quy trình cải tiến và phát triển Web, chắc chắn bạn sẽ đề xuất làm việc cùng với JavaScript. Theo thời hạn, thuộc với sự cải cách và phát triển của dự án, code JavaScript cũng càng ngày càng tinh vi. Bài viết này đã trình bày một thư viện để giúp bọn họ module hóa code JavaScript sẽ giúp nó dễ dàng duy trì rộng, chính là sử dụng AMD (Asynchronous Module Definition) và RequireJS.

Bạn đang xem: Requirejs là gì

Tại sao đề xuất module hóa JavaScript

Module rất có thể gọi đơn giản là một phần của code thiết đặt một công dụng nào đó. Phần code này sẽ được tàng trữ hiếm hoi cùng với các phần code không giống. thường thì, họ lưu những module thành các tệp tin lẻ tẻ. Module hóa đơn giản và dễ dàng là vấn đề chia code thành các module. Vậy tại vì sao đề xuất làm nhỏng vậy?

Nếu ko phân chia module, code JavaScript trở cần phức tạp cùng với hàng nghìn nghìn loại code. Mà cùng với phần đông tệp tin to như thế, chúng ta bắt buộc là một trong dị nhân bắt đầu có thể hiểu với gọi bọn chúng. Để code dễ nhìn đọc rộng, với dễ gia hạn, biến đổi hơn, chúng ta nên chia chúng thành những thành phần nhỏ tuổi hơn. Mỗi phần có những kỹ năng đơn lẻ, Khi buộc phải thay thế sửa chữa phần làm sao chỉ cần quan tâm mang lại đúng phần sẽ là được.

Việc module hóa là 1 bài toán vô cùng đỗi thoải mái và tự nhiên như thế, nhưng JavaScript dường như lại chưa có vẻ ngoài giúp chúng ta thao tác làm việc đó. Hiện giờ ECMAScript 2015 (ESnăm ngoái hoặc rất có thể gọi là ES6) hoàn toàn có thể giải quyết và xử lý vấn đề này bằng phương pháp thêm tư tưởng module cho ngữ điệu. Nhưng những trình ưng chuẩn vẫn không hoàn toàn cung ứng ES2015 bắt buộc đây vẫn là cthị trấn của sau này.

cũng có thể bạn đang vướng mắc rằng, chẳng đề xuất mỗi tệp tin .js chính là một module rồi sao? Đương nhiên, bạn có thể phân tách code thành những tệp tin cùng load bọn chúng bởi thẻ script. Nhưng biện pháp làm cho này không hoàn toàn được coi là module hóa. Có tương đối nhiều sự việc tương quan mang lại cách làm này.

Chúng ta hãy liếc qua ví dụ sau, đấy là một ví dụ hơi điển hình ví như họ chia code JavaScript thành những tệp tin .js.

jQuery phải được load đầu tiên vị toàn bộ các file không giống những cần đến nó.Những yếu tắc phía bên trong app/modules sẽ được dùng vì các nguyên tố thiết yếu của ứng dụng, buộc phải bọn chúng cần phải được load trước.Tiếp theo chúng ta load code chủ yếu của vận dụng.

Chúng ta rất có thể dễ ợt phân biệt rằng, vấn đề load những tệp tin theo đúng lắp thêm từ bỏ là rất quan trọng vì chưng bọn chúng phụ thuộc vào cho nhau. Hình như, để hạn chế sự ảnh hưởng của rất nhiều thẻ script tới quy trình render trang, bọn họ hay đặt nó sinh sống cuối trang.

Cách chế biến này không được công dụng đến lắm bởi bọn họ nên tự bản thân thống trị những module với load bọn chúng mang đến đúng lắp thêm trường đoản cú thì mới có thể chạy được. Dường như các thẻ script còn tận hưởng thêm những request để tải những file này, và trình chú ý sẽ hoàn thành câu hỏi render cho đến Lúc những file này được mua và thực thi xong.

Việc này thuở đầu hoàn toàn có thể không phải là vấn đề, tuy vậy Lúc code phức hợp dần lên, những tệp tin tăng cao lên với họ ngày càng cực nhọc cai quản những thẻ script hơn. Kể cả họ cần sử dụng các phép tắc minify code thì họ vẫn yêu cầu gộp bọn chúng theo đúng trang bị từ bỏ.

Hình như còn một vụ việc khác nữa. Các trang của một áp dụng thường được sử dụng chung layout với nhau, vì thế đang load JavaScript tương đương nhau. Tuy nhiên, không hẳn code JavaScript nào cũng yêu cầu mang lại tất cả các trang. Có cực kỳ phần nhiều code chỉ cần cho một vài ba trang nhất mực mà lại thôi.

khi đó, bọn họ cần làm một vấn đề, đó là đặt class giỏi id cho một thành phần HTML nào kia, rồi trong code JavaScript thì bình chọn coi trang có nhân tố kia hay không. Nếu bao gồm thì chạy, ko thì thôi. Việc load hoàng loạt JavaScript quá như vậy thiệt là tiêu tốn lãng phí băng thông.

Những thời gian như thế, tôi siêu hi vọng JavaScript tất cả một chính sách kiểu như import của Pyhẹp, để chúng ta chỉ load gần như gì yêu cầu cho trang nhưng mà thôi.

do đó, vấn để ở đây rất rõ ràng, cùng họ cần một cách thức tốt hơn nhằm module hóa JavaScript hơn là chỉ đơn giản và dễ dàng là phân tách code thành các file với load từng tệp tin một. Sau một thời hạn tìm hiểu, thì tôi nghe biết RequireJS. Trong bài viết này, tôi vẫn trình diễn một số kỹ năng và kiến thức nhưng mà tôi đã chiếm được, hi vọng để giúp chúng ta trong quy trình cải tiến và phát triển ứng dụng Web.

Cách module hóa JavaScript

Mặc cho dù JavaScript không cung ứng các module, tuy thế cộng đồng các developer đã cố gắng tìm thấy phương pháp để thao tác làm việc này. Sau một thời gian cách tân và phát triển, thì bây giờ bao gồm một vài cách làm module hóa nhỏng sau:

The Module pattern

Trong hầu hết giải pháp bên trên, module pattern ko thử khám phá bất kể một điều khoản xuất xắc thỏng viện như thế nào, nó hoàn toàn có thể chuyển động ở phần nhiều môi trường xung quanh JavaScript. CommonJS hướng về phương châm là JavaScript chạy ngơi nghỉ server-side. AMD chính là thủ tục khôn xiết thông dụng với phần lớn vận dụng Web, với nó cũng chính là cách thức nhưng mà RequireJS thực hiện.

Nói sang một chút về module pattern. cũng có thể chúng ta sẽ sử dụng nó rồi cơ mà không tuyệt biết, duy nhất là khi chúng ta liên tục code CoffeeScript.

Trong JavaScript, module pattern là cách để gói gọn code, nhằm mục đích giảm tđọc số đông xung bỗng dưng hoàn toàn có thể xảy ra Lúc định nghĩa thương hiệu hàm và biến hóa. Nó đơn giản và dễ dàng chỉ cần code được đặt vào một hàm vô danh được triển khai ngay. Hàm này vẫn trả tác dụng là một đối tượng người dùng cùng đối tượng người dùng này sẽ tiến hành sử dụng như một module. Mọi code JavaScript để tạo thành đối tượng người tiêu dùng kia hoàn toàn được gói gọn vào hàm vô danh. Hãy nhìn qua ví dụ sau, bạn sẽ thấy nó khôn xiết quen thuộc.

var loginModule = (function() "use strict"; var module = ; var privateVariable = 42; var privateLogin = function(userNameValue, userPasswordValue) if (userNameValue === "admin" && userPasswordValue === "secret") return privateVariable; ; module.myConstant = 1984; module.login = function(userNameValue, userPasswordValue) privateLogin(userNameValue, userPasswordValue); console.log("login implementation omitted"); ; module.logout = function() console.log("logout implementation omitted"); ; return module;)();Trên phía trên chỉ là 1 trong ví dụ dễ dàng và đơn giản, module pattern có thể được vận dụng phức tạp hơn các, bởi Việc áp dụng các đối tượng người dùng global tuyệt namespace.

Module pattern hoạt động xuất sắc với phần lớn ứng dụng nhỏ tuổi. Nó khôn cùng tiện lợi nhằm thiết lập cùng ko yêu cầu tlỗi viện như thế nào cả. Tuy nhiên, Lúc vận dụng phức hợp rộng, biện pháp làm cho này không thể phù hợp nữa. khi làm việc với vận dụng có không ít module, bạn sẽ buộc phải làm cho nhiều bài toán chán nản như kiếm tra đối tượng người tiêu dùng gồm trường tồn sống global hay là không, thống trị namespace thiệt cẩn thận, và vì nhiều người đang tạo thành các đối tượng người tiêu dùng, bạn phải suy xét nhằm tnhãi ranh đầy đủ xung bỗng khi đặt tên.

ngoài ra, module pattern cấp thiết giải quyết và xử lý được rất nhiều vấn đề cơ mà chúng ta đang nói đến ở trong phần trước. Vì vắt bọn họ yêu cầu đến AMD và RequireJS.

Asynchronous Module Definition (AMD)

AMD là 1 trong phương thơm thực tư tưởng module cơ mà module và đều yếu tắc nhờ vào của chính nó hoàn toàn có thể được load ko đồng bộ. Ban đầu, AMD là 1 trong những bạn dạng nháp quánh tả kỹ thuật của CommonJS, nhưng lại nó không sở hữu và nhận được sự cỗ vũ bắt buộc sự cách tân và phát triển tiếp sau đó của chính nó được chuyển thanh lịch amdjs GitHub page.

AMD API bao hàm hàm sau:

define nhằm có mang module.require nhằm load module cùng các thành phần phụ thuộc.

Xem thêm: Cảnh Báo Những Tác Dụng Phụ Của Đường Dextrose Là Gì ? Tác Dụng Của Dextrose ?

Hàm define phải 3 tsay mê số, chính là module ID (hoàn toàn có thể không có), một xâu những nguyên tố dựa vào với một hàm callback sẽ tiến hành call Khi những nguyên tố được load.

Một knhì báo dễ dàng và đơn giản cho hàm define nhỏng dưới đây:

define( module_id, , function );Hàm callbaông xã function chỉ được thực hiện một đợt.

Hàm require đề nghị 2 tmê mệt số:

Một xâu các module bắt buộc load.Một hàm callbachồng được xúc tiến sau thời điểm các module này load chấm dứt. Các module sống tham mê số thức độc nhất vô nhị sẽ được truyền vào hàm này như là tmê mệt số theo như đúng sản phẩm công nghệ từ bọn chúng được liệt kê.

Dưới đây là một ví dụ dễ dàng mang đến hàm require:

require(<"main">, function() console.log("module main is loaded"););Dưới đấy là số đông ưu, điểm yếu của AMD, nếu khách hàng thấy nó phù hợp với mình thì có thể sử dụng:

Ưu điểm:

API khôn xiết đơn giản dễ dàng, chi cần 2 hàm require cùng define.Có không hề ít cách để load khác nhau. Chúng ta đã để ý một ví dụ tại phần sau.AMD không cực nhọc để debug.khi module hóa áp dụng, bạn dễ ợt tìm ra phần code nào bị lỗi.Performance: các module được load lúc phải, cho nên vì thế vận dụng lúc khởi tạo nên siêu thanh thanh.

Nhược điểm:

Danh sách yếu tố nhờ vào sẽ tương đối lâu năm lúc vận dụng trsinh sống bắt buộc phức hợp.

define( <"one", "two", "three", "four", "five", "six">, function(one, two, three, four, five, six) "use strict"; // module"s code omitted );Một lỗi thiếu cẩn trọng của lập trình sẵn viên rất có thể khiến ứng dụng chuyển động không nên. ví dụ như sau, Việc list các thành phần nhờ vào cùng ttê mê số hàm callbaông xã không khớp chưa hẳn lỗi cú pháp và nó đã khiến vận dụng vận động Theo phong cách mà lại không một ai gọi được. define( <"one", "two", "three", "four", "five", "six">, function(one, two, three, four, six, five) "use strict"; // module"s code omitted );Ngoài lề: ESnăm ngoái moduleES2015 (ES6) đã có tạo bằng lòng, tuy nhiên những trình chu đáo chưa trọn vẹn hỗ trợ nó không hề thiếu. Vào thời điểm này, họ vẫn không thể tin cẩn nhằm sử dụng hết phần đông tính năng vượt trội của nó được. Tuy nhiên, hi vọng về sau ngay gần chúng ta vẫn sớm tiếp cận cùng với nó.

Một thiên tài rất đặc trưng mà lại ESnăm ngoái biểu lộ sẽ là cú pháp module. Chúng ta rất có thể code module login theo diễn đạt của ES2015 như sau:

export function login(userNameValue, userPasswordValue) return userNameValue + "_" + userNameValue;Từ khóa export hướng dẫn và chỉ định hàm hoặc đối tượng người tiêu dùng sẽ được trích xuất là 1 trong module. Module này rất có thể được thực hiện nghỉ ngơi ngẫu nhiên code JavaScript làm sao không giống. lấy ví dụ như như chúng ta dùng module main nlỗi dưới đây:

import login from "./login"var result = login("admin", "password");Với từ khóa import bọn họ gán hàm login() cùng với module login. Việc phân chia module như vậy rất lôi cuốn, hy vọng chúng ta đã nhanh chóng được áp dụng nó một biện pháp thoáng rộng.

RequireJS

Theo quan niệm bên trên Home thì

RequireJS là 1 tệp tin JavaScript cùng một module loader. Nó được về tối ưu hóa mang lại môi trường thiên nhiên trình coi xét cơ mà cũng có thể sử dụng trong những môi trường JavaScript không giống, như Rhino hoặc Node. Sử dụng các module loader nlỗi RequireJS sẽ giúp tăng tốc độ cùng unique code của công ty.

Tất nhiên, đây là một quan niệm bao gồm hơi hướng truyền bá. Chúng ta rất có thể hiểu đơn giản và dễ dàng RequireJS là một trong thỏng viện được cho phép họ module hóa code JavaScript theo quy chuẩn chỉnh của AMD.

Download

Quý Khách hoàn toàn có thể dễ dàng download RequireJS từ trang tải về của mình. Có 2 phiên bạn dạng cho bạn lựa chọn: bạn dạng minified cùng phiên bản thường xuyên. quý khách hàng rất có thể download phiên bạn dạng làm sao nhưng bạn muốn. Theo tôi thì chúng ta yêu cầu tải về bản minified bởi vì dung lượng nhỏ hơn, và bọn họ cũng ko quan trọng phải đổi khác thỏng viện của mình.

Ngoài tlỗi viện require.js (vào thời điểm này phiên bản mới nhất là 2.2.0), thì RequireJS còn cung cấp một luật để về tối ưu hóa code JavaScript là r.js, mặc dù, tạm thời chúng ta cũng có thể bỏ qua nó.

Các hàm của RequireJS

RequireJS hỗ trợ nhì hàm tương tứng cùng với nhị hàm vào API của AMD sẽ là define và requirejs. Thực ra, rất nhiều phiên phiên bản trước đó hàm requirejs có tên là require (kiểu như cùng với API), tuy thế nó đã được thay tên trong những phiên phiên bản vừa mới đây.

Chúng ta đã khám phá cụ thể về đều hàm này trải qua ví dụ tại phần tiếp theo.

Sử dụng RequireJS nhằm module hóa

Với phần đa hiểu biết cơ phiên bản về AMD với RequireJS, hiện thời, bọn họ sẽ thực hành áp dụng bọn chúng trong một ví dụ thực tế.

Giải mê thích qua 1 chút ít về cấu tạo thỏng mục và những module cần thiết. Trước hết, đấy là một ví dụ phải tôi nhất thời áp dụng một file HTML tĩnh. Trong trang HTML này, tôi bao gồm kiến thiết một navbar với với hi vọng nó chuyển động được cho tất cả desktop và điện thoại thông minh, tôi đã dùng JavaScript nhằm xử lý collapse nó Lúc hiện trên điện thoại cảm ứng.

Bên cạnh đó, tôi ý muốn rất có thể một nút "Baông chồng lớn top" nổi làm việc khoanh vùng cuối screen Lúc người dùng cuộn trang. Tuy nhiên, nút này chưa hẳn thời điểm nào thì cũng hiển thị, tôi mong mỏi nó chỉ được hiển thị Khi trang dài thêm hơn nữa 2 lần độ cao của screen mà lại thôi. ví dụ như này tôi thấy hơi thực tiễn, họ hay load JavaScript như là nhau mang lại tất cả các trang cơ mà có những yếu tắc chỉ chạy trên một vài ba trang nhưng thôi.

Với 2 hưởng thụ bên trên, tôi đang viết 2 module JavaScript, với tổ chức cấu tạo thỏng mục nlỗi sau:

project-directory├── index.html└── assets ├── images ├── js │ ├── lib │ │ └── require.js │ ├── mobile-menu.js │ ├── scroll-top.js │ └── main.js └── cssTại phía trên, bọn họ tổ chức triển khai nlỗi sau:

Tất cả các module hồ hết được viết ngơi nghỉ tlỗi mục assets/js. quý khách hàng rất có thể gửi nó vào thư mục con (modules) chẳng hạn đến dễ quản lý.Các thư viện JavaScript đã lưu trong tlỗi mục assets/js/lib. Tại phía trên chúng ta lưu thỏng viện require.js. Bên cạnh đó, tôi đang sử dụng cả jQuery tuy vậy từ bỏ CDN đề nghị ko đề nghị giữ vào đó.Module chính của ứng dụng là assets/js/main.js.

Với việc áp dụng RequirejS cùng module hóa, chúng ta chỉ cần load JavaScript vào file HTML đơn giản nhỏng sau:

khi thỏng câu hỏi RequireJS được load kết thúc, nó vẫn search kiếm trực thuộc tính data-main, trong trường hợp của chúng ta chính là assets/js/main.js. RequireJS đã load tệp tin JavaScript bên trên một bí quyết ko đồng hóa, và tệp tin này trở thành entry point của áp dụng của bọn họ.

Bên trong file main.js

RequireJS áp dụng một đối tượng để cấu hình những module cùng nguyên tố phụ thuộc cần phải được làm chủ bởi framework. Có các phương pháp để bóc tách biệt config và vận dụng, mặc dù chúng ta có thể viết thông số kỹ thuật này tức thì vào file main.js nlỗi sau:

requirejs.config( paths: "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min", "mobile-menu": "./mobile-menu", "scroll-top": "./scroll-top" );Ở trên, bọn họ thông số kỹ thuật băng thông của những module. lấy ví dụ như của họ còn tương đối dễ dàng buộc phải đang có ít nguyên tố phụ thuộc. Với đều ứng dụng tinh vi rộng, bọn họ bắt buộc thêm config shyên ổn. lấy ví dụ như bọn họ hy vọng áp dụng jQuery.inview (dựa vào vào jQuery) thì chúng phải cấu hình shyên như thế này:

requirejs.config( shim: "jquery": <>, "jquery.inview": <"jquery"> , ...);Sau lúc thông số kỹ thuật băng thông rồi, chúng ta buộc phải load những module này. Việc load module thực chất ko khó khăn. Chúng ta có thể thuận tiện load các module mà bọn họ phải.

Xem thêm: Tìm Hiểu Về Tha Thu Là Gì Và Trào Lưu Tha Thu Bắt Nguồn Từ Đâu?

// mobile-thực đơn phải load mang đến toàn bộ những trangvar mods = <"mobile-menu">;function getPageHeight() // hàm lấy độ cao thực của trang var body toàn thân = document.body; var html = document.documentElement; return Math.max(body.scrollHeight, body toàn thân.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);if (getPageHeight() > window.innerHeight * 2) // chỉ load scroll-top mang lại trang bao gồm chiều cao đầy đủ to mods.push("scroll-top");requirejs(mods);

Viết các module

File main.js chỉ đơn giản và dễ dàng là thông số kỹ thuật cùng load những module quan trọng. Công bài toán còn sót lại của bọn họ là code cho các module này.

Module mobile-menu vẫn nhỏng sau (tôi đã học ES2015 đề nghị code này mong mỏi chạy được cần transpile về ES5):

define(<"jquery">, function($) { class MobileMenuExport { constructor(menu) this.thực đơn = $(menu); this.init(); init() { this.thực đơn.addClass("mobile-navigation"); this.button = $("