目录
背景
一、import()
1.1 使用场景
二、import ... from "..."
2.1 详细使用
背景
我们在日常开发中是不是会遇到这个东西import，但是import会有两种形式，下面将详细解释
一、import()
- import函数可以异步动态加载模块，与所加载的模块没有静态连接关系。
- import函数的返回值是promise对象，可以使用.then和.catch方法进行接收数据处理，import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。
- 可以使用对象解构赋值的语法，获取输出接口。允许模块路径动态生成。
- 可以配合promise的方法.all方法进行多个模块的加载。
- import函数可以放在任何地方，因为它是运行时执行的，什么时候执行到它，就什么时候进行指定模块的加载，所以它可以在条件语句和函数中进行动态的加载。
1.1 使用场景
//vue项目路由按需加载
{
path:'/document'
name:'document'
component:()=>import(../document/index.vue)
}
//模块的按需加载
btn.click=function(){
import('../document').then(fn=>{
...
})
}
//条件加载
if(true){
return import('./document/info').then(msg=>{
//加载内容
}).catch(err=>{
//error codo
})
}
二、import ... from "..."
- import 语句与export配合使用，export命令用于规定模块的对外接口，import命令用于导入由另一个模块导出的绑定。在import和export都可以使用as关键字来为导出/导入的变量重新命名。
- export语句输出的接口，与其对应的值是动态绑定关系，接口名与模块内部变量之间，建立了一一对应的关系。即通过该接口可以取到模块内部实时的值。export和import一样不可出现在块级作用域中，必须在顶层，导出的不可以为准确值必须是接口，输出的接口不存在动态更新。
- import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行，异步加载，只能放在模块首部，不能支持条件语句
- 在一个文件或模块中，export、import可以有多个，export default仅有一个
- export default导出匿名接口的时候，import会可以为这个匿名接口起任意的想要的名字。
- export …from … 在一个模块中可以先导入再导出
2.1 详细使用
参考我的blog
（区别、详解、使用）module.exports与exports，export与export default，import 与require_module.exports.__揽的博客-CSDN博客
