时间戳

首页 > 解决方案 > JavaScript ES6 模块：避免污染全局命名空间

javascript - JavaScript ES6 模块：避免污染全局命名空间

问题描述

背景

在 JavaScript 中导入模块时，我们会使用导入模块的名称污染全局命名空间：

foo.js

export foo() {..};
export const bar = 3.14;

index.js

import { foo, bar } from './foo.js';

问题

在index.js，foo并且bar生活在全局命名空间中，对吧？所以，假设我发布了这个模块，有人在他们的 HTML 文件中使用它，以及另一个定义变量foo和bar全局命名空间的脚本。那我们不会发生碰撞吗？

我想这可以通过将所有内容包装main.js在 IIFE 中来解决。但是，出于某种原因，ESLint 对此有所抱怨，这让我想知道 IIFE 是否不是保护全局命名空间的首选/推荐方法。

  1. foo全局命名空间会被and污染bar吗？
  2. 如果是这样，我应该如何避免它？

谢谢你。

标签： javascriptmoduleecmascript-5

解决方案

在 JavaScript 中导入模块时，我们使用导入模块的名称污染了全局命名空间

不，每个模块都有自己的模块范围，所有导入的绑定和顶级声明都在其中。

在只有 ES6 模块的普通 ES6 环境中，您几乎从不使用全局范围 - 所有模块代码都是严格模式代码，因此您必须努力在全局对象上创建变量。

模块捆绑器通常通过允许您将一些导出声明为捆绑脚本中的全局变量来缓解这种情况，这样您在使用其他脚本时也可以在页面中轻松访问它们。

推荐阅读