编辑“︁JavaScript模块模式”︁

= JavaScript模块模式 =

== 介绍 ==
'''JavaScript模块模式'''是一种利用JavaScript的[[闭包 (计算机科学)|闭包]]特性来创建私有变量和公共方法的代码组织方式。它通过将相关功能封装在独立的模块中，避免全局命名空间污染，同时提供清晰的接口供外部调用。模块模式是[[ECMAScript]]模块系统（ES6 Modules）出现前的主流解决方案，至今仍在许多遗留代码和特定场景中使用。

== 核心概念 ==
模块模式的核心特点包括：
* '''私有作用域'''：通过[[立即调用函数表达式|IIFE]]（Immediately Invoked Function Expression）创建封闭环境
* '''选择性暴露'''：仅返回需要公开的属性和方法
* '''状态保持'''：闭包允许模块内部维持持久状态

=== 基本结构 ===
<syntaxhighlight lang="javascript">
const myModule = (function() {
  // 私有变量
  let privateVar = 'I am private';
  
  // 私有函数
  function privateMethod() {
    return 'This is private';
  }
  
  // 公共接口
  return {
    publicVar: 'I am public',
    publicMethod: function() {
      return 'Public can see: ' + privateVar;
    }
  };
})();
</syntaxhighlight>

== 实现变体 ==

=== 经典模块模式 ===
最基础的实现方式，适合简单场景：
<syntaxhighlight lang="javascript">
const counterModule = (function() {
  let count = 0;
  
  return {
    increment: function() {
      return ++count;
    },
    reset: function() {
      count = 0;
      return count;
    }
  };
})();

console.log(counterModule.increment()); // 输出: 1
console.log(counterModule.increment()); // 输出: 2
console.log(counterModule.reset());     // 输出: 0
</syntaxhighlight>

=== 揭示模块模式 ===
明确声明哪些私有方法应该被公开：
<syntaxhighlight lang="javascript">
const calculator = (function() {
  function add(a, b) { return a + b; }
  function multiply(a, b) { return a * b; }
  
  // 只暴露add方法
  return {
    add: add
  };
})();

console.log(calculator.add(2, 3));      // 输出: 5
console.log(calculator.multiply(2, 3)); // 报错: multiply未定义
</syntaxhighlight>

=== 增强模块模式 ===
允许在模块创建后扩展功能：
<syntaxhighlight lang="javascript">
const baseModule = (function() {
  let value = 0;
  
  return {
    getValue: function() { return value; }
  };
})();

const enhancedModule = (function(module) {
  module.setValue = function(newValue) {
    value = newValue; // 注意：这里实际上会创建全局变量value
    // 正确实现应该使用闭包保存的value
  };
  return module;
})(baseModule || {});

enhancedModule.setValue(42);
console.log(enhancedModule.getValue()); // 输出: 0 (存在实现问题)
</syntaxhighlight>

== 依赖管理 ==
模块模式可以通过参数注入依赖：
<syntaxhighlight lang="javascript">
const userModule = (function($, _) {
  // 使用jQuery和Underscore作为依赖
  function formatUserName(user) {
    return _.escape($.trim(user.name));
  }
  
  return {
    format: formatUserName
  };
})(jQuery, _);
</syntaxhighlight>

== 生命周期与内存管理 ==
模块模式创建的实例会一直存在于内存中，直到页面卸载。这可以通过以下mermaid图表示：

<mermaid>
graph LR
    A[模块初始化] --> B[创建闭包]
    B --> C[保持私有状态]
    C --> D[页面卸载时释放]
</mermaid>

== 现代替代方案 ==
虽然模块模式仍然有效，但现代JavaScript开发更推荐：
* [[ECMAScript]]模块（ES Modules）
* [[CommonJS]]（Node.js环境）
* [[AMD]]（RequireJS等）

== 实际应用案例 ==
=== 配置管理器 ===
<syntaxhighlight lang="javascript">
const configManager = (function() {
  const config = {};
  
  return {
    set: function(key, value) {
      config[key] = value;
    },
    get: function(key) {
      return config[key];
    },
    getAll: function() {
      return JSON.parse(JSON.stringify(config)); // 返回深拷贝
    }
  };
})();

configManager.set('apiUrl', 'https://api.example.com');
console.log(configManager.get('apiUrl')); // 输出: https://api.example.com
</syntaxhighlight>

=== 状态管理 ===
<syntaxhighlight lang="javascript">
const stateManager = (function() {
  let state = {};
  const listeners = [];
  
  function notify() {
    listeners.forEach(listener => listener(state));
  }
  
  return {
    subscribe: function(listener) {
      listeners.push(listener);
      return function() {
        listeners.splice(listeners.indexOf(listener), 1);
      };
    },
    update: function(newState) {
      state = {...state, ...newState};
      notify();
    },
    getState: function() {
      return {...state}; // 返回浅拷贝
    }
  };
})();

const unsubscribe = stateManager.subscribe(state => {
  console.log('State changed:', state);
});

stateManager.update({ user: 'Alice' }); // 触发日志输出
unsubscribe();
</syntaxhighlight>

== 数学原理 ==
模块模式可以视为数学上的[[闭包 (数学)|闭包]]概念在编程中的体现。给定函数<math>f</math>和变量<math>x</math>，模块模式创建的环境满足：

<math>
\forall x \in X, \exists f(x) \text{ 其中 } X \text{ 是私有作用域}
</math>

== 优缺点分析 ==
{| class="wikitable"
|-
! 优点 !! 缺点
|-
| 避免全局污染 || 每个模块创建新的闭包
|-
| 清晰的接口设计 || 难以测试私有方法
|-
| 保持私有状态 || 内存占用较高
|-
| 兼容性好 || 不如现代模块系统直观
|}

== 最佳实践 ==
1. 优先使用ES Modules，只在必要时使用模块模式
2. 保持模块功能单一（[[单一职责原则]]）
3. 明确区分公有和私有成员
4. 避免深层嵌套的模块
5. 为复杂模块添加文档注释

== 总结 ==
JavaScript模块模式是利用闭包特性实现代码封装的经典模式，虽然现代开发中逐渐被ES Modules取代，但理解其原理对于掌握JavaScript作用域和闭包至关重要。它在维护大型代码库、创建可重用组件等方面仍有实用价值。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript作用域与闭包]]