+5

Module Pattern trong Javascript

Các tính chất của Module Pattern

  • Dựa trên Closure và HOF (Hight Order Function), IIFE (hàm được chạy ngay lập tức).
  • Dùng để khởi tạo một Object giấu dữ liệu không thể truy xuất từ bên ngoài (private data).
  • Có thể phát triển thành Revealing Module Pattern.
  • Tính đóng gói dữ liệu (Encapsulation).

Ví dụ về Module Pattern

Đơn giản chỉ là IIFE(Immediately Invoked Function Expression)

(function helloModulePattern(name) {
    console.log(`module pattern chào ${name}`) // print console: module pattern chào viblo
 })('viblo')

Câu lệnh trên được gọi là IIFE(Immediately Invoked Function Expression) sẽ được khởi tạo và thực thi ngay lập tức, nó không giống như một function bình thường ở ví dụ bên dưới khi chúng ta gọi nó mới được thực thi cùng xem ví dụ về một function không phải là một IIFE.

function helloFunction(name) {
    console.log(`function chào ${name}`) // print console: function chào viblo
}
helloFunction('viblo')

Tóm lại:

  • Function đầu tiên được khởi tạo và thực thi ngay lập tức.
  • Function thứ 2 nếu ta không gọi helloFunction('viblo') thì nó sẽ không được thực thi mà chỉ được khởi tạo.

Ví dụ chi tiết về Module Pattern

const modulePattern = (function(){
    let privateData = 100
    function privateFunction(){
        console.log('function private')
    }
    return {
        privateDataPublic: privateData,
        privateFunctionPublic: privateFunction
    }
})()

Nếu ta lấy giá trị privateData trực tiếp từ việc truy xuất modulePattern.privateData giá trị sẽ là undefinedprivateData là biến cục bộ trong function modulePattern chỉ nó mới có thể sử dụng.

modulePattern.privateData
// result => undefined

Có thể xem thêm chi tiết demo tại đây.

Nhưng vì nó có các tính chất của ClosureHOF nên ta có thể truy xuất dựa trên privateDataPublic

modulePattern.privateDataPublic
// result => 100

Có thể xem thêm chi tiết demo tại đây.

Ta cũng có thể gọi được cả function ở trong nó:

modulePattern.privateFunctionPublic()
// result => function private

Có thể xem thêm chi tiết demo tại đây.

Cảm ơn các bạn đã đọc hết bài viết hy vọng có thể hiểu đôi chút về Module Pattern trong ngôn ngữ Javascript.


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí