import（）函数和import语句

唐珂

2023-12-01

import（）

import函数可以异步动态加载模块，与所加载的模块没有静态连接关系。
import函数的返回值是promise对象，可以使用.then和.catch方法进行接收数据处理，import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。
可以使用对象解构赋值的语法，获取输出接口。允许模块路径动态生成。
可以配合promise的方法.all方法进行多个模块的加载。
import函数可以放在任何地方，因为它是运行时执行的，什么时候执行到它，就什么时候进行指定模块的加载，所以它可以在条件语句和函数中进行动态的加载。

使用场景

//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 语句与export配合使用，export命令用于规定模块的对外接口，import命令用于导入由另一个模块导出的绑定。在import和export都可以使用as关键字来为导出/导入的变量重新命名。
export语句输出的接口，与其对应的值是动态绑定关系，接口名与模块内部变量之间，建立了一一对应的关系。即通过该接口可以取到模块内部实时的值。export和import一样不可出现在块级作用域中，必须在顶层，导出的不可以为准确值必须是接口，输出的接口不存在动态更新。
import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行，异步加载，只能放在模块首部，不能支持条件语句
在一个文件或模块中，export、import可以有多个，export default仅有一个
export default导出匿名接口的时候，import会可以为这个匿名接口起任意的想要的名字。
export …from … 在一个模块中可以先导入再导出

使用场景

//ex.js
var a=52
var b=99
export {
    a,
    b as cc
}
//index.js
import {a as aa,cc,} from ./ex.js
//在文件中使用aa,cc

//导出非匿名接口
function aa(){}
export default aa
//或者
export default function aa(){}

//导出非匿名接口
//aa.js
export default function(){}
//index.js
import aafrom ./aa.js

export {a,b}from ./ex.js 
//也可以使用as，与合并前的区别在于a,b并没有导入当前模块，只是转发，使得当前模块不能使用a,b
//等同于：
import {a,b}  from ./ex.js
export {a,b}