ES6中的导入副作用是什么意思?

65

我正在阅读MDN上关于es6导入语句的参考文献该语法:

import "my-module";

将只为副作用导入整个模块,而不导入任何绑定。我不确定 副作用 意味着什么。我一直在使用 angular,通过 import "angular" 来引用它。Angular 绑定到 window,但没有返回对象。所以我不确定这是否可以被称为一个确切的副作用。

3个回答

66

当你需要导入一个没有导出任何内容但做其他事情的模块时,这是一个只产生副作用的模块。你只需要导入它以初始化它。

纯模块和非纯模块

如果你把模块看作是函数,那么只通过导出其内容来影响作用域的模块就像一个总是返回相同结果(不带参数的纯函数)的函数。无论你导入多少次 react 15.01,你都会得到一个包含相同方法的对象。

具有副作用的模块是一种以其他方式改变作用域的模块,而它的影响并不总是可预测的,并且可能受外部力量的影响(非纯函数)。例如,polyfill 可能什么也不做,因为它发现所启用的功能已经被浏览器支持了。

副作用示例:

  • Angular 绑定到全局 window 对象,但不导出任何东西。
  • 使浏览器支持 ES6 功能的 polyfill,比如 babel polyfill,是一种副作用。
  • 许多 jQuery 插件会附加到全局 jQuery 对象上。
  • 在后台运行、监视用户交互并将数据发送到服务器的分析模块。
  • 如果你不使用 CSS 模块,那么在 webpack 中导入 CSS 可以被视为一种副作用。

27

这是一个例子:

//a.js
export function print1()
{
  console.log("export print1 is working");
}

function print2()
{
  console.log("non-export print2 is working");
}

print1();
print2();

//b.js
import "a.js";

当你运行 "b.js" 时,你将会看到打印出的信息,这些信息被称为 副作用


如果您对同一副作用进行多次调用,它会被触发两次吗? - Filip Seman
@FilipSeman:模块只会被评估一次,因此多次调用不会产生影响。即使同一个文件被多次导入,print1()print2()也只会被调用一次 :) - Prid

4
考虑以下示例代码。当您尝试导入某些内容时,它不会导出任何东西,但会执行许多操作并覆盖您现有的代码(如果有),这就是副作用。
import Ember from 'ember';
Ember.RSVP.configure('onerror', function(error) {
    ....
});

app.js:

import './overrides/extra';

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接