0
点赞
收藏
分享

微信扫一扫

ES6 从入门到精通 # 23:ES6 的模块化实现(完结)

新鲜小饼干 2022-08-17 阅读 211


说明

ES6 从入门到精通系列(全23讲)学习笔记。

ES6 module

es6 模块功能主要有两个命令构成 export 和 import。

  • export:用于规定模块的对外接口
  • import:用于输入其他模块提供的功能

一个模块就是一个独立的文件

我们新建一个 module 文件夹,里面新建 index.js 文件

export const name = "kaimo313";

ES6 从入门到精通 # 23:ES6 的模块化实现(完结)_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 type="module">import {name} from "./module/index.js";
console.log(name);</script>
</body>
</html>

ES6 从入门到精通 # 23:ES6 的模块化实现(完结)_es6_02

抛出多个变量

export const name = "kaimo313";
export const age = 313;
export function getName() {
return "my name is kaimo";
};

或者

const name = "kaimo313";
const age = 313;
function getName() {
return "my name is kaimo";
};

export {
name,
age,
getName
}

<!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 type="module">import {name, age, getName} from "./module/index.js";
console.log(name, age, getName());</script>
</body>
</html>

ES6 从入门到精通 # 23:ES6 的模块化实现(完结)_javascript_03

命名使用 defalut,一个文件只能使用一次

export const name = "kaimo313";
export const age = 313;
export function getName() {
return "my name is kaimo";
};


let obj = {
name: "kaimo666777"
}
export default obj;

<!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 type="module">import kaimo, {name, age, getName} from "./module/index.js";
console.log(name, age, getName());
console.log(kaimo)</script>
</body>
</html>

ES6 从入门到精通 # 23:ES6 的模块化实现(完结)_javascript_04

使用 ​​* as​

<!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 type="module">// import kaimo, {name, age, getName} from "./module/index.js";
// console.log(name, age, getName());
// console.log(kaimo)
import * as k from "./module/index.js";
console.log(k);
console.log(k.getName());</script>
</body>
</html>

ES6 从入门到精通 # 23:ES6 的模块化实现(完结)_javascript_05

引入类

export const name = "kaimo313";
export const age = 313;
export function getName() {
return "my name is kaimo";
};

export class Person {
constructor() {}
getName() {
return "kaimo313313";
}
}

let obj = {
name: "kaimo666777"
}
export default obj;

<!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 type="module">// import kaimo, {name, age, getName} from "./module/index.js";
// console.log(name, age, getName());
// console.log(kaimo)
import * as k from "./module/index.js";
console.log(k);
console.log(k.getName());
console.log(new k.Person().getName());</script>
</body>
</html>

ES6 从入门到精通 # 23:ES6 的模块化实现(完结)_javascript_06


举报

相关推荐

ES6模块化

es6的模块化

ES6 - 模块化语法

ES6 模块化语法

0 条评论