在前端开发中，我们常常需要导入外部模块来完成一些功能。而在 ES11 中，我们可以使用 import 语句来导入有副作用的模块。
什么是有副作用的模块
通常情况下，我们在导入模块时，其实是想获取该模块中的某些变量或函数，以便在代码中使用。这种导入方式不会对当前环境造成任何影响，因此称之为无副作用的模块。
而有副作用的模块则不同，它在被导入时会对当前环境产生一些影响，例如修改全局变量、注册事件监听器等。这种导入方式可能会带来一些意料之外的后果，因此需要谨慎使用。
如何导入有副作用的模块
在 ES11 中，我们可以使用 import 语句的特殊语法来导入有副作用的模块。具体来说，我们需要在导入语句前加上 import 关键字，并使用 from 关键字指定要导入的模块路径。例如：
import * as example from './example.js' import './side-effect.js'
这里，我们同时导入了 example.js 和 side-effect.js 两个模块。其中，example.js 是一个无副作用的模块，我们使用了 * as example 的语法将其导入为一个名为 example 的对象，以便在后续代码中使用。而 side-effect.js 则是一个有副作用的模块，我们直接导入它即可。
需要注意的是，由于有副作用的模块可能会对当前环境产生影响，因此我们需要确保它们在正确的时机被导入。例如，如果我们想在页面加载完成后才执行某个模块中的代码，可以将其放在 window.onload 事件处理函数中，以确保模块在正确的时机被加载和执行。
示例代码
下面是一个简单的示例，演示了如何导入有副作用的模块：
// side-effect.js
console.log('Hello, world!')
// main.js
import * as example from './example.js'
import './side-effect.js'
console.log(example.foo) // 输出 42在这个示例中，我们定义了一个有副作用的模块 side-effect.js，它会在被导入时输出一段字符串。我们同时还定义了一个无副作用的模块 example.js，其中包含一个名为 foo 的变量。
在 main.js 中，我们先导入了 example.js 模块，并将其导入为一个名为 example 的对象。接着，我们导入了 side-effect.js 模块，这会触发它的副作用，输出一段字符串。最后，我们在控制台中输出了 example.foo 变量的值，以证明它已经成功地被导入了。
总结
ES11 中新增了导入有副作用的模块的语法，使得我们可以更加方便地使用一些需要对当前环境产生影响的模块。但需要注意的是，由于这种导入方式可能会带来一些意料之外的后果，因此需要谨慎使用，并确保它们在正确的时机被导入。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6608f46ad10417a2227722a7