Module的使用
Module的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module" src="import.js"></script>
</body>
</html>
let name = "zhangsan";
let age = 19;
export { name, age };
let obj = {
name: "list",
age: 30,
};
export { obj };
export function addFn(a, b) {
console.log(a + b);
}
function fn1() {
console.log("fn1");
}
function fn2() {
console.log("fn2");
}
export { fn1 as tempFn1, fn2 as tempFn2 };
import { name as myName, age } from "./export.js";
console.log(`你好,我叫${myName},今年${age}岁了`);
import { obj } from "./export.js";
obj.age = 50;
console.log(obj);
add(10, 20);
import { addFn as add } from "./export.js";
import { tempFn1, tempFn2 } from "./export.js";
tempFn1();
tempFn2();
Module其他使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="import.js"></script>
</head>
<body></body>
</html>
export default class Person {
constructor(name) {
this.name = name;
}
}
import Person from "./export.js";
let p = new Person("zhangsan");
console.log(p);
Module复合写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="import.js"></script>
</head>
<body></body>
</html>
export { number1 } from "./public.js";
import { number1 } from "./public.js";
console.log(number1);
export let number1 = 10;