【JavaScript+模块模式】简单实现与应用

什么是模块模式？

模块模式 是JavaScript中用于封装代码 、创建私有作用域 的一种设计模式 。它利用闭包特性，可以隐藏内部实现细节，只暴露必要的接口。

代码是离不开封装的，这个模式就是一个与封装密切相关的模式。

基本实现

javascript 复制代码

const myModule = (function() {
  // 私有变量
  let privateVar = '我是私有的';
  
  // 私有函数
  function privateMethod() {
    console.log(privateVar);
  }
  
  // 暴露公共接口（重点！）
  return {
    publicMethod: function() {
      privateMethod();
    },
    publicVar: '我可以被公开访问'
  };
})();

// 使用
myModule.publicMethod(); // 输出: "我是私有的"
console.log(myModule.publicVar); // "我可以被公开访问"
console.log(myModule.privateVar); // undefined (无法访问)

实际应用场景

工具库封装

javascript 复制代码

const utils = (function() {
  function formatDate(date) { /* ... */ }
  function debounce(fn, delay) { /* ... */ }
  
  // 比如封装好的api请求之类的
  return {
    formatDate,
    debounce
  };
})();

状态管理

javascript 复制代码

// 类似Redux的极简版
const store = (function() {
  let state = {};
  
  function getState() {
    return {...state};
  }
  
  function dispatch(action) {
    // 更新状态逻辑
  }
  
  return {
    getState,
    dispatch
  };
})();

总结

模块模式的作用：

避免全局变量污染
实现私有成员
代码组织更清晰
减少命名冲突

需要注意的是，模块模式仍然有用 ，即使有了 ES6 的 import/export。

为啥？

最佳实践是结合使用：

JS 复制代码

// 用模块模式封装逻辑，再用 export 暴露接口
let connection = null; // 私有变量

export const db = (() => {
  function connect() { /* 初始化 connection */ }
  function query() { /* 使用 connection */ }
  return { connect, query };
})();

// 其他文件
import { db } from './lib/db.js';
db.connect();

最后

我发现设计模式的学习其实就是一个区分哪些设计是好设计 、哪些设计是过度设计的过程。

下次见🍭