Module pattern trong plain JavaScript
Javascript
249
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
6 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 11 tháng trước
6 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 8 tháng 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 5 tháng trước
2 0
Bài viết liên quan
White
10 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 3 năm trước
10 1
White
45 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
45 8
{{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á!