（详解及使用）import()函数和import语句-Toy模板网

这篇具有很好参考价值的文章主要介绍了（详解及使用）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博客文章来源地址https://www.toymoban.com/news/detail-439978.html

到了这里，关于（详解及使用）import()函数和import语句的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！