脚本宝典收集整理的这篇文章主要介绍了JavaScript ES6 Module模块详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
历史上,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
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';
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的JavaScript ES6 Module模块详解全部内容,希望文章能够帮你解决JavaScript ES6 Module模块详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。