ES10的动态导入文件

(1) 传统动态导入JS文件的方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态 import </title>
</head>
<body><button id="btn">点击</button><script src="./js/app.js" type="module"></script>
</body>
</html>

使用script进行引入，type设置成module即可；

(2) ES10的动态导入文件

动态import()返回的是所请求模块的Promise。因此，可以使用async/await 将导入的模块分配给变量。

方式一：

const module = './mod.js';
import(module).then((value)=>{console.log(value);}
).then((value)=>{console.log(value);}
);

方式一是基于promise实现的一种方式；

方式二：

async function(){const mod1 =  './mod.js':const mod2 =  await import(mod1);mod2.doData();}

方式二是基于async await实现的一种方式；

ES10的动态导入文件相关推荐

ccs10怎么导入工程文件_Webpack 前端工程化动态导入文件
前言随着项目越来越大,业务需要越来越多,我们项目的目录层级也是非常的多.如果还是通过import分别引入文件,那是非常的不科学的. 比如vue项目vuex文件非常多: import Vue from ...
如何判别lib文件是静态库还是动态库的导入文件呢
我么知道lib文件存在两种情况: 一种是LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代码由运行时加载在进程空间中的DLL提供,称为动态链接库dynamic link librar ...
Python Day26：多态、封装、内置函数：__str__、__del__、反射(反省)、动态导入模块...
## 多态 ```python OOP中标准解释:多个不同类型对象,可以响应同一个方法,并产生不同结果,即为多态多态好处:只要知道基类使用方法即可,不需要关心具体哪一个类的对象实现的,以不变应万变, ...
第二十五章面向对象------封装、内置函数、反射、动态导入
1.封装什么是封装? 1.对外部隐藏内部的属性,以及实现细节,给外部提供使用的接口注意:封装有隐藏的意思,但不是单纯的隐藏学习封装的目的:就是为了能够限制外界对内部数据的访问 python中属性 ...
day8 动态导入模块、socket进阶
文章目录 1. 动态导入模块 2. socket 进阶 1. 动态导入模块文件目录如下: aa.py 文件中: class C(object):def __init__(self):self.nam ...
python importlib_metadata_Python 动态导入对象,importlib.import_module()的使用方法
背景一个函数运行需要根据不同项目的配置,动态导入对应的配置文件运行. 解决文件结构 a #文件夹 │a.py │__init__.py b #文件夹 │b.py │__init__.py ├─c# ...
VS2013动态库文件的创建及其使用详解
一.VS2013动态库文件的创建 1.新建项目,win32,win32项目,输入项目名称,例如MakeDll. 2."确定"--"下一步",选择"DL ...
13 代码分割之import静动态导入
前端首屏优化方案之一项目构建时会整体打包成一个bundle的JS文件,而有的代码.模块是加载时不需要的,需要分割出来单独形成一个文件块chunk(不会打包在main里),让模块懒加载(想加载时才加载 ...
JSP静态导入与动态导入
JSP静态导入(JSP指令标记include) JSP页面第一次被请求时,会被JSP引擎转译成Servlet的Java文件,然后再被编译成字节码文件执行.JSP指令标记为JSP页面转译提供整个页面的相 ...

ES10的动态导入文件

(1) 传统动态导入JS文件的方式

(2) ES10的动态导入文件

ES10的动态导入文件相关推荐

最新文章

热门文章