Bài viết được dịch từ Javascript Modules: A Beginner's Guide của tác giả Preethi Kasireddy.
Nếu bạn là người mới học Javascript, những từ như "module bundlers với module loaders", "Webpack với Browserify" và "AMD với CommonJS" có thể nhanh chóng trở nên choáng ngợp.
Hệ thống module của Javascript có thể hơi đáng sợ, nhưng hiểu được nó là một điều quan trọng đối với lập trình viên web.
Trong bài này, tôi sẽ giải thích những từ trên bằng tiếng Anh thuần [và kèm theo một chút code ví dụ]. Tôi hy vọng bạn sẽ thấy nó hữu ích.
Chú ý: để đơn giản, bài viết này sẽ được chia thành 2 phần: Phần 1 sẽ chủ yếu giải thích module là gì và tại sao chúng ta dùng chúng. Phần 2 [được đăng vào tuần sau] sẽ tìm hiểu xem việc đóng gói các module là gì và các cách khác nhau để làm việc đó.
Phần 1: Ai đó có thể làm ơn giải thích module là gì được không?
Các tác giả giỏi chia các cuốn sách của họ thành chương và mục, các lập trình viên giỏi chia chương trình của họ thành các module.
Giống như một chương sách, các module chỉ là tập hợp các từ [hoặc code, tùy từng trường hợp].
Các module tốt, tuy nhiên, lại có tính tự đóng gói cao với những tính năng riêng biệt, cho phép chúng có thể bị xáo trộn, xóa bỏ, hay thêm vào nếu cần thiết mà không làm hỏng hệ thống.
Tại sao lại sử dụng module
Có rất nhiều lợi ích khi sử dụng module trong codebase dài dòng và phụ thuộc lẫn nhau. Những lợi ích quan trọng nhất, theo ý kiến của tôi, là:
- Dễ bảo trì: Theo định nghĩa, một module tự đóng gói. Một module được thiết kế tốt nhắm tới việc làm giảm sự phụ thuộc của các phần trong codebase càng nhiều càng tốt để nó có thể phát triển một cách độc lập. Cập nhật một module dễ dàng hơn nhiều khi module đó liên kết lỏng lẻo với các phần code khác.
Trờ lại với ví dụ về cuốn sách của chúng ta, nếu bạn muốn cập nhật một chương trong cuốn sách, sẽ thật là ác mộng nếu một thay đổi nhỏ ở một chương khiến bạn phải chỉnh sửa tất cả các chương còn lại. Thay vào đó, bạn sẽ muốn viết mỗi chương theo cách mà những cải thiện có thể được thực hiện mà không ảnh hưởng đến các chương khác.
- Phân chia không gian tên: Trong Javascript, các biến bên ngoài phạm vi của một hàm cấp cao nhất là toàn cục [nghĩa là mọi người đều có thể truy cập đến nó]. Vì vậy, việc bị "ô nhiễm không gian tên", khi các đoạn code hoàn toàn không liên quan đến nhau chia sẻ chung các biến toàn cục, là thường thấy.
Chia sẻ các biến toàn cục giữa các đoạn code không liên quan là một việc rất tệ trong quá trình phát triển.
Chúng ta sẽ thấy ở phấn sau của bài viết này, các module cho phép chúng ta tránh việc ô nhiễm không gian tên bằng việc tạo ra các không gian riêng cho các biến của mình.
- Tính tái sử dụng: Hãy thành thật: chúng ta đều sao chép code mình viết trước đó đến một dự án mới lúc này hay lúc khác. Ví dụ, hãy tưởng tượng bạn sao chép một vài hàm tiện ích bạn viết ở dự án trước cho dự án hiện tại của bạn.
Điều đó hoàn toàn tốt, nhưng nếu bạn không tìm được một cách tốt hơn để viết các phần code đó bạn sẽ phải quay lại và cập nhật bất cứ chỗ nào bạn viết chúng.
Điều đó chăc chắn cực kỳ lãng phí thời gian. Sẽ không dễ dàng hơn sao nếu có một module mà chúng ta có thể dùng đi dùng lại?
Làm thế nào bạn có thể tích hợp các module?
Có rất nhiều cách để tích hợp các module vào chương trình của bạn. Hãy xem một vài cách trong số chúng:
Mẫu module
Mẫu module được sử dụng để bắt chước khái niệm class [do bản thân Javascript không hỗ trợ class] để chúng ta có thể lưu trữ cả các phương thức và biến public và private trong một đối tượng độc lập - tương tự cách class được sử dụng trong các ngôn ngữ lập trình khác như Java hay Python. Điều đó cho phép chúng ta tạo ra một API public cho các phương thức chúng ta muốn để lộ ra ngoài, trong khi vẫn đóng gói các biến và phương thức private trong một closure scope.
Có một vài cách để đạt được mẫu module. Trong ví dụ đầu tiên này, tôi sẽ dùng một closure vô danh. Điều đó giúp chúng ta đạt được mục đích của mình bằng cách đặt tất cả code của mình vào một hàm vô danh. [Nhớ rằng: trong Javascript, dùng hàm là cách duy nhất để tạo ra scope mới.]
Ví dụ 1: Closure vô danh
[function [] {
// We keep these variables private inside this closure scope
var myGrades = [93, 95, 88, 0, 55, 91];
var average = function[] {
var total = myGrades.reduce[function[accumulator, item] {
return accumulator + item}, 0];
return 'Your average grade is ' + total / myGrades.length + '.';
}
var failing = function[]{
var failingGrades = myGrades.filter[function[item] {
return item