目录0.什么是Module1.Module 的加载1.1 方式一1.2 方式二2.导出和导入2.1 一个模块的导出可以被其它模块导入,并访问。2.2 没有导出,也可以将其导入2.3
历史上,javascript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
在 es6 之前,社区制定了一些模块加载方案,最主要的有 Commonjs 和 AMD 两种。ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
模块系统主要解决的问题:
使用 < script >标签加载模块时需要添加 type=“module”。
<script type="module">
import module from "./module.js";
</script>
<script src="./module.js" type="module"></script>
例1:使用About.js调用Base.js内的Base对象,并在首页打印。
index.html
<script type="module">
import About from "./js/About.js";
console.log(About);
</script>
Base.js
const Base = {
nick: 'admin',
age: 19
}
export default Base;
About.js
import Base from '../js/Base.js';
const src = `nick:${Base.nick},age:${Base.age}.`;
export default src;
输出结果:
nick:admin,age:19.
例2:About.js不导出,在首页将其导入。
index.html
<script type="module">
import "./js/About.js";
</script>
About.js
const src = 'Hello World!';
console.log(src);
输出结果:
Hello World!
例3:导入3次About.js,观察导出结果。
index.html
<script type="module">
import "./js/About.js";
import "./js/About.js";
import "./js/About.js";
</script>
About.js
const src = 'Hello World!';
console.log(src);
输出结果:
Hello World!
export default 用于导出一个默认值,一个模块只能有一个。
使用 export default 进行导出时,import 的名字可以随意起。
例4:使用 export default 进行导出,import 的名字随意起。
index.html
<script type="module">
import bbb from "./js/About.js";
console.log(bbb);
</script>
About.js
const src = 'Hello World!';
export default src;
输出结果:
Hello World!
使用 export 进行导出时,import 的名字不能随意起。
例5:使用 export 进行导出。
index.html
<script type="module">
import { age, nick } from "./js/About.js";
console.log(nick, age);
</script>
About.js
const age = 18;
export {age};
// export age; ×
// export const age = 18; √
export const nick = 'admin';
输出结果:
admin 18
1.模块中,顶层的 this 指向 undefined;
2import 具有提升效果,会提升到整个模块的头部,率先执行;
3.import 执行的时候,代码还没执行;
4.import 和 export 只能在模块的顶层,不能在代码块中执行;
5.import() 可以按条件导入;
6.复合写法导出的,无法在当前模块中使用
复合写法,导入后导出:
export About from './js/About.js';
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: JavaScript ES6 Module模块详解
本文链接: https://www.lsjlt.com/news/155300.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0