Question

我正在阅读es6 import语句reference on MDN。语法：

import "my-module";

仅导入整个模块的副作用，而不导入任何绑定。我不确定副作用是什么意思。我一直在使用 angular 来说import "angular"。 Angular绑定到窗口但不返回对象。所以我不确定这是否会被视为副作用。

Answer 1

如果您需要导入不会导出任何内容但执行其他操作的内容，则这是一个仅限副作用的模块。您只导入它以初始化它。

纯和非纯模块

如果您将模块视为函数，那么仅通过导出其内容来影响范围的模块就像一个总是返回相同内容的函数（没有参数的纯函数）。无论您导入多少次15.01，您都会得到一个包含相同方法的对象。

具有副作用的模块是以其他方式改变范围然后返回某些内容的模块，并且它的效果并不总是可预测的，并且可能受到外力（非纯函数）的影响。例如，polyfill可能不会执行任何操作，因为它发现浏览器已经支持它启用的功能。

副作用的例子：

Angular绑定到全局<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col12"> <div class="card-stacked"> <div class="card-content"> <a class="card-link" href="">card-link</a> </div> </div> </div> -------------- <div class="col12"> <div class="card-stacked"> <div class="card-content"> <a class="card-link" href="">card-link</a> </div> </div> </div> -------------- <div class="col12"> <div class="card-stacked"> <div class="card-content"> <a class="card-link" href="">card-link</a> </div> </div> </div> --------------对象，但不导出任何东西。
在浏览器中启用ES6功能的polyfill 支持他们，如babel polyfill是副作用。
许多jQuery插件将自己附加到全局jQuery对象。
在后台运行的分析模块，监控用户交互并将数据发送到服务器。
如果您不使用CSS模块，在webpack中导入CSS可能会被视为副作用。

Answer 2

以下是一个例子：

//a.js
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”时，您将看到打印的消息，称为

副作用

Answer 3

将下面作为示例代码考虑。当你尝试导入某些东西时，它不会导出任何东西，只会做很多事情并覆盖你现有的代码（如果有的话），这样会产生副作用。

import Ember from 'ember';
Ember.RSVP.configure('onerror', function(error) {
    ....
});

<强> app.js：

import './overrides/extra';

es6导入副作用的含义

3 个答案: