Chào mọi người! Hôm nay chúng ta sẽ cùng nhau tìm hiểu về một phần khá khó trong Magento 2. Đó là require js. Trong bài viết này chúng ta sẽ tìm hiểu cơ bản về require js trong Magento 2 là gì? Cách sử dụng chúng như thế nào cũng như là ưu, nhược điểm của require js.
Contents
1. Require JS trong Magento 2 là gì?
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
Require JS là một thư viện cho phép chúng ta có thể module hóa code Javascript. Require JS triển khai theo phương thức AMD API (Asynchronous Module Definition) có thể load các module và load các phụ thuộc của nó không đồng bộ.
Require JS có 2 phương thứ require và define:
– define: dùng để định nghĩa module.
– require: dùng để load module và các thành phần phụ thuộc.
Ví dụ về require:
|
1
2
3
4
5
|
<script>
require([“ViMagento_LearnRequireJS/js/customrequire”], function (custom){
alert(custom.getText());
});
</script>
|
Hàm require yêu cầu 2 đối số, thứ nhất là 1 mảng các dependencies cần sử dụng (ví dụ bạn cần sử dụng jquery thì hãy thêm jquery vào mảng này). Sau đó require JS sẽ truyền các module object vào đối số thứ 2, bạn có thể tự đặt tên cho đối số thứ 2 này theo thứ tự của các dependencies đã truyền vào.
Ví dụ về define:
|
1
2
3
4
5
6
7
8
|
define([], function() {
var custom = {};
custom.getText = function ()
{
return ‘ViMagento Hello World’;
}
return custom;
});
|
Hàm define cũng tương tự như require. Đối số thứ nhất là 1 mảng các dependencies mà module cần. Đối số thứ 2 sẽ return về một module object. Require JS không áp đặt bất cứ giới hạn nào về kiểu dữ liệu trả về.
Mặc định require JS sẽ biến tên module thành đường dẫn đến file. Vì thế, nếu tên module của bạn là ViMagento_LearnRequireJS/js/customrequire thì requireJS sẽ thêm .js vào sau tên module và chúng ta sẽ có đường dẫn là ViMagento_LearnRequireJS/js/customrequire.js
2. Lợi ích và nhược điểm của Require JS trong Magento 2.
- Lợi ích chính của require JS trong Magento 2 là chúng ta không cần phải lo lắng về cách thức mà các tệp js sẽ được tải. Thay vào đó, chúng ta chỉ cần xác định các module cần thiết và require js sẽ làm tất cả các công việc.
Require js cũng cho phép tách các mã js thành các module độc lập và chúng chỉ được load khi cần thiết. - Nhược điểm lớn nhất của requireJS là cần phải bọc mã JS trong các hàm define và require. Điều này đặc biệt có thể trở thành một trở ngại trong quá trình kế thừa module.
Một nhược điểm khác của phương pháp AMD đối với tổ chức tệp JavaScript là một số lượng lớn Yêu cầu HTTP, vì mỗi module được tải riêng biệt.
3. Làm một ví dụ về require js trong Magento 2
Mình sẽ tạo một module ViMagento_LearnRequireJS. Trong đó mình sẽ tạo controller ở frontend và một layout tương ứng.
app/code/ViMagento/LearnRequireJS/view/frontend/web/js/customrequire.js
|
1
2
3
4
5
6
7
8
|
define([], function() {
var custom = {};
custom.getText = function ()
{
return ‘ViMagento Hello World’;
}
return custom;
});
|
app/code/ViMagento/LearnRequireJS/view/frontend/web/templates/learn.phtml
|
1
2
3
4
5
|
<script>
require([“ViMagento_LearnRequireJS/js/customrequire”], function (custom){
alert(custom.getText());
});
</script>
|
Ở trên thì mình đã tạo một file js và sử dụng hàm define để định nghĩa một module. Ở trong file phtml thì mình sử dụng hàm require để có thể gọi và sử dụng tài nguyên của module customrequire đã định nghĩa.
Và đây là kết quả khi mình chạy controller có chứa templates trên:
Link source code: https://github.com/vimagento/require-js