Chia sẻ - Design Pattern là gì? Giới thiệu JS module pattern | VN-Zoom | Cộng đồng Chia Sẻ Kiến Thức Công Nghệ và Phần Mềm Máy Tính

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

If possible, please support us by clicking on the advertisements.

Please add vn-z.vn to your ad blocking whitelist or disable your adblocking software.

×

Chia sẻ Design Pattern là gì? Giới thiệu JS module pattern

Huỳnh Phúc Huy

Búa Đá Đôi
design-patterns.jpg

# Design Patterns là gì?


Design patterns là các giải pháp đã được tối ưu hóa, được tái sử dụng cho các vấn đề lập trình mà chúng ta gặp phải hàng ngày. Nó là một khuôn mẫu đã được suy nghĩ, giải quyết trong tình huống cụ thể rồi.

Các vấn đề mà bạn gặp phải có thể bạn sẽ tự nghĩ ra cách giải quyết nhưng có thể nó chưa phải là tối ưu. Design Pattern giúp bạn giải quyết vấn đề một cách tối ưu nhất, cung cấp cho bạn các giải pháp trong lập trình.

Nó không phải là ngôn ngữ cụ thể nào cả. Design patterns có thể thực hiện được ở phần lớn các ngôn ngữ lập trình.

# Tại sao phải sử dụng Design Patterns?
  • Design Pattern giúp bạn tái sử dụng mã lệnh và dẽ dàng mở rộng.
  • Nó là tập hơn những giải pháp đã được tối ưu hóa, đã được kiểm chứng để giải quyết các vấn đề trong software engineering. Vậy khi bạn gặp bất kỳ khó khăn gì, design patterns là kim chỉ nam giúp bạn giải quyết vấn đề thay vì tự tìm kiếm giải pháp cho một vấn đề đã được chứng minh.
  • Design pattern cung cấp giải pháp ở dạng tổng quát, giúp tăng tốc độ phát triển phần mềm bằng cách đưa ra các mô hình test, mô hình phát triển đã qua kiểm nghiệm.
  • Dùng lại các design pattern giúp tránh được các vấn đề tiềm ẩn có thể gây ra những lỗi lớn, dễ dàng nâng cấp, bảo trì về sau.
  • Giúp cho các lập trình viên có thể hiểu code của người khác 1 cách nhanh chóng (có thể hiểu là tính communicate). Mọi thành viên trong team có thể dễ dàng trao đổi với nhau để cùng xây dựng dự án mà k mất quá nhiều thời gian.

# Khi nào nên sử dụng Design pattern?


Giúp cho chương trình của mình thực sự đơn giản. Việc sử dụng các design pattern sẽ giúp chúng ta giảm được thời gian và công sức suy nghĩ ra các cách giải quyết cho những vấn đề đã có lời giải.

Bạn có thể đọc qua cuốn "Head First Design Patterns" để có cái nhìn tổng quát hơn về design pattern.

# Giới thiệu JS 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

Mã:
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:

Mã:
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.

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:

Mã:
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:

Mã:
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.

Hy vọng với sự giải thích ngắn gọn trên, bạn có thể hiểu và áp dụng được Module Pattern.

# Tham khảo
 

Cloud

Administrator
Thanks thớt, lâu không không update các nội dung kiến thức này {sweet_kiss}
 


Top