모듈 모드

Source: Dev.to

기본 구조

모듈 패턴은 IIFE와 클로저(Closure)의 특성을 이용해 일종의 “클래스” 개념을 모방하며, 공개(Public)와 비공개(Private) 멤버 및 메서드를 가집니다.
이는 JavaScript에서 캡슐화(Encapsulation)를 구현하는 고전적인 방법입니다.

코드 예시：一个计数器模块

var CounterModule = (function() {
    // 【私有变量】
    // 只能在这个 IIFE 内部访问，外部无法直接修改
    var count = 0;

    // 【私有函数】
    function logResult() {
        console.log("当前数值: " + count);
    }

    // 【返回公有对象】
    // 这里利用了闭包：返回的方法依然持有对 count 的引用
    return {
        increment: function() {
            count++;
            logResult();
        },
        decrement: function() {
            count--;
            logResult();
        },
        reset: function() {
            count = 0;
            console.log("计数器已重置");
        }
    };
})();

// 使用模块
CounterModule.increment(); // 输出: 当前数值: 1
CounterModule.increment(); // 输出: 当前数值: 2
CounterModule.reset();     // 输出: 计数器已重置

// 试图直接访问私有变量
console.log(CounterModule.count); // undefined (被保护了)

원리 분석

IIFE가 실행을 마치면 일반적으로 지역 변수는 소멸됩니다. 하지만 increment와 같은 함수들이 반환되어 외부의 CounterModule에 할당되기 때문에, 이 함수들은 IIFE 스코프에 대한 참조(클로저)를 유지합니다. 따라서 count 변수는 메모리에 남아 있게 되고, 외부에서는 이러한 “인터페이스”를 통해서만 조작할 수 있습니다.