Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách hiểu Module Pattern trong JavaScript

JavaScript (trước ES6) không có class/module built-in. Module Pattern dùng IIFE (Immediately Invoked Function Expression) + Closure để tạo scope private, expose public API qua object trả về.

Ví dụ: Quản lý người bỏ phiếu

<!DOCTYPE html>
<html>
<body>
  <script>
    const VoterModule = (function() {
      // Private data & methods
      const votersAge = [15, 50, 27, 17, 22, 87, 65, 45];

      function calculateAverage() {
        const total = votersAge.reduce((acc, age) => acc + age, 0);
        return total / votersAge.length;
      }

      function getNotQualified() {
        const notAdult = votersAge.filter(age => age < 18);
        return `Người bỏ phiếu không đủ điều kiện (dưới 18 tuổi): ${notAdult.length}`;
      }

      // Public API
      return {
        getAverageAge: calculateAverage,
        getNotQualifiedCount: getNotQualified,
        // Không expose votersAge trực tiếp
      };
    })();

    // Sử dụng
    console.log(VoterModule.getNotQualifiedCount());
    console.log('Tuổi trung bình:', VoterModule.getAverageAge());
    // console.log(VoterModule.votersAge); // undefined - private
  </script>
</body>
</html>

Yếu tố cốt lõi

  1. IIFE: Tạo scope mới, chạy ngay lập tức.
  2. Closure: Hàm bên trong nhớ biến ở scope ngoài (votersAge).
  3. Private: Biến/hàm không return ra ngoài → không truy cập được từ bên ngoài.
  4. Public: Object trả về chứa method cho phép truy cập an toàn.

So sánh với ES6 Modules

Đặc điểmModule Pattern (IIFE)ES6 Modules (import/export)
ScopeFunction scopeModule scope (file)
LoadingSync, inlineAsync, static analysis
Tree-shakingKhôngCó
Browser supportMọi trình duyệtModern (cần bundler cho cũ)

Khuyến nghị: Dùng ES6 Modules cho dự án mới. Module Pattern vẫn hữu ích cho legacy, plugin, hoặc namespace đơn giản.