javaScript 基础知识汇总 （十五）
2024-08-26 01:22:23
1、模块简介
什么是模块：
模块就是一个文件，一个脚本，通过关键字export 和 import 交换模块之间的功能。
export 关键字表示在当前模块之外可以访问的变量和功能。
import 关键字允许从其他模块中导入一些诸如函数之类的功能。
使用示例：
文件 say.js
export function sayHi(user)
return `Hello ,${user}!`;
}
文件index.html
<!doctype html>
<script type="module">
import {sayHi} from './say.js';
document.body.innerHTML = sayHi('John");
</script>
核心模块功能
1)始终使用 use strict
2)模块级作用域
每个模块都有自己的作用域
3)模块代码仅在第一次导入时解析
顶级 “this" 是未定义的（undefined）
在模块中的this与模块中的区别是 普通脚本中的this 是window 而模块中的this则是undefined
<script>
alert(this);//window
</script>
<script type = "moudle">
alert(this);//undefined
</script>
模块脚本是延迟解析的
- 外部模块脚本
<script type="module" src="...">不会阻塞 HTML 的解析，它们与其他资源并行加载。 - 直到 HTML 文档完全解析渲染后（即使模块脚本比 HTML 先加载完成），模块脚本才会开始运行。
- 执行脚本的相对顺序：在前面的先执行。
不允许裸模块
import {sayHi} from 'sayHi'; // Error，“裸”模块 // 模块必须提供路径，例如 './sayHi.js'
2、模块的导入导出
声明前导出
// 导出数组
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 导出 const 声明的变量
export const MODULES_BECAME_STANDARD_YEAR = ; // 导出类
export class User {
constructor(name) {
this.name = name;
}
}
声明后导出
function sayHi(User){
alert(`Hello,${User}!`);
}
fucntion sayBye(user)
alert(`bye,${user}!`);
}
export{sayHi,sayBye};
指明导入的内容
//最新文章
- Javascript.Reactjs-5-prop-validation-and-proptypes
- HashTable, HashMap, LinkedHashMap, ConcurrentHashMap
- 文字对齐之text-align总结
- JS-数值篇
- Linux里面怎样修改主机名
- 获取当前WEB应用全路径
- Gulp自动化构建工具的简单使用
- 分享一个不错的Unittest测试报告
- mysql之 mysql_config_editor/login-path 登录密码保护
- JavaScript中0和""的比较问题
- Learning from delayed reward (Q-Learning的提出) （Watkins博士毕业论文）（建立了现在的reinforcement Learning模型）
- （连通图 模板题）迷宫城堡--hdu--1269
- python 把一文件包含中文的字符写到另外文件乱码 UnicodeDecodeError: 'gbk' codec can't decode byte 0xac in position
- 利用atimicInteger cas的特性实现一个锁
- 前端(七)：ES6一些新特性
- 3.openldap生成LDAP用户
- UVA 1390 Interconnect
- （原创）android6.0系统 PowerManager深入分析（很具体）
- vs asp.net 给所有邮箱发邮件，案例，源代码，c#
- APUE学习笔记——7main()函数启动与退出
热门文章