ES 6 系列 - Module 的语法

Posted 2020-11-14 cc-freiheit

es 6 大幅度优化了模块化编程的规范。

 

写在前面：在 es6 之前，说起 js 的模块化，一般都避不开 CommonJs 和 AMD 两种方案。这两种方案，前者应用于服务器，后者应用于浏览器。而 es 6 通过 export 和 import 这两个关键字，完全取代上面两种方案，且使用起来更简单。

 

一、export 命令

　　出口，用于规定模块的对外接口（这就意味着数据必须被包装成对象的格式）。

　　一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果希望能获取到内部的某个变量，就必须使用 export 将变量输出：

// profile.js
export var firstName = ‘Michael‘;
export var lastName = ‘Jackson‘;
export var year = 1958;

 　　通常写成，也建议这样写：

// profile.js
var firstName = ‘Michael‘;
var lastName = ‘Jackson‘;
var year = 1958;

export {firstName, lastName, year};

　　以及输出函数或者类：

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

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

　　export 输出时，只有三种固定格式，其他均会报错：

// 写法一
export var m = 1;    // 声明时输出

// 写法二
var m = 1;
export {m};      // 包装成数据对象输出

// 写法三
var n = 1;
export {n as m};    // 使用别名输出，基本上相当于第二种



// 报错
export 1;

// 报错
var m = 1;
export m;

　　还有一点就是，export 输出的接口，与其对应的值是动态绑定关系，即通过接口，可以获取到模块内部实时的值：

export var foo = ‘bar‘;
setTimeout(() => foo = ‘xyz‘, 500);


// 输出变量 foo， 值为 bar , 500 ms 后变成 xyz

 

二、import 命令

　　入口，加载 export 的模块中的变量、方法等。

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

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

　　当然，引入的变量也可以修改变量名：

import { lastName as surname } from ‘./profile.js‘;

 　　一个规范：import 进来的变量、方法、对象本身无法修改，但是，如果是对象的话，其中的某个属性还是可以修改的，但但是，从规范上，不要进行任何修改，将引入的全部当做只读，否则改 bug 会很头疼。

 

　　如果 export 时未采用 {xxx,xxx} 方式，那么在 import 时，想要引入所有值，可以使用 * 来代替：

// main.js

import { area, circumference } from ‘./circle‘;

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


// 可以简写成
import * as circle from ‘./circle‘;

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

 

 

三、export default 命令

　　使用 import 的时候会有一个问题，如果不知道需要加载的模块中的变量名或者函数名，那就很尴尬。小模块没什么，点进去翻翻就知道，但是像 Vue、ElementUI 这种框架的时候，想要快速上手，先去翻翻文档？