ES6 系列十二：Module

"Code tailor"，为前端开发者提供技术相关资讯以及系列基础文章，微信关注“小和山的菜鸟们”公众号，及时获取最新文章。

前言

在开始学习以前，咱们想要告诉您的是，本文章是对阮一峰《ECMAScript6 入门》一书中 "Module" 章节的总结，若是您已掌握下面知识事项，则可跳过此环节直接进入题目练习

• 什么是模块化 ？
• import 命令和 export 命令分别有什么做用 ？
• 如何模块总体加载
• export default 命令有何做用 ？

若是您对某些部分有些遗忘，👇🏻 已经为您准备好了！

学习连接

Module 的学习

汇总总结

什么是模块化

历史上，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 命令对外部输出了三个变量。

• 输出函数或类（class）

export function multiply(x, y) {
  return x * y;
};

一般状况下，export输出的变量就是原本的名字，可是可使用as关键字重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

另：export 语句输出的接口，与其对应的值是动态绑定关系，即经过该接口，能够取到模块内部实时的值。

import 命令

使用 export 命令定义了模块的对外接口之后，其余 JS 文件就能够经过 import 命令加载这个模块。

// main.js
import { firstName, lastName, year } from './profile.js'

function setName(element) {
  element.textContent = firstName + ' ' + lastName
}

//import命令接受一对大括号，里面指定要从其余模块导入的变量名。大括号里面的变量名，
//必须与被导入模块（profile.js）对外接口的名称相同。

• 若是想为输入的变量从新取一个名字，import 命令要使用 as 关键字，将输入的变量重命名。

import { lastName as surname } from './profile.js'

• import 命令输入的变量都是只读的，不容许在加载模块的脚本里面，改写接口。

import { a } from './xxx.js'
a = {} // Syntax Error : 'a' is read-only;

// 可是若是a是一个对象，改写a的属性是容许的
import { a } from './xxx.js'
a.foo = 'hello' // 合法操做

• import 后面的 from 指定模块文件的位置，能够是相对路径，也能够是绝对路径。若是不带有路径，只是一个模块名，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import { myMethod } from 'util'
//  util是模块文件名，因为不带有路径，必须经过配置，告诉引擎怎么取到这个模块。

• import 命令具备提高效果，会提高到整个模块的头部，首先执行。

模块的总体加载

除了指定加载某个输出值，还可使用总体加载，即用星号（*）指定一个对象，全部输出值都加载在这个对象上面。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius
}

export function circumference(radius) {
  return 2 * Math.PI * radius
}

import * as circle from './circle'

console.log('圆面积：' + circle.area(4))
console.log('圆周长：' + circle.circumference(14))

export default 命令

为了给用户提供方便，让他们不须要知道所要加载的变量名或函数名，就能加载模块。

// export-default.js
export default function () {
  console.log('foo')
}

上面代码是一个模块文件 export-default.js，它的默认输出是一个函数。其余模块加载该模块时，import 命令能够为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default'
customName() // 'foo'

题目自测

一：关于 ES6 的 module 模块，下列说法错误的是？

• A: 能够有效解决大型系统文件复杂的依赖问题
• B: 使用 export 语句能够选择性地向外部暴露本身的属性或者方法
• C: 使用 import 语句导入其余模块的属性或者方法
• D: 目前大部分主流浏览器都支持 module 模块

---

二：如下代码输出结果为（）

// module.js
export default () => 'Hello world'
export const name = 'Lydia'

// index.js
import * as data from './module'

console.log(data)

• A: { default: function default(), name: "Lydia" }
• B: { default: function default() }
• C: { default: "Hello world", name: "Lydia" }
• D: Global object of module.js

---

三：简述 export 和 export default 的区别

---

题目解析

1、

Answer: D

---

2、

Answer: A

使用import*做为名称语法，咱们从module.js归档到index.js将建立名为 data 的新对象文件。在module.js 文件有两个导出：默认导出和命名导出。默认导出是一个函数，它返回字符串“helloworld”，命名的导出是一个名为name的变量，该变量的值为字符串“Lydia”。

数据对象具备默认导出的默认属性，其余属性具备命名导出的名称及其相应值。

---

3、

export default的对象、变量、函数、类，能够没有名字。export的必须有名字 export default在一个模块中只能有一个，固然也能够没有。export在一个模块中能够有多个 export default对应的import和export有所区别：有default的导入不须要{}

ES 6 系列的 Module，咱们到这里结束啦，谢谢各位对做者的支持！大家的关注和点赞，将会是咱们前进的最强动力！谢谢你们！