（详解及使用）import()函数和import语句

目录

背景

 一、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博客