“ECMAScript6：模块”的版本间的差异

2021年1月31日 (日) 10:57的版本

一个模块通常是一个独立的JS文件，该文件内部定义的变量和函数除非被导出，否则不能被外部所访问。

使用export关键字放置在需要暴露给其他模块使用的变量、函数或类声明前面。

定义模块

Modules.js:

// 导出数据
export var color = "red";
export let name = "module";
export const sizeOfPage = 10;

// 导出函数
export function sum(a, b){
	return a + b;
}

// 将在模块末尾进行导出
function subtract(a, b){
	return a - b;
}

// 将在模块末尾进行导出
function multiply(a, b){
	return a * b;
}

// 将在模块末尾进行导出
function divide(a ,b){
	if(b !== 0)
		return a / b;
}
// 导出类
export class Car {
	constructor(sColor, iDoors){
		this.color = sColor;
		this.doors = iDoors;
	}
	showColor(){
		console.log(this.color);
	}
}
// 模块私有的变量
var count = 0;
// 模块私有的函数
function changeCount(){
	count++;
}
/*
// 导出multiply函数
export {multiply};
// subtract是本地名称，sub是导出时使用的名称
export {subtract as sub}
// 导出模块默认值
export default divide;

注意：

• 没有添加export关键字而定义的变量、函数和类在模块外是不允许被访问的
• 一个模块可以导出且只能导出一个默认值

第二种和第三种语法形式：

// 第二种语法形式
// 使用default关键字导出一个函数作为模块的默认值，
// 因为导出的函数被模块所代表，所以它不需要一个名称
export default function(a ,b){
	if(b !== 0)
		return a / b;
}
// ----------------------- //
function divide(a ,b){
	if(b !== 0)
		return a / b;
}
// 第三种语法形式
export {divide as default}

一次性多个导出：

export {multiply, subtract as sub, divide as default};

导入模块