ES6模块Module

export导出模块

let myName = 'tom';
let myAge = 18;
let myfn = ()=>{
    return "my name is" + myName +','+ 'my age is ' + myAge
}
export {myAge,myName,myfn}

//注意： 导出包要用 export{要导出的函数或者变量}

import导入模块

import { myName,myAge,myfn } from "./export.js";
console.log(myfn());
console.log(myName);
console.log(myAge);
// 使用格式如 import {要导入的变量或者包} from "导入包的js文件路径"

index.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>Document</title>

</head>

<body>
    <script src="./import.js" type="module"></script>
</body>

</html>

这里要注意的是，script引入importjs文件的时候，要写上 type=“module”，不然会报错

as 的用法

export.js

let myName = "meworain";
export {myName as exportName}

import.js

import {exportName} from "./export.js";
console.log(exportName);

那如果我们遇到要导入的两个包的变量相同怎么办？

这就体现了as的用处了

不同模块导出接口名称命名重复， 使用 as 重新定义变量名。

as不仅能在exprot中使用，也可以在import中使用

export1.js

let myName = "meworain";
export {myName}

export2.js

let myName = "yyds";
export {myName}

import.js

import {myName as name1} from "./export1.js";
import { myName as name2 } from "./export2.js";
console.log(name1);
console.log(name2);

关于import使用的注意项

注意： 从别的包中导入的变量，不能改变其内容，也不能改变其类型，是只读的

如果把上面的import.js改成下面这样

import {myName as name1} from "./export1.js";
import { myName as name2 } from "./export2.js";
name1 = 123;
console.log(name2);

会直接报错

image-20220829103246303

export default 命令

特点：

  • 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
  • export default 中的 default 是对应的导出接口变量。
  • 通过 export 方式导出，在导入时要加{ }，export default 则不需要。
  • export default 向外暴露的成员，可以使用任意变量来接收。

案例：

export.js

let a = 'my name is meowrain';
export default a;

import.js

import g from './export.js';
console.log(g);

image-20220829103548412