由于import命令会被JavaScript引擎静态分析,所以无法做到动态加载。
因此,引入import()函数,完成动态加载。
import(specifier);
上面的代码中,import函数的参数specifier,指定所要加载的模块的位置。import命令能够接受什么参数,import()函数就可以接受什么参数,两者区别主要是后者为动态加载。
适用场合
下面是import()函数的一些适用场合:
- 按需加载:
import()函数可以在需要的时候,再加载某个模块。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
上面的代码中,import()函数放在click事件的监听函数之中,只有用户点击了按钮,才会加载这个模块。
- 条件加载
import()可以放在if条件块,根据不同的情况,加载不同的模块。
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
上面代码中,如果满足条件,就加载模块A,否则加载模块B。
- 动态的模块路径
import()函数允许模块路径动态生成。
import(f())
.then(...);
上面代码中,根据函数f的返回结果,加载不同的模块。