JavaScript ES6 Module模块详解_javascript技巧
这篇文章主要介绍了ES6新特性之模块Module用法,简要说明了模块Module的概念、功能并结合实例形式分析了模块Module的使用方法与相关注意事项,需要的朋友可以参考下
目录
0.什么是Module1.Module 的加载1.1 方式一1.2 方式二2.导出和导入2.1 一个模块的导出可以被其它模块导入,并访问。2.2 没有导出,也可以将其导入2.3 被导入的代码都会执行一遍,也仅会执行一遍3.export default 和对应的 import4.export 和对应的 import5.Module 的注意事项总结
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\’;
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注3399IT网的更多内容!
本文为网络共享文章,如有侵权请联系邮箱485837881@qq.com