import()函数
简介
import
命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适)。所以,下面的代码会报错。
1. // 报错
2. if (x === 2) {
3. import MyModual from './myModual';
4. }
上面代码中,引擎处理import
语句是在编译时,这时不会去分析或执行if
语句,所以import
语句放在if
代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,import
和export
命令只能在模块的顶层,不能在代码块之中(比如,在if
代码块之中,或在函数之中)。
这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。在语法上,条件加载就不可能实现。如果import
命令要取代 Node 的require
方法,这就形成了一个障碍。因为require
是运行时加载模块,import
命令无法取代require
的动态加载功能。
1. const path = './' + fileName;
2. const myModual = require(path);
上面的语句就是动态加载,require
到底加载哪一个模块,只有运行时才知道。import
语句做不到这一点。
因此,有一个提案,建议引入import()
函数,完成动态加载。
1. import(specifier)
上面代码中,import
函数的参数specifier
,指定所要加载的模块的位置。import
命令能够接受什么参数,import()
函数就能接受什么参数,两者区别主要是后者为动态加载。
ES6
返回一个 Promise 对象。下面是一个例子。
1. const main = document.querySelector('main');
2.
3. import(`./section-modules/${someVariable}.js`)
4. .then(module => {
5. module.loadPageInto(main);
6. })
7. .catch(err => {
8. main.textContent = err.message;
9. });
import()
函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。它是运行时执行,也就是说,什么时候运行到这一句,也会加载指定的模块。另外,import()
函数与所加载的模块没有静态连接关系,这点也是与import
语句不相同。
import()
类似于 Node 的require
方法,区别主要是前者是异步加载,后者是同步加载。
下面是import()
的一些适用场合。
(1)按需加载。
import()
可以在需要的时候,再加载某个模块。
1. button.addEventListener('click', event => {
2. import('./dialogBox.js')
3. .then(dialogBox => {
4. dialogBox.open();
5. })
6. .catch(error => {
7. /* Error handling */
8. })
9. });
上面代码中,import()
方法放在click
事件的监听函数之中,只有用户点击了按钮,才会加载这个模块。
(2)条件加载
import()
可以放在if
代码块,根据不同的情况,加载不同的模块。
1. if (condition) {
2. import('moduleA').then(...);
3. } else {
4. import('moduleB').then(...);
5. }
上面代码中,如果满足条件,就加载模块 A,否则加载模块 B。
(3)动态的模块路径
import()
允许模块路径动态生成。
1. import(f())
2. .then(...);
上面代码中,根据函数f
的返回结果,加载不同的模块。
import()
加载模块成功以后,这个模块会作为一个对象,当作then
方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
1. import('./myModule.js')
2. .then(({export1, export2}) => {
3. // ...·
4. });
上面代码中,export1
和export2
都是myModule.js
的输出接口,可以解构获得。
如果模块有default
输出接口,可以用参数直接获得。
1. import('./myModule.js')
2. .then(myModule => {
3. console.log(myModule.default);
4. });
上面的代码也可以使用具名输入的形式。
1. import('./myModule.js')
2. .then(({default: theDefault}) => {
3. console.log(theDefault);
4. });
如果想同时加载多个模块,可以采用下面的写法。
1. Promise.all([
2. import('./module1.js'),
3. import('./module2.js'),
4. import('./module3.js'),
5. ])
6. .then(([module1, module2, module3]) => {
7. ···
8. });
import()
也可以用在 async 函数之中。
1. async function main() {
2. const myModule = await import('./myModule.js');
3. const {export1, export2} = await import('./myModule.js');
4. const [module1, module2, module3] =
5. await Promise.all([
6. import('./module1.js'),
7. import('./module2.js'),
8. import('./module3.js'),
9. ]);
10. }
11. main();
import("../script/XMDefine").then(
(moudle) => {
console.log(moudle);
moudle.XMDefine.ActicitiesID;
console.log(moudle.XMDefine.ActicitiesID);
});
let ts = import("../script/XMDefine");
console.log((await ts).XMDefine.ActicitiesID);