Requirejs là gì

*
)

Trong quá trình trở nên tân tiến Web, chắc chắn rằng các bạn sẽ buộc phải thao tác làm việc với JavaScript. Theo thời hạn, cùng với việc trở nên tân tiến của dự án công trình, code JavaScript cũng càng ngày càng phức hợp. Bài viết này sẽ trình diễn một thư viện để giúp chúng ta module hóa code JavaScript để giúp nó dễ duy trì hơn, đó là thực hiện AMD (Asynchronous Module Definition) với RequireJS.

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

Tại sao buộc phải module hóa JavaScript

Module rất có thể hiểu đơn giản và dễ dàng là 1 phần của code thiết lập một tác dụng như thế nào kia. Phần code này sẽ được lưu trữ cá biệt với những phần code khác. Đôi khi, họ lưu giữ những module thành những tệp tin riêng biệt. Module hóa dễ dàng và đơn giản là vấn đề phân chia code thành những module. Vậy tại sao yêu cầu có tác dụng nlỗi vậy?

Nếu không phân tách module, code JavaScript trở nên tinh vi với hàng nghìn nghìn cái code. Mà với phần nhiều file to điều này, bạn cần là 1 trong những dị nhân new có thể hiểu với gọi chúng. Để code dễ đọc hơn, cùng dễ gia hạn, biến hóa hơn, chúng ta đề xuất phân tách chúng thành những thành phần nhỏ dại hơn. Mỗi phần gồm có bản lĩnh đơn nhất, Khi đề nghị thay thế sửa chữa phần như thế nào chỉ việc quyên tâm cho đúng phần chính là được.

Việc module hóa là một việc hết sức đỗi tự nhiên và thoải mái như thế, nhưng lại JavaScript có vẻ như lại chưa tồn tại lý lẽ giúp họ thao tác làm việc đó. Hiện giờ ECMAScript năm ngoái (ES2015 hoặc có thể điện thoại tư vấn là ES6) hoàn toàn có thể xử lý vụ việc này bằng phương pháp thêm quan niệm module mang đến ngữ điệu. Nhưng các trình phê duyệt vẫn không hoàn toàn hỗ trợ ES2015 nên phía trên vẫn là cthị trấn của tương lai.

Có thể ai đang thắc mắc rằng, chẳng buộc phải từng file .js đó là một module rồi sao? Đương nhiên, chúng ta có thể phân tách code thành những file cùng load bọn chúng bằng thẻ script. Nhưng giải pháp làm cho này chưa hoàn toàn được xem là module hóa. Có không hề ít vụ việc tương quan mang đến biện pháp có tác dụng này.

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

jQuery yêu cầu được load thứ nhất vì chưng tất cả các tệp tin khác rất nhiều cần đến nó.Những thành phần nằm trong app/modules sẽ được sử dụng bởi vì các nhân tố chính của ứng dụng, đề xuất chúng cần phải được load trước.Tiếp theo họ 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 file theo như đúng máy tự là khôn cùng quan trọng đặc biệt vày chúng dựa vào cho nhau. Dường như, để tránh sự tác động của những thẻ script tới quá trình render trang, họ thường xuyên đặt chúng sống footer.

Cách làm này không được tác dụng cho lắm bởi họ đề nghị từ bỏ bản thân thống trị những module cùng load bọn chúng đến đúng thiết bị từ thì mới chạy được. Dường như các thẻ script còn thưởng thức thêm các request nhằm cài những tệp tin này, và trình để mắt đang xong bài toán render cho đến Lúc các tệp tin này được download với thực thi ngừng.

Việc này thuở đầu hoàn toàn có thể không phải là vụ việc, tuy vậy lúc code phức hợp dần dần lên, các tệp tin tăng ngày một nhiều lên với họ ngày càng cạnh tranh thống trị những thẻ script rộng. Kể cả họ sử dụng các phương tiện minify code thì chúng ta vẫn đề nghị gộp chúng theo như đúng vật dụng từ.

Trong khi còn một vấn đề khác nữa. Các trang của một vận dụng hay được sử dụng chung layout cùng nhau, do đó đã load JavaScript kiểu như nhau. Tuy nhiên, chưa phải code JavaScript nào thì cũng nên mang đến toàn bộ những trang. Có rất đa số code chỉ cần cho 1 vài ba trang nhất quyết mà thôi.

lúc kia, họ phải làm một bài toán, đó là đặt class tốt id cho 1 thành phần HTML như thế nào kia, rồi vào code JavaScript thì kiểm soát xem trang gồm thành phần kia hay không. Nếu có thì chạy, ko thì thôi. Việc load hoàng loạt JavaScript thừa điều này thiệt là tiêu tốn lãng phí đường truyền.

Những thời điểm điều này, tôi khôn xiết mong muốn JavaScript bao gồm một chế độ thứ hạng nlỗi import của Python thả, nhằm bọn họ chỉ load số đông gì phải cho trang mà thôi.

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

Cách module hóa JavaScript

Mặc cho dù JavaScript ko hỗ trợ các module, mà lại xã hội những developer vẫn cố gắng tìm ra cách để làm việc này. Sau một thời hạn trở nên tân tiến, thì bây giờ gồm một trong những cách tiến hành module hóa nhỏng sau:

The Module pattern

Trong hầu hết phương pháp bên trên, module pattern không trải nghiệm bất cứ một công cụ tốt thư viện nào, nó rất có thể hoạt động ngơi nghỉ gần như môi trường xung quanh JavaScript. CommonJS hướng đến phương châm là JavaScript chạy ngơi nghỉ server-side. AMD chính là thủ tục khôn xiết phổ biến cùng với các ứng dụng Web, và nó cũng chính là cách thức nhưng RequireJS thực hiện.

Nói qua một chút về module pattern. cũng có thể các bạn đang thực hiện nó rồi mà lại không tuyệt biết, độc 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 sút thiểu đầy đủ xung bất chợt có thể xẩy ra Lúc tư tưởng tên hàm và biến. Nó dễ dàng chỉ nên code được đặt vào một hàm vô danh được thực thi ngay. Hàm này vẫn trả tác dụng là một trong đối tượng người dùng và đối tượng người sử dụng này sẽ được áp dụng nlỗi một module. Mọi code JavaScript để tạo nên đối tượng người dùng đó trọn vẹn được đóng gói vào hàm vô danh. Hãy liếc qua ví dụ sau, bạn sẽ thấy nó hết sức rất gần gũi.

var loginModule = (function() "use strict"; var module = ; var privateVariable = 42; var privateLogin = function(userNameValue, userPasswordValue) if (userNameValue === "admin" &và 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 đây chỉ là một trong ví dụ đơn giản dễ dàng, module pattern có thể được vận dụng phức tạp rộng nhiều, bởi Việc áp dụng các đối tượng người tiêu dùng global xuất xắc namespace.

Module pattern hoạt động giỏi cùng với rất nhiều vận dụng nhỏ dại. Nó vô cùng thuận tiện để thiết lập và không nên thỏng viện như thế nào cả. Tuy nhiên, lúc áp dụng phức hợp hơn, cách làm này không hề cân xứng nữa. khi làm việc cùng với vận dụng có khá nhiều module, bạn sẽ cần có tác dụng các Việc chán nản như tìm tra đối tượng người sử dụng gồm trường tồn nghỉ ngơi global hay không, làm chủ namespace thật cảnh giác, với vì chưng ai đang tạo nên những đối tượng người tiêu dùng, bạn cần phải Để ý đến nhằm trực rỡ mọi xung bỗng nhiên lúc để thương hiệu.

ngoài ra, module pattern cần yếu giải quyết và xử lý được đa số vụ việc nhưng họ đang nói tới ở trong phần trước. Vì cố chúng ta đề nghị đến AMD với RequireJS.

Asynchronous Module Definition (AMD)

AMD là 1 trong những phương thơm thực khái niệm module nhưng module và những nhân tố phụ thuộc của nó rất có thể được load ko đồng hóa. Ban đầu, AMD là 1 trong những bản nháp sệt tả kỹ thuật của CommonJS, dẫu vậy nó không sở hữu và nhận được sự ủng hộ nên sự cách tân và phát triển tiếp tiếp đến của nó được gửi thanh lịch amdjs GitHub page.

AMD API bao gồm hàm sau:

define nhằm tư tưởng module.require để load module với các yếu tố nhờ vào.

Xem thêm: Hộ Tịch Tiếng Anh Là Gì - Luật Hộ Tịch Tiếng Anh: Law On Civil Status

Hàm define yêu cầu 3 tđắm say số, đó là module ID (hoàn toàn có thể không có), một xâu các nguyên tố phụ thuộc vào và một hàm callbaông xã sẽ được Call khi những thành phần được load.

Một khai báo đơn giản và dễ dàng mang đến hàm define nhỏng bên dưới đây:

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

Hàm require yêu cầu 2 tsi số:

Một xâu các module yêu cầu load.Một hàm callbachồng được thực hiện sau khi những module này load xong. Các module ở tham số thức độc nhất vô nhị sẽ được truyền vào hàm này như là tđam mê số theo như đúng sản phẩm công nghệ từ chúng được liệt kê.

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

require(<"main">, function() console.log("module main is loaded"););Dưới đó là đông đảo ưu, điểm yếu của AMD, nếu khách hàng thấy nó tương xứng cùng với bản thân thì rất có thể sử dụng:

Ưu điểm:

API cực kỳ đơn giản dễ dàng, bỏ ra buộc phải 2 hàm require và define.Có tương đối nhiều cách để load khác biệt. Chúng ta vẫn cẩn thận một ví dụ ở phần sau.AMD ko khó khăn nhằm debug.Khi module hóa vận dụng, chúng ta thuận lợi tìm ra phần code như thế nào bị lỗi.Performance: các module được load Lúc phải, cho nên vì vậy vận dụng khi khởi tạo thành khôn xiết thanh thanh.

Nhược điểm:

Danh sách yếu tắc phụ thuộc vào sẽ tương đối nhiều năm lúc ứng dụng trsống bắt buộc phức tạp.

define( <"one", "two", "three", "four", "five", "six">, function(one, two, three, four, five sầu, six) "use strict"; // module"s code omitted );Một lỗi thiếu cẩn trọng của lập trình viên rất có thể khiến cho áp dụng chuyển động không nên. lấy một ví dụ sau, vấn đề danh sách các yếu tố dựa vào với tsi số hàm callbaông chồng không hợp không hẳn lỗi cú pháp với nó sẽ khiến ứng dụng chuyển động theo cách mà lại không có ai hiểu đượ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 moduleESnăm ngoái (ES6) đã được kiến thiết chấp nhận, tuy vậy các trình duyệt chưa hoàn toàn cung ứng nó vừa đủ. Vào thời đặc điểm này, họ vẫn chưa thể tin tưởng nhằm áp dụng hết đầy đủ tính năng mới của chính nó được. Tuy nhiên, hi vọng trong tương lai sát họ vẫn nhanh chóng tiếp cận với nó.

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

export function login(userNameValue, userPasswordValue) return userNameValue + "_" + userNameValue;Từ khóa export chỉ định hàm hoặc đối tượng người dùng sẽ được trích xuất là 1 module. Module này có thể được sử dụng sinh hoạt bất kỳ code JavaScript nào không giống. lấy ví dụ nhỏng chúng ta dùng module main như bên dưới đây:

import login from "./login"var result = login("admin", "password");Với tự khóa import họ gán hàm login() với module login. Việc phân tách module như vậy rất thú vị, hi vọng chúng ta đang nhanh chóng được sử dụng nó một biện pháp rộng rãi.

RequireJS

Theo có mang bên trên Home thì

RequireJS là 1 trong file JavaScript với một module loader. Nó được về tối ưu hóa đến môi trường xung quanh trình xem xét nhưng cũng rất có thể thực hiện trong những môi trường thiên nhiên JavaScript khác, như Rhino hoặc Node. Sử dụng các module loader như RequireJS để giúp đỡ tăng tốc độ cùng quality code của công ty.

Tất nhiên, đó là một có mang bao gồm hơi hướng quảng bá. Chúng ta rất có thể gọi đơn giản dễ dàng RequireJS là 1 trong thỏng viện có thể chấp nhận được bọn họ module hóa code JavaScript theo quy chuẩn của AMD.

Download

Bạn hoàn toàn có thể thuận tiện download RequireJS từ trang download của họ. Có 2 phiên bạn dạng cho chính mình lựa chọn: bản minified cùng bản thường. Bạn rất có thể download phiên phiên bản như thế nào mà lại bạn muốn. Theo tôi thì chúng ta đề nghị tải về bạn dạng minified vày dung tích nhỏ tuổi hơn, và họ cũng ko cần thiết yêu cầu biến hóa thỏng viện của họ.

Ngoài tlỗi viện require.js (vào thời điểm đó phiên bạn dạng mới nhất là 2.2.0), thì RequireJS còn cung ứng một vẻ ngoài để buổi tối ưu hóa code JavaScript là r.js, mặc dù, trong thời điểm tạm thời bạn cũng có thể bỏ qua mất nó.

Các hàm của RequireJS

RequireJS cung ứng nhì hàm tương tứng với hai hàm trong API của AMD sẽ là define và requirejs. Thực ra, số đông phiên bạn dạng trước đây hàm requirejs mang tên là require (tương tự cùng với API), nhưng nó đã có đổi tên trong những phiên bạn dạng vừa mới đây.

Chúng ta đang tò mò cụ thể về hồ hết hàm này trải qua ví dụ tại phần tiếp theo sau.

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

Với phần lớn đọc biết cơ bạn dạng về AMD cùng RequireJS, bây chừ, chúng ta sẽ thực hành áp dụng chúng vào một ví dụ thực tiễn.

Giải say mê sang một chút ít về kết cấu thỏng mục với những module cần thiết. Trước không còn, đấy là một ví dụ yêu cầu tôi tạm bợ thực hiện một tệp tin HTML tĩnh. Trong trang HTML này, tôi bao gồm kiến thiết một navbar và với hi vọng nó hoạt động được cho cả desktop cùng smartphone, tôi đang dùng JavaScript nhằm xử trí collapse nó lúc hiển thị trên Smartphone.

Hình như, tôi mong muốn rất có thể một nút ít "Back khổng lồ top" nổi ở Quanh Vùng cuối màn hình lúc người dùng cuộn trang. Tuy nhiên, nút này chưa hẳn cơ hội nào thì cũng hiển thị, tôi ao ước nó chỉ được hiển thị lúc trang dài ra hơn gấp đôi độ dài của màn hình nhưng mà thôi. Ví dụ này tôi thấy khá thực tế, bọn họ hay load JavaScript tương tự nhau cho tất cả những trang mà lại có những thành phần chỉ điều khiển xe trên một vài trang mà lại thôi.

Với 2 đòi hỏi bên trên, tôi sẽ viết 2 module JavaScript, và tổ chức triển khai cấu trúc 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 └── cssỞ phía trên, chúng ta tổ chức nhỏng sau:

Tất cả những module các được viết sống thỏng mục assets/js. quý khách có thể chuyển chúng nó vào tlỗi mục con (modules) ví dụ điển hình mang đến dễ dàng thống trị.Các thỏng viện JavaScript đã lưu trong thư mục assets/js/lib. Tại đây bọn họ lưu lại thư viện require.js. Hình như, tôi sẽ thực hiện cả jQuery mà lại từ CDoanh Nghiệp bắt buộc không đề nghị giữ vào chỗ này.Module bao gồm của ứng dụng là assets/js/main.js.

Với câu hỏi áp dụng RequirejS cùng module hóa, họ chỉ việc load JavaScript trong file HTML đơn giản dễ dàng nlỗi sau:

khi tlỗi vấn đề RequireJS được load hoàn thành, nó vẫn search kiếm ở trong tính data-main, vào ngôi trường đúng theo của bọn họ sẽ là assets/js/main.js. RequireJS đã load file JavaScript bên trên một bí quyết ko đồng hóa, với tệp tin này biến đổi entry point của áp dụng của chúng ta.

Bên trong tệp tin main.js

RequireJS sử dụng một đối tượng người tiêu dùng nhằm thông số kỹ thuật những module với nguyên tố nhờ vào rất cần phải được cai quản bởi framework. Có nhiều cách để bóc tách biệt config và ứng dụng, mặc dù bạn cũng có thể viết cấu hình này ngay trong tệp tin main.js nhỏng 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, họ thông số kỹ thuật đường truyền của những module. lấy ví dụ như của họ còn khá dễ dàng đề nghị chưa có nhiều yếu tắc phụ thuộc. Với phần đông ứng dụng phức hợp hơn, chúng ta phải thêm config shlặng. lấy ví dụ họ hy vọng sử dụng jQuery.inview (phụ thuộc vào jQuery) thì chúng buộc phải thông số kỹ thuật shim như thế này:

requirejs.config( shim: "jquery": <>, "jquery.inview": <"jquery"> , ...);Sau khi thông số kỹ thuật băng thông rồi, chúng ta nên load các module này. Việc load module thực chất không cạnh tranh. Chúng ta rất có thể dễ dàng load các module nhưng họ yêu cầu.

Xem thêm:

// mobile-menu đề nghị load mang lại tất cả các trangvar mods = <"mobile-menu">;function getPageHeight() // hàm rước độ cao thực của trang var toàn thân = document.body; var html = document.documentElement; return Math.max(toàn thân.scrollHeight, body toàn thân.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);if (getPageHeight() > window.innerHeight * 2) // chỉ load scroll-top mang đến trang tất cả độ cao đủ béo mods.push("scroll-top");requirejs(mods);

Viết các module

File main.js chỉ đơn giản dễ dàng là thông số kỹ thuật cùng load các module cần thiết. Công Việc còn sót lại của bọn họ là code cho các module này.

Module mobile-thực đơn vẫn nhỏng sau (tôi sẽ học ESnăm ngoái yêu cầu code này muốn chạy được phải 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 = $("

Chuyên mục: Tổng Hợp