Quartz 🪬

Module Pattern in JavaScript

2 min read

Definition

Là một design pattern của JavaScript giúp chia nhỏ code base phức tạp thành các đoạn code nhỏ độc lập và có thể tái sử dụng. Ta gọi các đoạn code đó là các module.

Module có thể xem như là một class nên nó sẽ phải có những thuộc tính và phương thức cần thiết để thực thi một tác vụ cụ thể nào đó. Theo OOP, một class sẽ có tính bao đóng (Encapsulation) giúp bảo vệ những thuộc tính và phương thức nhất định khỏi sự truy cập từ bên ngoài.

Implementation

Ở trong JavaScript, chúng ta sử dụng self-invoking function để triển khai một module.

Ví dụ như sau:

const myModule = (function () {
  const privateProperty = "Hello World"
 
  function privateMethod() {
    console.log(privateVariable)
  }
 
  return {
    publicMethod: function () {
      privateMethod()
    },
  }
})()
 
myModule.publicMethod()

Đối tượng trả về của self-invoking function là một object có:

  • Một phương thức công khai: publicMethod,
  • Một phương thức riêng tư: privateMethod.
  • Một thuộc tính riêng tư: privateVariable.

Do scope bên trong của self-invoking function là private nên các đối tượng được khai báo bên trong nó sẽ mang tính private. Ngoài ra, do tính closure nên publicMethod có thể gọi thực thi privateMethod của self-invoking function.

Revealing Module Pattern

Có thể xem nó là một phiên bản cải tiến của module pattern giúp reveal các thành phần cụ thể của module mà ta muốn công khai.

Để triển khai, chúng ta sẽ map các thuộc tính hoặc phương thức cần public ở bên trong đối tượng trả về của self-invoking function.

Ví dụ:

const myRevealingModule = (function () {
  let privateProperty = "Archie"
  const publicProperty = "Hello World"
 
  function privateMethod() {
    console.log("Name: " + privateVar)
  }
 
  function publicSetName(name) {
    privateVar = name
  }
 
  function publicGetName() {
    privateMethod()
  }
 
  return {
    greeting: publicVar,
    setName: publicSetName,
    getName: publicGetNAme,
  }
})()
 
myRevealingModule.setName("Aleister")
myRevealingModule.getName() // 'Aleister'

Có thể thấy, pattern này giúp code trở nên dễ đọc hơn.

ES6

Khi ES6 được ra mắt, chúng ta có thể xem một file như là một module. Tất cả các thuộc tính và phương thức ở trong file chỉ có thể được expose ra bên ngoài thông qua từ khóa export.

Resources

Backlinks