Module pattern trong plain JavaScript
Javascript
297
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
10 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 2 năm trước
10 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 1 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 1 năm trước
2 0
Bài viết liên quan
White
59 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 gần 4 năm trước
59 8
White
8 0
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết 8 tháng trước
8 0
{{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á!