Module的使用

最新推荐文章于 2024-07-04 15:45:00 发布

码小余の博客

最新推荐文章于 2024-07-04 15:45:00 发布

阅读量4.2k

点赞数 1

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.csdn.net/Cool_breeze_/article/details/107248753

版权

前端专栏收录该内容

78 篇文章 2 订阅

订阅专栏

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.js
          index.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;

码小余の博客

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Module的使用

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> &
复制链接

扫一扫