前言

在此之前我们已经介绍过Class类以及利用Class类继承做了一个小demo，今天我们再来看看ES6中模块的概念，上两篇的链接如下：

ES6 ---- Class (opens new window)

利用ES6的class类继承实现绚丽小球效果 (opens new window)

介绍

在js中一直没有模块的概念,将js拆成一些互相依赖小模块。在ES6之前实现模块化使用的是 RequireJS 或者 seaJS（分别是基于AMD规范的模块化库，和基于 CMD 规范的模块化库）。ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

注意 ES6的模块化自动采用严格模式。无论你是否在文件头部加上“use strict”。ES6 的模块化分为导出（export） @与导入（import）两个模块。

概念

• export

• import

• export default

export

概念在ES6模块化中任何一个独立的文件都是一个模块。文件内的所有变量外部都无法获取。所以如果要公开一些变量就必须使用export 关键字将变量输出

语法

// constant.js
export const theme = 'red'
export const language = 'zh'
export const version = '1.0.6'

// tool.js
function rem2px(rem) {
    console.log(rem, 'rem2px')
}

const px2Rem = function (px) {
    console.log(px, 'px2Rem')
}

const number = 12
// 将变量集中在一个对象中公开出去, 这种写法可以给 变量提供别名
export {rem2px, px2Rem, number as systemIntNumber}

注意

1. export对外公开一个接口,必须公开的接口与与模块内的变量建立一个一一对应的映射关系。下面两种公开方式是不允许的。

export 12 // Error 不可以直接公开12，这种形式是没有向外部提供接口
const number = 12
export number // Error 等价于 export 12

2. export 虽然可以写在文件的任何位置,但是他本质上是设计思想是在编译时就能确定模块的依赖关系的公开接口命令。下面的写法完全不符合设计模式的。因为代码的执行是在编译时之后的运行时中

function exportStart () {
    export const a = 12
}
exportStart()

import

概念在ES6使用export 关键字在模块中对外公开了接口之后，其他模块就可以通过import关键字加载对外公开接口的模块

语法

方法一：可以使用 结构方法加载模块中的指定接口

import {theme, language, version } from './constant'

注意 import 语法中可以使用 as 关键字给加载的模块指定一个别名

 import {theme, language, version as v } from './constant'
 
 console.log(theme)
 console.log(language)
 console.log(v) // 使用 as 关键字将接口 version 设置了别名 v（v 替代 变量version）

方法二：模块的整体加载。我们可以理解export 关键字在公开接口时，其实就是创建了一个叫做export的模块对象，所有接口都是该对象的属性。import给开发者提供了 （*）星号用来指定 export模块对象。因为js的命名规范中 *号不可以做变量名的所以在模块的整体加载中需要配合as 关键字给模块整体 设置一个别名

import * as tool from './tool'

console.log(tool)

注意

1. import 加载的接口都是只读的

import {theme, language, version as v } from './constant'

theme = 1 // error

2. import 加载语法是单例模式，多次引入同一个接口等价于只引入一次

import {theme, language, version as v } from './constant'
import {theme, language, version as v } from './constant'
import {theme, language, version as v } from './constant'

// 等价于 只引入了一次

export default

概念默认接口, 在开发中使用import 加载接口时,开发人员必须要知道接口的名称,否则无法加载。ES6为了让模块的引入更加的方便提供了 默认接口的概念。即在import中使用任意变量来接收都会的得到的接口对象就被称为是默认接口

语法

// constant.js
export const theme = 'red'
export const language = 'zh'
export const version = '1.0.6'
// 使用 export default 公开接口
export default '我是默认接口的值,默认接口无需指定变量名'

// 加载默认接口, 无需结构赋值可以设置任意变量
import theme from './constant' // 这里theme 不是接口theme 而是默认接口

console.log(theme) // '我是默认接口的值,默认接口无需指定变量名'

注意

1. export default 公开的接口可以使用任意名称接收
2. 一个模块中至多只可以有一个默认接口(即只能有一个 export default)
3. export default 后不可以声明变量,而是直接公开接口的值
4. 默认接口不可以使用大括号
5. 默认接口 不可以使用 as设置别名

import a as test from './constant' // Error

6. 如果默认接口的值是一个对象,不可以直接在 import中使用解构赋值

// constant.js
export default {
    name: 'Max',
    age: 27
}

import {name} from './constant.js'  
// name的值为undefined
// import 中使用大括号代表的是获取 export 公开的接口,上面的name 获取的是 export const name 值