Mẫu thiết kế module trong JavaScript

---

Các module JavaScript là các mẫu thiết kế được sử dụng phổ biến nhất để giữ cho các đoạn mã cụ thể độc lập với các thành phần khác. Điều này cung cấp khớp nối lỏng lẻo để hỗ trợ mã có cấu trúc tốt.

Đối với những người đã quen thuộc với ngôn ngữ hướng đối tượng, module là các “lớp” JavaScript. Một trong những ưu điểm của các lớp là tính đóng gói - bảo vệ các trạng thái và hành vi khỏi bị truy cập từ các lớp khác. Mẫu module cho phép các mức truy cập và riêng tư (cộng với các cấp độ truy cập được bảo vệ và quyền ít được biết đến hơn).

Các module phải là Biểu thức-hàm-gọi ngay (IIFE) để cho phép các phạm vi riêng - nghĩa là, một bao đóng bảo vệ các biến và phương thức (tuy nhiên, nó sẽ trả về một đối tượng thay vì một hàm). Đây là những gì nó trông giống như:

(function() {

    // declare private variables and/or functions

    return {
        // declare public variables and/or functions
    }

})();

Ở đây ta khởi tạo các biến private và / hoặc các hàm trước khi trả về đối tượng mà ta muốn trả về. Mã bên ngoài vùng đóng của ta không thể truy cập các biến riêng tư này vì nó không nằm trong cùng phạm vi. Hãy thực hiện một cách cụ thể hơn:

var HTMLChanger = (function() {
    var contents = 'contents'

    var changeHTML = function() {
    var element = document.getElementById('attribute-to-change');
    element.innerHTML = contents;
    }

    return {
    callChangeHTML: function() {
        changeHTML();
        console.log(contents);
    }
    };

})();

HTMLChanger.callChangeHTML();       // Outputs: 'contents'
console.log(HTMLChanger.contents);  // undefined

Lưu ý callChangeHTML liên kết với đối tượng trả về và có thể được tham chiếu trong không gian tên HTMLChanger . Tuy nhiên, khi bên ngoài module , nội dung không thể được tham chiếu.

Tiết lộ mẫu module

Một biến thể của module được gọi là Mô-đun hiển thị . Mục đích là để duy trì tính đóng gói và tiết lộ các biến và phương thức nhất định được trả về trong một đối tượng theo nghĩa đen. Việc triển khai trực tiếp trông như thế này:

var Exposer = (function() {
    var privateVariable = 10;

    var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
    }

    var methodToExpose = function() {
    console.log('This is a method I want to expose!');
    }

    var otherMethodIWantToExpose = function() {
    privateMethod();
    }

    return {
        first: methodToExpose,
        second: otherMethodIWantToExpose
    };
})();

Exposer.first();        // Output: This is a method I want to expose!
Exposer.second();       // Output: Inside a private method!
Exposer.methodToExpose; // undefined

Mặc dù điều này trông gọn gàng hơn nhiều, nhưng một nhược điểm rõ ràng là không thể tham chiếu đến các phương thức private. Điều này có thể đặt ra các thách thức kiểm tra đơn vị. Tương tự, các hành vi công khai là không thể overrides .

---

---

Các tin liên quan

Mẫu thiết kế trình quan sát trong JavaScript
2020-09-21
Mẫu thiết kế Singleton trong JavaScript
2020-09-21
Mẫu thiết kế nguyên mẫu trong JavaScript
2020-09-21
Lời hứa của JavaScript dành cho người giả
2020-09-15
Sao chép các đối tượng trong JavaScript
2020-09-15
Cách sử dụng API tìm nạp JavaScript để lấy dữ liệu
2020-09-15
Cách mã hóa và giải mã chuỗi với Base64 trong JavaScript
2020-09-15
Toán tử đơn nguyên JavaScript: Đơn giản và hữu ích
2020-09-15
Hiểu Hoisting trong JavaScript
2020-09-15
5 Mẹo để Viết Điều kiện Tốt hơn trong JavaScript
2020-09-15