快来加入我们吧!
"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 进行学习,及时获取最新文章。
"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!
前言
在开始学习之前,我们想要告诉您的是,本文章是对阮一峰《ECMAScript6 入门》一书中 “Module” 章节的总结,如果您已掌握下面知识事项,则可跳过此环节直接进入题目练习
- 什么是模块化 ?
- import 命令和 export 命令分别有什么作用 ?
- 如何模块整体加载
- export default 命令有何作用 ?
如果您对某些部分有些遗忘,👇🏻 已经为您准备好了!
学习链接
汇总总结
什么是模块化
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
模块功能主要由两个命令构成:export 和 import。export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。
export 命令
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用 export 关键字输出该变量。下面是一个 JS 文件,里面使用 export 命令输出变量。
- 输出变量
// profile.js
export var firstName = 'Michael'
export var lastName = 'Jackson'
export var year = 1958
//等同于下列代码
var firstName = 'Michael'
var lastName = 'Jackson'
var year = 1958
export {
firstName, lastName, year }
上面代码是 profile.js 文件,保存了用户信息。ES6 将其视为一个模块,里面用 export 命