如何用Vanilla JavaScript实现私有变量的模块引入与复用？

嘿，这个问题问到点子上了！作为一直用原生JS搞模块开发的人，我刚好有两个靠谱的方案能帮你实现需求——让大型数组只初始化一次，保持私有化（不会被全局随意篡改），同时允许多个模块安全访问。

方案1：闭包+立即执行函数表达式（IIFE） #

这个方案兼容所有旧浏览器，核心是用闭包把数组藏起来，只暴露受控的访问接口：

// shared-data.js
const SharedArray = (() => {
  // 私有化的大型数组——只有闭包内部能直接访问
  const largeArray = [/* 你的海量数据，比如上千条记录 */];

  // 暴露给外部的操作接口
  return {
    // 获取数组长度（避免外部直接获取原数组）
    getLength: () => largeArray.length,
    // 按索引获取元素
    getElement: (index) => {
      if (index >= 0 && index < largeArray.length) {
        return largeArray[index];
      }
      return undefined;
    },
    // 受控修改元素
    updateElement: (index, newValue) => {
      if (index >= 0 && index < largeArray.length) {
        largeArray[index] = newValue;
      }
    },
    // 若需获取整个数组，建议返回副本防止外部修改原数组（大数组需权衡性能）
    getCopy: () => [...largeArray]
  };
})();

其他模块如何使用？ #

在浏览器环境下，SharedArray会成为一个“伪全局”变量，但因为原数组被闭包保护，外部无法直接修改它。比如：

// module-a.js
console.log('数组长度:', SharedArray.getLength());
console.log('第一个元素:', SharedArray.getElement(0));

// module-b.js
SharedArray.updateElement(3, '更新后的值');

这里的关键是：IIFE只会执行一次，所以largeArray只会被初始化一次，完美实现单例。

方案2：ES模块（现代浏览器推荐） #

如果你的项目支持现代浏览器（或者可以通过转译工具兼容旧环境），ES模块是更优雅的选择——它自带模块级作用域，不会污染全局，而且模块只会加载执行一次：

// shared-array.js
// 私有化的大型数组——仅在当前模块内部可见
const largeArray = [/* 你的海量数据 */];

// 导出受控的操作接口
export const getLength = () => largeArray.length;
export const getElement = (index) => {
  if (index >= 0 && index < largeArray.length) {
    return largeArray[index];
  }
  return undefined;
};
export const updateElement = (index, newValue) => {
  if (index >= 0 && index < largeArray.length) {
    largeArray[index] = newValue;
  }
};
// 可选：导出数组副本（大数组谨慎使用）
export const getCopy = () => [...largeArray];

其他模块导入使用 #

在需要的模块里直接导入即可，浏览器会自动保证模块只执行一次：

// module-a.js
import { getLength, getElement } from './shared-array.js';

console.log('数组长度:', getLength());
console.log('第五个元素:', getElement(4));

// module-b.js
import { updateElement } from './shared-array.js';

updateElement(10, '新值');

这个方案的优势是：完全没有全局污染，代码结构更清晰，是原生JS模块开发的标准方式。

关键注意点 #

• 如果你的数组特别大，返回整个数组的副本会有性能开销，建议只暴露必要的细粒度操作（比如按索引读写、批量操作），避免直接复制整个数组。
• 两种方案都保证了数组的“私有化”：外部无法直接修改原数组，只能通过你提供的接口操作，避免了意外篡改的风险。

内容的提问来源于stack exchange，提问作者rpivovar