Tìm hiểu về Module trong Javascript

1
92

Có thể đâu đó bạn đã nghe nói tớ khái niệm Module trong Javascript rồi đúng không? Thực ra module là khái niệm được sử dụng trong hầu hết các ngôn ngữ lập trình. Đây là cách để thêm một chức năng vào mã nguồn dự án một cách dễ dàng. Các modules là nơi các nhà phát triển tạo thư viện, mã nguồn và tái sử dụng nó ở nhiều nơi khác nhau.

Nếu bạn đang tìm hiểu về Javascript, bạn có thể tham khảo khóa học Javascript cơ bản miễn phí của LTKK.

Nếu bạn đã từng học lập trình Javascript thì hẳn bạn sẽ thấy, mặc định javascript không có khái niệm module như vậy. Thông thường bạn sẽ phải sử dụng thẻ <script> để tải các thư viện JS vào ứng dụng.

Mãi về sau này, khái niệm module mới bắt đầu xuất hiện trong Javascript.

Module trong Javascript
Module trong Javascript

Ví dụ một vài kiểu module trong JS:

  • Trong Node.js, bạn có thể sử dụng từ khóa exports and require để tạo và dùng module.
  • Asynchronous Module Definition (AMD)
  • ES Modules

Bài viết này, chúng ta sẽ tìm hiểu kỹ về Module.

#Lý do dùng Module trong Javascript

Khi hiểu bản chất một ứng dụng hoạt động, tất cả những gì mà người lập trình viên làm là quản lý các variables (biến). Họ gán giá trị cho biến, cập nhật giá trị cho nó, kết hợp các biến với nhau… Nhưng khi số lượng biến tăng lên cùng với kích thước ứng dụng, việc quản lý và maintaince trở nên khó khăn hơn.

Giải pháp cho vấn đề này là khoanh vùng và quản lý các biến một cách độc lập với nhau. Cách mà Javascript xử lý vấn đề này là scope của biến. Do scope của biến mà một hàm không thể truy cập vào biến của hàm khác.

Nhưng điều này lại phát sinh vấn đề: Làm sao có thể chia sẻ giá trị các biến giữa các hàm với nhau!!!

Để khắc phục điều này, một cách làm đơn giản nhất là khai báo biến đó theo phạm vi toàn ứng dụng (global). Với cách tiếp cận này, bạn lại gặp phải một số vấn đề như:

  • Thẻ <script> phải đúng thứ tự và đảm bảo không ai có thể thay đổi được thứ tự đó.
  • Bất kỳ tính năng nào cũng có thể truy cập vào biến global đó. Điều này cho phép mã độc có thể truy cập, thậm chí thay đổi biến global. Một vấn đề security nghiêm trọng.

Và cuối cùng, Module ra đời để khắp phục tất cả những nhược điểm trên.

#Làm thế nào mà Module làm mã nguồn tốt hơn

Module cho phép bạn tổ chức và quản lý các biến và tính năng ứng dụng tốt hơn.

Thông thường, các biến và hàm có cùng một chức năng có thể xếp vào một module. Điều này sẽ đặt các biến vào phạm vi module (module scope). Phạm vi module có thể chia sẻ các biến giữa hàm trong cùng một module.

Module trong JavascriptVới cách làm này, cho phép các biến trong module có thể chia sẻ với các module khác. Nhà phát triển module có thể xác định biến, hàm, hay lớp (class) nào mà bên ngoài có thể truy xuất được. Để làm điều này, người ta dùng từ khóa export.

Khi bạn sử dụng import/export các biến, hàm… bạn có thể dễ dàng chia tách mã nguồn thành các đoạn code có thể chạy độc lập. Sau này, bạn có thể xây dựng ứng dụng bằng cách tái sử dụng các module, tương tự như việc xây nhà từ các viên gạch vậy.

Lợi ích của module là rất rõ ràng. Trong Javascript, có nhiều cách tạo và sử dụng module. Mời bạn đọc tiếp.

#Một số cách tạo và sử dụng Module trong JS

1. CommonJS

Trong NodeJS, bạn có thể tạo và sử dụng module bằng từ khóa: module.exports và require

Tuy nhiên, không giống như Node.js, trình duyệt không hỗ trợ cách làm này. Hơn nữa, cách làm này sẽ tải các module đồng bộ, không phải là giải pháp tối ưu trên trình duyệt. Bạn có thể sử dụng webpack hoặc Browserify để khắc phục vấn đề này.

2. Asynchronous Module Definition (AMD)

AMD được sinh ra từ các nhà phát triển không thích cách tiếp cận như NodeJS. Sự khác biệt chính giữa AMD và commonJS là AMD tải các module bất đồng bộ. Điều này rất phổ biến trong các trình duyệt, vì thời gian khởi động ứng dụng là yếu tố then chốt làm tăng trải nghiệm người dùng.

3. ES Modules

Qua hai phần trên, bạn có thể thấy Javascript thiếu một chuẩn để định nghĩa module. Do đó, một tiêu chuẩn được đề xuất trong phiên bản ES6.

Kết quả là cho ra đời chuẩn để tạo và sử dụng module, tương thích với cả hai chế độ tải module đồng bộ và bất đồng bộ.

Các ES Module tương thích với hầu hết các trình duyệt hiện đại.

Sau đây là một ví dụ cho các ES Modules:

JavaScript

HTML

Như bạn thấy ở trên, trong HTML, bạn cần chỉ định kiểu script là module qua thuộc tính type.

Mình hi vọng qua bài viết này bạn sẽ hiểu rõ hơn về Module trong Javascript và lý do tại sao nên sử dụng nó. Nếu có bất kỳ thắc mắc gì, bạn đừng ngần ngại để lại bình luận bên dưới.

Bài viết được dịch lại từ nguồn: Understanding ES Modules in JavaScript

Subscribe
Notify of
guest
1 Bình luận
Inline Feedbacks
View all comments