ES6-import…form、import()区别

发表于 | 分类于 |
字数统计: 639 字 | 阅读时长 ≈ 2 分钟

前言

在咱们项目中，发现import会有两种形式写法

1
2
3
4
5
6
7
import Vue form 'vue'
routes: [
    {
        path: '/home',
        component: () => import('./sre/home.vue')
    }
]

import…form、import()之间有啥区别呢？让我们揭开它们的面纱，let’s go

区别

这两个都是Es6新增的特性，表示引用加载模块

import…form import()
静态加载：先于模块内的其他语句执行。所以import…form命令只能在模块的顶层，不能在代码块之中 动态加载：运行时执行，异步加载
Es6-Es5转译方面，只要有babel就行（webapce 配置 babel-loader） Es6-Es5转译方面，需要额外的babel配置

注意

1、import() 函数加载模块成功后，这个模块会作为一个对象，当做then方法的参数(简单地说，就是会返回一个Promise对象)。因此，可以使用 对象解构赋值 的语法，获取输出接口

1
2
3
import('./test.js').then( ({export1, export2}) => {   
    //...
})

2、import() 函数可以用在async函数中

1
2
3
4
5
6
7
8
9
10
11
async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

补充

import命令输入的变量都是只读的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//使用 as 关键字,将输入的变量重命名
import { lastName as surname } from './profile';

//from 指定模块文件的位置,可以是相对路径也可以是绝对路径 .js 后缀可以省略,如果只是模块名,必须又配置文件告诉 JS 引擎该模块的位置
import {myMethod} from 'util';

//import 命令具有提升效果,会提升到整个模块的头部并首先执行
foo();
import { foo } from 'my_module';

//import 是静态执行,所以不能使用表达式和变量,只有在运行时才能得到结果的语法结构.
//报错
import { 'f' + 'oo' } from 'my_module';
//报错
let module = 'my_module';
import { foo } from module;
//报错
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}

//仅仅执行 lodash 模块，但不会输入任何值
import 'lodash';

//多次重复执行同一 import 语句，只会执行一次 
import 'lodash';
import 'lodash';

//import 语句是 Singleton 模式       
import { foo } from 'my_module';
import { bar } from 'my_module';
//上面两行相当于下面这一行
import { foo, bar } from 'my_module';

// 模块的整体加载
import * as circle from './circle';