模块模式

发布: (2025年12月6日 GMT+8 15:50)
2 min read
原文: Dev.to

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

Back to Blog

相关文章

阅读更多 »

[Boost]

🚀 客户端 vs 服务器端 CORS:了解真实差异 Shanthi 的开发日志 • 12 月 4 日 标签:webdev, cors, javascript, node