Module pattern trong plain JavaScript
Javascript
312
module
3
Pattern
3
White

Đinh Văn Cảnh viết ngày 04/03/2018

Trong plain JavaScript, như đã biết là nó không hề có khái niệm module. Tuy nhiên nhờ có cơ chế closure mà chúng ta có thể thực thi được module pattern.

Ví dụ:

function counter(initValue) {
    var currentValue = initValue;

    function increase(change) {
        currentValue += change;
    }

    function descrease(change) {
        currentValue -= change;
    }

    function getCurrentValue() {
        return currentValue;
    }

    return {
        increase: increase,
        descrease: descrease,
        getCurrentValue: getCurrentValue
    };
}

var c = counter(10);
console.log(c.getCurrentValue()); // 10
c.increase(50);
console.log(c.getCurrentValue()); // 60
c.descrease(20);
console.log(c.getCurrentValue()); // 40

Module phải đảm báo tính đóng gói, do đó chúng ta đã khai báo một biến local currentValue bên trong hàm counter. Biến local này chỉ được truy cập bởi các hàm (cũng chính là các closure) increase, descreasegetCurrentValue nhưng không thể được truy cập từ bên ngoài. Do đó module đã ẩn đi thông tin mà nó không muốn bên ngoài truy cập vào và chỉ cung cấp các public API để truy cập vào các thông tin đó.

Để chỉ có duy nhất một instance counter, khi đó chúng ta sử dụng Immediately Invoked Function Expression (IIFE) như sau:

var counter = (function() {
    var currentValue = 0;

    function initializeValue(initValue) {
        currentValue = initValue;
    }

    function getCurrentValue() {
        return currentValue;
    }

    function increase(change) {
        currentValue += change;
    }

    function descrease(change) {
        currentValue -= change;
    }

    return {
        initializeValue: initializeValue,
        getCurrentValue: getCurrentValue,
        increase: increase,
        descrease: descrease
    };
})();

counter.initializeValue(10);
console.log(counter.getCurrentValue()); // 10
counter.increase(50);
console.log(counter.getCurrentValue()); // 60
counter.descrease(20);
console.log(counter.getCurrentValue()); // 40

Đây cũng chính là Singleton pattern.

Đọc thêm

[1] http://javascriptissexy.com/understand-javascript-closures-with-ease/
[2] https://javascript.info/closure
[3] https://www.pluralsight.com/guides/front-end-javascript/javascript-closures

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Đinh Văn Cảnh

6 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
11 0
Prototype là khái niệm cốt lõi trong JavaScript và là cơ chế quan trọng trong việc thực thi mô hình OOP trong JavaScript (nhưng không thực sự hoàn ...
Đinh Văn Cảnh viết gần 3 năm trước
11 0
White
2 0
Trong quá trình cài đặt các tool phục vụ cho việc lập trình trên Ubuntu, hẳn các bạn đã từng phải vật vã với đủ thứ config, chẳng hạn như khi cài J...
Đinh Văn Cảnh viết hơn 2 năm trước
2 0
White
2 0
Web crawling là gì? _Web crawling_ là quá trình tự động trích xuất các thông tin từ các trang web và lưu trữ nó dưới một định dạng phù hợp. Chương...
Đinh Văn Cảnh viết hơn 2 năm trước
2 0
Bài viết liên quan
White
11 1
Chức năng pattern matching trong C++ thấy nói sẽ kill (Link). Cách viết C++ do vậy sẽ thay đổi tương đối. Tự nhiên tôi thấy phải nhìn lại visitor ...
cpplover viết 5 năm trước
11 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!