ES6模块(JavaScript)

Question

在ES6下，在客户端，我认为在函数外部定义的东西将继续污染全局作用域。在ES5中，我通常会在应用程序初始化时在根“名称空间对象”中注册一堆类型，如下所示：

(function (namespace) {
    function MyConstructor() {
    }

    namespace.MyConstructor = MyConstructor;
}(applicationNamespace));

然后，我可以稍后参考我的类型，如下所示：

var o = new applicationNamespace.MyConstructor();

很简单。

在ES6中，如何达到同样的效果？我假设我仍然需要将我的文件中的所有内容包装在生命周期中，以防止污染全球范围？

(function() {
  function MyConstructor() {
  }

  export MyConstructor; // Will this make the constructor function globally visible?
}())

大多数在线示例似乎是针对Node.js的，其中文件内容缺少生命周期，但在客户端，即使在ES6中，这不会造成全局范围的污染吗？

或者export关键字的存在会修改作用域行为吗？

最后，如何使用ES6模块实现语义名称空间。像myapp.utils.MyConstructor这样的东西

Answer 1

导出不会污染全局名称空间，因为它们需要导入。

以ES6为例，你可以这样写：

export let a = 1;

等效的ES5为：

var a = 1;
module.exports = { a : a };

在另一个文件中，要在ES6中使用导出的变量：

import { a } from './other-file';
console.log(a); // 1

这大致相当于以下ES5：

var a = require('other-file').a;
console.log(a); // 1

变量的作用域为每个文件，并且在连接时，捆绑程序通常会将每个文件包装在一个函数中。

在ES6中创建名称空间

// class-file.js
export default () => {
  console.log('constructor called');
};

// namespace.js
import A from './class-file';
export default {
  A
};

// app.js
import namespace from './namespace';
let a = new namespace.A(); // constructor called