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

来自CloudWiki
跳转至： 导航， 搜索
（创建页面，内容为“一个模块通常是一个独立的JS文件，该文件内部定义的变量和函数除非被导出，否则不能被外部所访问。 使用export关键字放…”）
 
 
（未显示2个用户的3个中间版本）
第59行： 第59行：
 
*没有添加export关键字而定义的变量、函数和类在模块外是不允许被访问的
 
*没有添加export关键字而定义的变量、函数和类在模块外是不允许被访问的
 
*一个模块可以导出且只能导出一个默认值
 
*一个模块可以导出且只能导出一个默认值
 +
 +
 +
第二种和第三种语法形式：
 +
 +
<nowiki>
 +
// 第二种语法形式
 +
// 使用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}</nowiki>
 +
 +
一次性多个导出：
 +
 +
<nowiki>
 +
export {multiply, subtract as sub, divide as default};
 +
</nowiki>
 +
 +
==导入模块==
 +
index.html:
 +
 +
<nowiki>
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<script type="module" src="index.js"></script>
 +
</head>
 +
</html>
 +
</nowiki>
 +
 +
index.js:
 +
 +
<nowiki>
 +
// 导入模块默认值
 +
import divide from "./Modules.js";
 +
// 导入多个绑定
 +
import {color, name, sizeOfPage} from "./Modules.js";
 +
// 导入单个绑定
 +
import {multiply} from "./Modules.js";
 +
// 因Modules模块中导出subtract函数时使用了名称sub，这里导入也要用该名称
 +
import {sub} from "./Modules.js";
 +
// 导入时重命名导入的函数
 +
import {sum as add} from "./Modules.js";
 +
// 导入类
 +
import {Car} from "./Modules.js";
 +
// 导入整个模块
 +
import * as example from "./Modules.js";
 +
 +
console.log(color);          //red
 +
console.log(name);            //module
 +
console.log(sizeOfPage);      //10
 +
// 只能用add而不能用sum了
 +
console.log(add(6, 2));      //8
 +
console.log(sub(6, 2));      //4
 +
console.log(multiply(6, 2));  //12
 +
console.log(divide(6, 2));    //3
 +
let car = new Car("black", 4);
 +
car.showColor();              //black
 +
console.log(example.name);    //module
 +
// 注意这里是sum，而不是add
 +
console.log(example.sum(6, 2)); // 8
 +
// count是Modules模块中私有的变量，在外部不能访问
 +
console.log(example.count);  //undefined
 +
// changeCount()函数是Modules模块中私有的函数，在外部不能访问
 +
console.log(example.changeCount());  //TypeError: example.changeCount is not a function
 +
</nowiki>
 +
 +
注意：导入模块时，可以使用相对路径，也可以使用绝对路径
 +
 +
使用相对路径时，对同一目录下的文件，不能使用Modules.js来引入，而要使用./Modules.js

2021年1月31日 (日) 11:12的最新版本

一个模块通常是一个独立的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};

导入模块

index.html: 

<!DOCTYPE html>
<html>
	<head>
		<script type="module" src="index.js"></script>
	</head>
</html>

index.js: 

// 导入模块默认值
import divide from "./Modules.js";
// 导入多个绑定
import {color, name, sizeOfPage} from "./Modules.js";
// 导入单个绑定
import {multiply} from "./Modules.js";
// 因Modules模块中导出subtract函数时使用了名称sub，这里导入也要用该名称
import {sub} from "./Modules.js";
// 导入时重命名导入的函数
import {sum as add} from "./Modules.js";
// 导入类
import {Car} from "./Modules.js";
// 导入整个模块
import * as example from "./Modules.js";

console.log(color);           //red
console.log(name);            //module
console.log(sizeOfPage);      //10
// 只能用add而不能用sum了
console.log(add(6, 2));       //8
console.log(sub(6, 2));       //4
console.log(multiply(6, 2));  //12
console.log(divide(6, 2));    //3
let car = new Car("black", 4);
car.showColor();              //black
console.log(example.name);    //module
// 注意这里是sum，而不是add
console.log(example.sum(6, 2)); // 8
// count是Modules模块中私有的变量，在外部不能访问
console.log(example.count);   //undefined
// changeCount()函数是Modules模块中私有的函数，在外部不能访问
console.log(example.changeCount());   //TypeError: example.changeCount is not a function

注意：导入模块时，可以使用相对路径，也可以使用绝对路径

使用相对路径时，对同一目录下的文件，不能使用Modules.js来引入，而要使用./Modules.js

取自“http://www.openbrains.net/mediawiki/index.php?title=ECMAScript6：模块&oldid=24748”