ES6模块化
在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。而 ES6 中提供了简单的模块系统,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
基本使用
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个 变量,就必须使用export关键字输出该变量。下面是一个JS文件,里面使用export命令输出变量。
es6 中新增了两个命令 export
和 import
, export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能
// a.js
export const name = 'pp'
export const age = 18
export const desc = '很帅'
使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)
//main.js
import {name, age, desc} from './a.js'
console.log('从模块内部导出的内容:', name, age, desc)
export详解
上面介绍了模块化最基础的用法,export 不止可以导出函数,还可以导出对象,数组,字符串等等
//a.js
export const name = 'pp'
export const arr = [1, 2, 3]
export const obj = {
name: 'zs',
age: 18
}
export的写法,除了像上面这样,还有另外一种。
//a.js
const name = 'pp'
const arr = [1, 2, 3]
const obj = {
name: 'zs',
age: 18
}
// 优点:上面代码在export命令后面,使用大括号指定所要输出的一组变量。它与前一种写法是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。
export {name, arr, obj}
export输出的变量就是本来的名字,但是可以使用as关键字重命名。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
export default
指定默认输出, import 无需知道变量名就可以直接使用
//a.js
export default function fn () {
console.log('哈哈')
}
//main.js
//在导入时,可以随意的使用变量名来接收
import a from './a'
a()
注意:export default是非常用的语法,用的很多, 以一些常用的模块为例
import $ from 'jQuery' // 加载jQuery 库
import moment from 'moment' // 加载 moment
export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
一个模块只能有一个export default,因此想导入export default导出的变量时不需要{},以下例子合法:
// 第一组
export default function crc32() { // 输出
// ...
}
import crc32 from 'crc32'; // 输入
// 第二组
export function crc32() { // 输出
// ...
};
import {crc32} from 'crc32'; // 输入
export default也可以用来输出类
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass';
let o = new MyClass();
import详解
import
为加载模块的命令,基础使用方式和之前一样
- import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块对外接口的名称相同。
- 可以通过as关键字重命名变量
import a from 模块
中变量a只读,如果a是一个对象,改写a的属性是允许的。import
后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js
后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉JavaScript
引擎该模块的位置。- 注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。
foo();
import { foo } from 'my_module';
// 不报错,import命令是编译阶段执行的,在代码运行之前。
//main.js
import {name, arr, user} from './a'
//如果是export default导出的内容
import a from './a'
兼容性说明
上面介绍了,es6 中模块的使用方式,但是现在es6的模块化,无论在浏览器端还是 node.js 上都没有得到很好的支持,所以需要,一些转码的工具(babel)。使我们可以用es6的方式来编码,最后输出es5的代码。