DEV Community

NikiMunger
NikiMunger

Posted on

模块模式

模块模式是利用 IIFE 和 闭包 (Closure) 的特性,模拟出一种“类”的概念,拥有公有 (Public) 和 私有 (Private) 的成员与方法。

这是 JavaScript 实现封装 (Encapsulation) 的经典方式。

  1. 基本结构
    模块模式通常是一个 IIFE,它返回一个对象 (Object)。这个对象包含了你可以公开访问的方法(API),而 IIFE 内部的其他变量则保持私有。

  2. 代码示例:一个计数器模块

    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 变量得以保留在内存中,但外界只能通过这些“接口”去操作它。

Top comments (0)