ES6之模块入门（二）

经过上一篇的ES6模块入门（一）我们知道了什么是模块以及模块加载等内容，这一篇中，我们将详细探讨模块中的一些用法。

一、使用 export 关键字将代码公开给其他模块

　　语法：将 export 关键字放置在任意变量、函数或类声明之前，例如：

basicexport.js

//导出数据（变量）
export var color = 'red';
export let name = 'Lily';
export const magicNumber = 7;

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

//导出类
export class Rectange {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
}

//任何没有被显式导出的变量、函数或类都会在模块内保持私有
function subtract(a, b) {
    return a - b;
}

//先定义一个函数，稍后将其导出
function multiply(a, b) {
    return a * b;
}

export { multiply }

　　注意：1. 每个被导出的函数或类都有名称，因为导出的函数声明与类声明必须要有名称。
　　　　　2. 如果要导出匿名函数或匿名类，请使用 default 关键字。（参见后面）

二、在其它模块内使用 import 关键字访问已被导出的功能

　　语法：import { 标识符1, 标识符2 } from './example.js';

　　

basicimporttest.html　　

 

最后，export 与 export default的区别

1、在一个文件（模块）中，export、import可以有多个，export default 有且仅有一个

例如：apple.js

export default function getName() {
    return '红富士';
}
export default function getColor() {
    return '红色';
}

　　apple.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module">
        import * as apple from './modules/apple.js';
        let str = apple.getName();
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

当出现多个export default，则会报如下错误：

  

2、通过export方式导出，在导入时要加大括号{ }；export default则不需要

posted @ 2021-02-02 23:32  外星鸟  阅读(107)  评论(0)    收藏  举报