Thứ hai, 21/09/2020 | 00:00 GMT+7

Mẫu thiết kế module trong JavaScript


Một phần của Loạt bài: Các mẫu thiết kế JavaScript

Mọi nhà phát triển đều cố gắng viết mã có thể bảo trì, đọc được và có thể tái sử dụng. Cấu trúc mã trở nên quan trọng hơn khi các ứng dụng trở nên lớn hơn. Các mẫu thiết kế tỏ ra rất quan trọng để giải quyết thách thức này - cung cấp một cấu trúc tổ chức cho các vấn đề chung trong một hoàn cảnh cụ thể.

Mẫu thiết kế bên dưới chỉ là một trong nhiều mẫu hữu ích có thể giúp bạn thăng cấp với quyền là nhà phát triển JavaScript. Để biết toàn bộ, hãy xemMẫu thiết kế 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 .


Tags:

Các tin trước

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