目录
es6模块化
- 仅在第一次导入时被解析
- 模块只通过 HTTP(s) 工作，而非本地
- 如果你尝试通过 file:// 协议在本地打开一个网页，你会发现 import/export 指令不起作用。你可以使用本地 Web 服务器，例如 static-server，或者使用编辑器的“实时服务器”功能，例如 VS Code 的 Live Server Extension 来测试模块
使用es6模块化步骤：
(1) 使用export暴露数据
(2) 使用import引入模块
(3) 在html中引入js文件，注意为script的属性设置 type="module"
export
js模块其中一种表示方法
<script type="module">
// 变量仅在这个 module script 内可见
let user = "John";
</script>
<script type="module">
alert(user); // Error: user is not defined
</script>es6模块化语法有三种：
单个暴露语法1：
export var/let 变量1=值1;
export function 方法名(){
};
批量暴露语法2：
let 变量1 = 值1;
var 变量2 = 值2;
funcntion 方法名(){}
...
export {变量1,变量2,方法,}
暴露多个数据，注意变量的名称和暴露的名称一致
默认暴露语法3:
export default 值
默认暴露在同一个模块文件中只能定义一次
m1.js模块文件代码如下：
//单个暴露：
export let usr = '李四';
export var age = 20;
export function demo() {
console.log('demo()方法在m1.js文件中');
}m2.js模块文件代码如下：
//批量暴露：
let usr = '张三';
var email = '[email protected]';
function mytest() {
console.log(`mytest()方法在m2.js文件中`);
}
export { usr as u, email, mytest }m3.js模块文件代码如下：
//默认暴露语法：
//注意：默认暴露在同一个模块文件中只能定义一次
export default { "uname": "小李", tel: 110 }
// export default [1, 3, 9, 2] // Identifier '.default' has already been declared引入
使用es6模块的语法：
import { 变量 } from "模块文件路径"
import { 变量 as 新变量名 } from "模块文件路径"
import 变量 from "模块文件路径" //使用采用默认暴露语法定义的模块文件描述：加载模块
在main.js文件中使用上面定义好的m1.js、m2.js、m3.js模块文件，代码如下：
import { usr, age, demo } from './m1.js';
// import { usr as u, email, mytest } from './m2.js';
import { u, email, mytest } from './m2.js';
import y from './m3.js'; //m3.js为默认暴露语法定义的模块文件
console.log(usr, age, u, email, y);
demo();
mytest();运行调试上面定义的模块文件：
定义main.html文件代码如下：
注意：要通过vscode插件"live server"来运行main.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">
文章评论