ES6模块相比于显式模块模式有哪些额外的优势？

Question

我正在学习ES6 模块，尝试理解使用ES6模块相比于闭包和模块模式(MP)的额外优势。

例如，在ES6中的util.js.

   var util ={
         abc:function(){
        //function body
    },
    def:function(){
         // function body
    }
    export default utils;   // here export is exposing the entire object
}

使用闭包和模块模式的util.js

var util = (function(){
       function _abc(){
         console.log("abc")
           // function body
       };
    function _def(){
         // function body
      }

  return{          // each of the function will be exposed
      abc:_abc,
      def:_def

}
}(util ||{}))

ES6中的someFile.js

import {utils} from "path/to/file"

在使用闭包和模块模式的someFile.js文件中

util.abc() // Will log "abc"

我知道es6 模块 可以让我们重命名导入和导出，例如 export { a as abc}。

使用闭包和模块模式，我们可以在return语句中使用任何我们想要的名称，例如 return { a:_abc}

我的问题是：相比于闭包和模块模式，使用es6模块还能获得什么额外的好处？我猜其中一个好处是减少代码行数。

如果我错过了任何基本差别，请原谅。

- brk

---

虽然我理解你发帖的意图，但是你现在提出的问题过于宽泛，不适合在SO上得到良好的回答。请修改你的问题，让它更加具体明确。 - Kyll

@Kyll说得对。我也在苦苦寻找一个合适的标题，但最终还是改了它。希望它能够解决我的疑惑。 - brk

“使用ES6模块而不是闭包，我们可以获得什么额外的好处”仍然太宽泛了。您能否聚焦于一个技术问题，而不是提出如此开放的问题？ - Kyll

你的ES6模块存在语法错误，export声明必须位于顶层。请正确缩进你的代码。 - Bergi

不，你不能使用 import {utils} from … 来进行默认导出。 - Bergi

Answer 1

使用 var util = (function(){ bla bla bla }(util || {})); 污染了全局命名空间，这样一旦你使用 import {utils} from "path/to/file"，它将继续存在于全局命名空间中，即使模块已经完成并被其他模块替换。现在考虑你有数百个模块，并且以相同的方式进行操作，那么想象一下可怜的 window 将变得多么脏乱！

然而，如果使用 ES6 模块或 CommonJS 或甚至 AMD，则：

1. 全局命名空间不会被污染。
2. [ES6] 你可以使用 export default something 导出默认值以使用 import from "path/to/file"
3. [ES6] 你可以使用 export["anotherthing"] 从 ES6 模块中导出多个内容

此外，我建议你阅读这篇博客文章。

- Ammar Hasan