• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript ES6 Module模块详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

0.什么是Module

历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

模块系统主要解决的问题:

  • 模块化的问题
  • 消除全局变量
  • 管理加载顺序

1.Module 的加载

使用 < script >标签加载模块时需要添加 type=“module”。

1.1 方式一

<script type="module">
    import module from "./module.js";
</script>

1.2 方式二

<script src="./module.js" type="module"></script>

2.导出和导入

2.1 一个模块的导出可以被其它模块导入,并访问。

例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.2 没有导出,也可以将其导入

例2:About.js不导出,在首页将其导入。

index.html

<script type="module">
    import "./js/About.js";
</script>

About.js

const src = 'Hello World!';
console.log(src);

输出结果:

Hello World!

2.3 被导入的代码都会执行一遍,也仅会执行一遍

例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!

3.export default 和对应的 import

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!

4.export 和对应的 import

使用 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

5.Module 的注意事项

1.模块中,顶层的 this 指向 undefined;

2import 具有提升效果,会提升到整个模块的头部,率先执行;

3.import 执行的时候,代码还没执行;

4.import 和 export 只能在模块的顶层,不能在代码块中执行;

5.import() 可以按条件导入;

6.复合写法导出的,无法在当前模块中使用

复合写法,导入后导出:

export About from './js/About.js';

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript中的Promise详解发布时间:2022-02-05
下一篇:
Vue生命周期介绍和钩子函数详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap