ES6中Module语法与加载实现

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

前言

在前三篇文章中一次介绍了CommonJS，AMD，CMD，他们都需要单独载入文件

在阮一峰老师的一文中写到，ES6 在语言标准的层面上，实现的模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

引入ES6模块的好处

• 静态加载是提高效率
• 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点
• 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性
• 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供

静态加载带来的好处

commonJS

require实际上是整体加载fs模块，然后在需要使用的时候使用

// CommonJS模块 let { stat, exists, readFile } = require('fs') // 等同于 let _fs = require('fs') let stat = _fs.stat let exists = _fs.exists let readfile = _fs.readfile

ES6

ES6中的import可以在编译时，按照需要去加载所需要的模块，这个时候就相当于只加载了大括号里的3个方法，相比上面CommonJS中使用require加载整个fs模块好很多

import { stat, exists, readFile } from 'fs'

ES6中Module语法

模块功能主要由两个命令构成：export和import

export命令

规定对外接口

输出变量：

// poeple.js export var name = 'zhangsan' export var height = 180 export var age = 18

上述代码认为是一个模块，利用export向外输出三个变量

也可以在大括号内一块输出

// poeple.js var name = 'zhangsan' var height = 180 var age = 18 export { name, height, age }

输出函数或类：

export function add (x, y) {            return x + y }

输出变量改别名：

利用as关键字

function a1 () {} function a2 () {} function a3 () {} export {        	a1 as s1,     a2 as s2,     a3 as s3 }

import命令

加载模块

import { name, height, age } from './people.js' function getPeople () {            return `${name} is ${height} cm` }

import语句可以选择性的只加载需要的模块，更加节省了资源

模块的整体加载

星号（*）指定一个对象，所有输出值都加载在这个对象上面

那上面的例子

import * as people from './people.js'

export default命令

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出

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

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字

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

跨模块常量

const声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法

// constants.js 模块 export const A = 1; export const B = 3; export const C = 4; // test1.js 模块 import * as constants from './constants'; console.log(constants.A); // 1 console.log(constants.B); // 3 // test2.js 模块 import {A, B} from './constants'; console.log(A); // 1 console.log(B); // 3

ES6中的Module加载实现

在浏览器和 Node 之中加载 ES6 模块

浏览器加载

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性，以此属性告诉浏览器，这加载的是一个 ES6 模块

该加载是异步加载，不会造成阻塞，按出现顺序加载，相当于H5中的defer

同样的可以使用async属性，但此时不按顺序加载，依然是异步的，只不过不知道会先加载哪一个

文章推荐

参考文章

• 阮一峰老师的