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

小鱼儿 2023-10-09 23:31 5阅读 0赞

**目录**

背景

一、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博客][module.exports_exports_export_export default_import _require_module.exports._-CSDN]

[module.exports_exports_export_export default_import _require_module.exports._-CSDN]: https://blog.csdn.net/qq_59747594/article/details/127700908?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168381787116800222854300%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168381787116800222854300&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127700908-null-null.blog_rank_default&utm_term=%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA&spm=1018.2226.3001.4450