JavaScript Design Pattern - Module Pattern

Module pattern là một loại pattern khá mạnh và được sử dụng rất phổ biến, với một số các đặc điểm sau:

  • Sử dụng Object Literals ({})
  • Cung cấp khả năng đóng gói dữ liệu với cả thuộc tính và phương thức dạng public/private, giúp tránh xung đột về tên đối với các function ở các script khác trên trang web.

Ví dụ sử dụng Module Pattern

var countModule = (function(){
  var count = 0;
  var log = function(funcName) {
    console.log(funcName, count);
  }
  return {
    increase: function() {
      count++;
      log("increase");
    },
    decrease: function() {
      count--;
      log("decrease");
    },
    reset: function() {
      count = 0;
      log("reset");
    }
  }
})();

// Usage:
countModule.increase(); // increase 1
countModule.increase(); // increase 2
countModule.decrease(); // increase 1
countModule.reset();    // reset 0

Giải thích

Ví dụ trên định nghĩa một module tên là: countModule. Có thể bạn sẽ thắc mắc về cú pháp sau:

var countModule = (function(){

})();

Thực chất, đoạn code trên có thể tách ra làm 2 phần: Khai báo hàm và gọi hàm.

// Khai báo hàm
var funcModule = function(){

}
// Gọi hàm
var countModule = funcModule();

Do đó, nếu muốn truyền tham số vào function (chẳng hạn như jQuery) thì bạn có thể viết như sau:

var countModule = (function(jQ){

})(jQuery);

Theo cách phân tích trên, thực chất countModule là thành phần return của function - dạng object ({}). Do đó, ta chỉ có thể truy cập đến những thuộc tính bên trong object này là: increase, decrease, reset. Hay nói cách khác, những hàm số này thuộc dạng public.

Ngược lại, biến số count, log chỉ truy cập được ở trong hàm số trên, nên thuộc dạng private.

Revealing Module Pattern

Module Pattern có một nhược điểm là khó theo dõi các phương thức được public. Sau đây là cách sử dụng Revealing Module Pattern để khắc phục nhược điểm này:

var countModule = (function(){
  var count = 0;
  var log = function(funcName) {
    console.log(funcName, count);
  }
  function increaseFunc() {
    count++;
    log("increase");
  }
  function decreaseFunc() {
    count--;
    log("decrease");
  }
  function resetFunc() {
    count = 0;
    log("reset");
  }
  return {
    increase: increaseFunc,
    decrease: decreaseFunc,
    reset: resetFunc
  }
})();

// Usage:
countModule.increase(); // increase 1
countModule.increase(); // increase 2
countModule.decrease(); // increase 1
countModule.reset();    // reset 0

Bây giờ, ta có thể dễ dàng thấy rằng countModule có 3 phương thức được public là: increase, decrease, reset.

Tham khảo


Theo dõi Lam Pham trên Kipalog để nhận thông báo khi có bài viết mới nhất:

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

Lam Pham

28 bài viết.
71 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
32 13
Trước khi vào nội dung bài viết. Tôi xin đính chính giúp anh trả lời những câu hỏi chỉ là tựa đề của một bài hát tôi không có ý xưng hô là anh. Bài...
Lam Pham viết hơn 1 năm trước
32 13
White
16 4
JavaScript cung cấp nhiều cách khác nhau để convert String sang Number. Và trong bài viết này, mình sẽ tổng hợp lại một số cách mà mình đã biết. ...
Lam Pham viết 8 tháng trước
16 4
White
15 6
Có thể bạn thừa biết, JavaScript là một ngôn ngữ chạy (Link). Điều đó có nghĩa là nếu bạn thực hiện một tác vụ quá lớn trên giao diện chính thì khả...
Lam Pham viết hơn 1 năm trước
15 6
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'}}
28 bài viết.
71 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á!