在ES6中使用IIFE命名空间 [英] Namespacing with IIFE in ES6?

问题描述

显然， ES6不需要命名空间，因为每个文件是一个单独的模块。

但是，如何避免全局命名空间干扰？

例如，一个href =https://babeljs.io =nofollow> Babel 仅通过替换<$ cc来编译我的 scripts / main.js $ c> const with var 。

  var alert ='这行不会做任何事情''window.alert（alert） 

使用IIFE命名空间（名为 ANS ）可防止名称冲突：

  const ANS =（function（）{const alert ='This works'window.alert（alert +'。'）return {alert：alert +'too。'}}）（）alert（ANS.alert） 

将属性添加到命名空间 ANS 比将它们添加到全局命名空间窗口或这个更干净。而且，IIFE提供了进一步的封装。

那么第二种方法，就是用IIFE创建一个比第一种更好的自定义命名空间？如果是这样，ES2015有更新的/更好的方法吗？为什么Babel不为我做这个？

解决方案

显然，ES6不需要命名空间因为每个文件是一个单独的模块。

不完全是。每个模块都有自己的范围，这是正确的，但并不是每个文件都是一个模块。 ES6中仍然有脚本与ES5一样工作，并且在全局范围内执行。

在这些脚本中，您仍然需要尽可能多地避免全局变量，通常不会声明/分配任何变量或通过将模块封装在IEFE中以给它一个单独的变量范围。

有更新/更好的方式您可以在ES6中执行此操作？

您可以使用块和词法变量声明（ let ， const ， function ）：

  {
 const msg ='此行不做任何事情'
 window.alert（msg）; 
} 
 //这里没有定义这个消息
  

或者你可以使用箭头功能在您的IEFE，它允许您使用这个引用全局对象，而不需要使用 .call（this） ）：

 （（）=> {
 var msg ='此行不会做任何事情'
 window.alert（msg）; 
}）（）; 
  

但是，如何避免全局名称空间干扰或名称冲突在ES6模块中，除了内置对象，也可能是全局对象之外，没有什么是全局的。当然，您需要注意模块名称之间的冲突，如何做到这一点应该在文档中解释为您的解析器机制。模块加载程序。

Apparently, ES6 doesn't need namespacing because each file is a separate module.

But then, how do I avoid global namespace interference?

For example, Babel compiles my scripts/main.js file by merely replacing const with var.

var alert = 'This line doesn\'t do anything.'
window.alert(alert)

A namespace (named ANS below) with an IIFE prevents name collisions:

const ANS = (function () {
  const alert = 'This works'
  window.alert(alert + '.')
  return {alert: alert + ' too.'}
})()
alert(ANS.alert)

Adding properties to the namespace ANS is cleaner than adding them to the global namespace, window, or this. And, the IIFE provides further encapsulation.

So, isn't the second way, i.e., creating a custom namespace with an IIFE, better than the first? If so, is there a newer/nicer way of doing this in ES2015? Why doesn't Babel do this for me?

解决方案

Apparently, ES6 doesn't need namespacing because each file is a separate module.

Not exactly. Each module does have its own scope, that is correct, but not every file is a module. There still are scripts in ES6 that work just like those from ES5, and are executed in the global scope.
In those scripts, you still need to avoid globals as much as you can, typically by not declaring/assigning any variables or by wrapping your "module" in an IEFE to give it a separate variable scope.

Is there a newer/nicer way of doing this in ES6?

You can use a block and lexical variable declarations (let, const, function):

{
    const msg = 'This line doesn\'t do anything.'
    window.alert(msg);
}
// msg is not defined here

Or you can use an arrow function in your IEFE, which allow you to use this to refer to the global object without needing to use .call(this)):

(() => {
    var msg = 'This line doesn\'t do anything.'
    window.alert(msg);
})();

But then, how do I avoid global namespace interference, or name collisions?

In ES6 modules, there is nothing global except the builtin objects and maybe the global object. Avoid modifying them.

And of course you will need to take care about collisions between module names - how to do that should be explained in the docs for the resolver mechanism of your module loader.

这篇关于在ES6中使用IIFE命名空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！