使用ES6模块而不是显示模块模式有什么额外的好处?

brk*_*brk 7 javascript closures ecmascript-6

我正在探索ES6 module,并试图找出什么额外的好处,我们开始使用ES6模块,而不是closure一起module pattern(MP).

例如ES6中的util.js.

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

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 ||{}))
Run Code Online (Sandbox Code Playgroud)

ES6中的someFile.js

import {utils} from "path/to/file"
Run Code Online (Sandbox Code Playgroud)

在someFile.js中有闭包和模块模式

util.abc() // Will log "abc"
Run Code Online (Sandbox Code Playgroud)

我也知道ES6 module让我们重命名imports & exports 一样export { a as abc}.

使用闭包和模块模式,我们可以在return语句中给出一个我们喜欢的名称,如return { a:_abc}

我的问题:使用es6模块代替封闭和MP可以获得额外的好处.我想是减少代码行.

如果我错过了任何基本的区别,请原谅

Amm*_*san 7

由于var util = (function(){ bla bla bla }(util || {}));全局命名空间受到污染,因此一旦使用import {utils} from "path/to/file",它将保留在全局命名空间中,即window.util即使在模块完成其工作并由其他模块替换之后,您将无处不在.现在考虑你有100个模块,你以相同的方式做到这一点,然后想象这个糟糕的窗户会变得多么脏!

但是,如果使用ES6模块或CommonJS甚至AMD,那么

  1. 全局命名空间未受到污染.
  2. [ES6]您可以使用export default something导出默认值来使用import from "path/to/file"
  3. [ES6]您可以使用从ES6模块导出多个内容 export["anotherthing"]

此外,我建议你阅读这篇博文.