Module的使用

2023-09-10 阅读 13 评论 0

摘要：Module的使用 Module的基本使用 index.html <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"

Module的使用

Module的基本使用

index.html

<!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><!-- export.js (公共的 可复用的 内容)import.jsindex.html 引入import.js--><script type="module" src="import.js"></script></body>
</html>

export.js

// export 用于导出变量和函数
// 1.1 导出变量 方式一
// export let name = "zhangsan";
// export let age = 19;// 1.2 导出变量 方式二
let name = "zhangsan";
let age = 19;
export { name, age };let obj = {name: "list",age: 30,
};
export { obj };// 2.1 导出函数 方式一
export function addFn(a, b) {console.log(a + b);
}// 2.2 导出函数 方式二
function fn1() {console.log("fn1");
}
function fn2() {console.log("fn2");
}
export { fn1 as tempFn1, fn2 as tempFn2 };

import.js

// import 用于导入其他模块// 1.1 导入
// import { name, age } from "./export.js";
// console.log(`你好，我叫${name},今年${age}岁了`);// 1.2 可以对变量取别名
import { name as myName, age } from "./export.js";
console.log(`你好，我叫${myName},今年${age}岁了`);// 1.3 导入的变量都是制度的，不能够被修改
// age = 50; // Assignment to constant variable.// 1.4 导入的对象属性是可以修改的
import { obj } from "./export.js";
obj.age = 50;
console.log(obj);// 2.1 导入函数
add(10, 20); // 存在变量提升的效果
import { addFn as add } from "./export.js";// 2.2 导入函数
import { tempFn1, tempFn2 } from "./export.js";
tempFn1();
tempFn2();// module是静态导入
// 不能使用表达式和变量那些运行时才能看到结果的代码
// 报错1
// let path = "./export.js";
// import {tempFn3} from path;
// 报错2
// if (1 == 1) {
//   import { addFn as test1 } from "./export.js";
// }

Module其他使用

index.html

<!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.js

// export function fn1(args) {
//   return args;
// }
// export function fn2(args) {
//   return args * 2;
// }// 1.1 默认输出
// export default function () {
//   console.log("temp");
// }// export default 一个模块中只能由一个export default
// 也可以导出class
export default class Person {constructor(name) {this.name = name;}
}

import.js

// 整体加载方式
// import * as obj from "./export.js";
// console.log(obj);
// console.log(obj.fn1(5));
// console.log(obj.fn2(5));// 1.1 匿名加载
// import myfn from "./export.js";
// myfn();// 1.2 对比正常的加载// 结论：正常输出，导入时要加{}
//       默认输出，导入时不要加{} [export default]// 导入class
import Person from "./export.js";
let p = new Person("zhangsan");
console.log(p);

Module复合写法

index.html

<!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.js

// 导入public.js的number1变量
// 继续导出 给 import.js使用// 普通写法
// import { number1 } from "./public.js";
// export { number1 };// 复合写法
export { number1 } from "./public.js";

import.js

import { number1 } from "./public.js";
console.log(number1);

public.js

export let number1 = 10;

原文链接：https://hbdhgg.com/4/39495.html

上一篇：当博客系统遇上live2d后

下一篇：Nodejs 了解web服务器

发表评论: