“ECMAScript6:模块”的版本间的差异
来自CloudWiki
第86行: | 第86行: | ||
==导入模块== | ==导入模块== | ||
+ | index.html: | ||
+ | |||
<nowiki> | <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> | </nowiki> |
2021年1月31日 (日) 11:10的版本
一个模块通常是一个独立的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