JS基础知识总结(十四):模块的语法

438 阅读7分钟

“ 关注 前端开发社区 ,回复"1"即可加入 前端技术交流群,回复 "2"即可免费领取 500G前端干货!

作者:前端林子 https://cloud.tencent.com/developer/article/1380512
作者:前端林子 https://cloud.tencent.com/developer/article/1380512

上一节主要是总结了ES6中对象扩展的基本知识。本节主要总结ES6中模块的有关内容,具体内容包括以下几个方面:

1.模块化

1.1什么是模块化

模块化是指把一个复杂的系统分解到一个一个的模块,再用一定的方式拼装起来。

1.2模块化开发的优点

  • (1)一个单独的文件就是一个模块,是一个单独的作用域,只向外暴露特定的变量和函数。这样可以避免污染全局变量,减少变量命名冲突。

  • (2)代码复用,让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。

1.3 js模块化规范

Js模块化规范有:CommonJSAMDCMD、以及本文要总结的ES6的模块系统。

其中,CommonJS是服务端的模块规范,AMDCMD是浏览器端的模块规范。

CommonJS加载模块是“运行时加载”:CommonJS的模块就是对象,导入时,实际是整体加载模块的所有方法,生成一个对象,然后再从这个对象读取对应的方法。因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。

ES6加载模块是“编译时加载”。ES6模块不是对象,导入时只加载指定的方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高,并使得静态分析成为可能。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

关于模块化的更多内容,可以看下之前我总结的一览js模块化:从CommonJS到ES6

2.导出的语法

2.1 导出的基本语法、导出时重命名

export关键字,可以导出变量、函数、类给其他模块。

as关键字,可以指定变量、函数、类在模块外应该被称为什么名称。

// 导出变量--写法1
export let name = "Peter";

// 导出变量--写法2:先定义,再导出
let name = "Peter";
export { name }

// 导出变量--写法3:重命名
let name = "Peter";
export { name as PersonName}
这里export时记得加花括号,不加则会报错。

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

// 导出函数--写法2:先定义、再导出
function sum(a, b) {
    return a + b;
}
export { sum };

// 导出函数--写法3:重命名
function sum(a, b) {
    return a + b;
}
export { sum as add };

这里export时记得加花括号,不加则会报错。

// 导出类--写法1
export class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('hello' + this.name)
    }
}

// 导出类--写法2:先定义、再导出
class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('hello' + this.name)
    }
}
export { Person }

// 导出类--写法3:重命名
class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('hello' + this.name)
    }
}
export { Person as HelloPerson }

同样的,这里export时记得加花括号,不加则会报错。

2.2 导出默认值

default关键字,为模块指定默认导出。

// 导出变量--写法4:导出默认值1
let name = "Peter";
export default name;

// 导出变量--写法5:导出默认值2
let name = "Peter";
export { name as default };

// 导出函数--写法4:导出默认值1
function sum(a, b) {
    return a + b;
}
export default sum;

// 导出函数--写法5:导出默认值2
function sum(a, b) {
    return a + b;
}
export { sum as default };

// 导出类--写法4:导出默认值1
class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('hello' + this.name)
    }
}
export default Person

// 导出类--写法5:导出默认值2
class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('hello' + this.name)
    }
}
export { Person as default }

注意:

  • (1)只能为每个模块设置一个默认的导出值,多次使用default则会报错。

验证:

// 导出多个default
// SyntaxError: duplicate export name 'default'
let name = "Peter";
let age = 25;
export default name;
export default age;
  • (1)export default后面不能加声明语句,因为export default只是输出一个叫做default的变量
export default let name = "Peter"; // 报错

3.导入的语法

3.1 导入的基本语法、导入时重命名

// 导入单个绑定
import { name } from "./export.js";
console.log(name) // Peter

// 导入多个绑定
import { name, age } from "./export.js";
console.log(name, age) // Peter 25

// 导入整个模块
import * as test from "./export.js";
console.log(test.name, test.age) // Peter 25

// 导入时重命名
import { name as personName} from "./export.js";
console.log(personName) // Peter

3.2 导入默认值

导入默认值时不需要加“{}”,可以指定任意名字。

// 导出默认值
let name = "Peter";
export default name;

// 导入默认值
import lalala from "./export.js";
console.log(lalala) // Peter

也可以同时import默认值和非默认值:

// 导出默认值、非默认值
let name = "Peter"
function sum(a, b) {
    return a + b;
}
export default sum;
export { name }

//import默认值,{非默认值},这种写法要注意默认值和非默认的先后顺序
import sum, { name } from './export.js';
console.log(sum(1, 2)) // 3
console.log(name) // Peter

//import写法二:重命名默认值,这种写法不用在意默认值和非默认值的先后顺序
import { default as add, name } from './export.js';
console.log(add(1, 2)) // 3
console.log(name) // Peter

如果同时import默认值和非默认值时,用逗号把默认值的本地名称和大括号包裹的非默认值分开,要注意import时默认值必须在非默认值之前:

import 默认值的本地名称,{非默认值} from ‘xxx.js’;

如果写反则会报错:

import {非默认值},默认值的本地名称 from ‘xxx.js’; // 会报错

验证:

// 报错:SyntaxError: missing keyword 'from' after import clause
import {name},sum from './export.js';
console.log(sum(1, 2)) // 3
console.log(name) // Peter

4.重新导出模块已经导入的内容

如果在一个模块之中,先导入后导出同一个模块,根据上面的介绍可以这样写:

// 导出默认值、非默认值
let name = "Peter"
let age = 25;
function sum(a, b) {
return a + b;
}

export { name, age }
export default sum;

在下面的模块中先导入后导出:

// 4,先导入后导出模块
import { default as add, name, age } from './export.js';
export { name, age, add }

不过也可以用一条语句完成,上述等价于:

export { default as add, name, age } from './export.js';

导出另一个模块中的所有值:

// 导出另一个模块中的所有值
export * from './export.js';

5.小结

有几点要说明:

  • (1)模块是自动运行在严格模式下、并且无法退出运行的js代码。

即ES6 的模块是自动采用严格模式,不管有没有在模块头部加上"use strict";

  • (2)在ES6的模块中,在模块顶层创建的变量只在模块的顶层作用域中存在,不会自动被添加到全局作用域中。

  • (3)在模块顶层,this的值是undefined,即不要在顶层代码使用this

  • (4)模块不支持HTML风格的代码注释。

  • (5)在<script>中使用模块,需要将<script>默认的将js作为脚本加载的行为(type=”text/javascript”),改为作为模块加载。方法是将type的属性值设为”moule”,即可支持按模块加载。

type="module"

不过在使用import加载模块时,要确保两点:

  • 需要提供绝对URL和相对URL
  • .js后缀不可省略,.js后缀不可省略,.js后缀不可省略

实例:

export.js文件:

export let name = "Peter";

html文件:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ES6模块化</title>
</head>

<body>
    <script type="module">
        // 导入单个绑定
        import { name } from "./export.js";
        console.log(name)
    </script>
</body>

</html>
  • (6)exportimport必须在其他语句、函数外使用。在if语句、函数中使用会报错。这是因为import、export是编译时加载模块,不是运行时加载模块。所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构:

验证:

// SyntaxError: export declarations may only appear at top level of a module
if (true) {
    export * from './export.js';
}

模块的好处就在于不用把所有东西都放到一个文件中,可以通过模块导出、导入需要的东西。本文主要总结了ES6中模块Module中的基本语法和使用中需要注意的地方,如有问题,欢迎指正。

往期:

JS基础知识总结(十一):ES6 类与继承

JS基础知识总结(十):ES6基本知识点(2)

JS基础知识总结(九):ES6基本知识点(1)

请各位帅哥美女多多支持帅编,回复“1”即可加入前端技术交流群,回复"2"即可领取 500G 前端干货

本文使用 mdnice 排版