ES6 Module学习

最新推荐文章于 2024-07-30 22:36:34 发布

zhukaijin

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量53

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/zhukaijin/article/details/120755035

版权

                    
                        
                    
                    什么是模块
 局部作用域的代码块
什么是模块系统，解决了哪些主要问题
 2-1. 模块化的问题
 2-2. 消除全局变量
 2-3. 管理加载顺序
ES6之前 常用的模块库 RequireJS， seaJS
Module导入导出 js 文件
 js 模块 导出 export default XXX
 js 模块 导入 import XXX from YYYY
 js 模块 引入至html script标签内须注明 type="module"//01.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module的基本用法</title>
</head>
<body>
    <script src="index.js" type="module"></script>
</body>
</html>
 //02.js
import people from './people.js'
console.log(people.a+1)
 //03.js
class People{
    static a = 1
}
export default People
 
如果一个模块没有导出，也是可以被导入的。多次导入，仅会执行一边
一个模块只能有一个 export default
导入导出的另一种方式不用 export default
 export 与 import 的变量名必须相同
 export 声明或语句 // 导入
 export age    //错
 export {age}  //对
 import age from 。。。
 
利用解析赋值{} 导入导出多个对象
导入导出可以起别名
整体导入 import * as obj from ‘./,’
Moudule的注意事项
 11.1 模块顶层的this指向undefiend
 11.2 import 会提升至整个模块头部，率先执行。
 11.3 import和export 要放在模块顶层，不能放在代码块中
 11.4 import() 可以按条件导入（在if代码块中），不是ES标准，返回值是Promise类型
 11.5 导入导出的复合写法export {age} from './module.js'
// 等价于
import {age} from './module.js'
export {age}
 

                

zhukaijin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 Module学习

什么是模块局部作用域的代码块什么是模块系统，解决了哪些主要问题2-1. 模块化的问题2-2. 消除全局变量2-3. 管理加载顺序ES6之前常用的模块库 RequireJS， seaJSModule导入导出 js 文件js 模块导出 export default XXXjs 模块导入 import XXX from YYYYjs 模块引入至html script标签内须注明 type="module"//01.html<!DOCTYPE html><html.
复制链接

扫一扫