ES6（八）Module 模块（保姆级）

最新推荐文章于 2025-04-21 04:00:00 发布

半糖冰

最新推荐文章于 2025-04-21 04:00:00 发布

阅读量2.6k

点赞数 4

分类专栏： ES6 travel 文章标签： javascript 前端开发语言 es6 vscode

本文链接：https://blog.youkuaiyun.com/weixin_57269725/article/details/121406079

版权

ES6 travel 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍ES6模块系统的基础概念和核心用法，包括export、import命令的语法与注意事项，as命令与export default命令的特点和使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上面代码中，import会自动提升至最顶部，这样写是合法的

前言

模块存在的必要性，使得大型的程序可拆分成各个相互依赖的文件，再搭积木般的拼成一个大型的程序，如果没有这项功能，将对开发大型的项目构成巨大障碍。在此之前，平替模块功能的主要是最主要的有 CommonJS （用于服务器）和 AMD（用于浏览器）。而ES6对模块的实现，可取代上面两种规范。
ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。这种设计思想使得ES6的模块化相对之前的解决方法又拓宽了许多语法（如静态优化等），ES6 的模块化分为 export 与 import 两个模块。

今天，小糖分享的是Module的一些特点、基本用法。建议配合任一种官方教程及相关书籍食用，效果更佳~

一、概述

1、模块含义

一个独立文件就是一个模块，该文件内部的所有变量，外部无法获取。

2、特点

（1）ES6模块自动开启严格模式，不管你有没有在模块头部加上"use strict";。

（2）模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

（3）每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

（4）每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

二、export命令

1、含义

export命令用于规定模块的对外接口

理解：根据模块的含义，如果我们想在外部获取该文件的变量，就必须使用export关键字导出该变量。

2、语法

以一个JS文件为例，里面使用export关键字导出变量

// hero.js
var tname = '李白';
var capacity= function(){
    return tname+"的神来之笔";
}
var year = 1000;

export {tname,  capacity, year };

//推荐写法，这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

推荐写法，这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

3、规范注意

在对外输出接口时，需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

以如下代码为例

// 报错
var num = 1;
export num;

这种写法通过变量num，还是直接输出 1（只是一个值），不是接口。正确的写法是下面这样。

//正确

var num = 1;
export {num};

function和class的输出，也必须遵守这样的写法。

三、import命令

1、含义

import 命令用于输入其他模块提供的功能。

理解：使用 import，我们就可以将模块的对外接口导入所需文件中。

2、语法

将上一个JS文件export导出的变量和函数导入

/** 引用模块 **/
//index.js
import { tname,  capacity, year } from './hero.js';
console.log(tname);
console.log(capacity());
console.log(year);

3、注意

（1）引用

外部引用文件时，需声明引用脚本的类型（即在<script>标签内加type="module"），否则将会错的让你怀疑人生噢~ index.js文件的内容也可以直接写在script标签内~

如图两种形式的书写

（2）只读属性

import 命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。否则报错！（对象就可以改写属性）

（3）自动提升

import命令具有提升效果，会提升到整个模块的头部，首先执行。

    console.log(tname);
    console.log(capacity());
    console.log(year);
    import { tname,  capacity, year } from './hero.js';

上面代码中，import会自动提升至最顶部，这样写是合法的

（4）静态

模块的设计思想为静态，使得一些需要运行时才能得到结果的语法结构不能被使用，如变量使用，表达式等。

三、模块在html文件的实现

1、常见错误

新手会错误的以直接打开浏览器的方式运行，这样会出现如下错误：

2、解决方法

以服务器的方式打开浏览器，具体操作（如何以服务器方式打开浏览器）小糖已准备给大家好文章（爆肝赶制）啦~ 请移步：ES6 Module 模块服务器模式运行HTML文件_半糖冰的博客-优快云博客

3、文件实现

下面将上面两个模块在html文件中运行验证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module" src="./index.js"></script>
</head>
<body>
  <h1>hi</h1>
</body>
</html>

四、as命令

1、含义

as关键字可实现对模块内变量名的改写。

2、语法

以export模块内的变量为例（import同样的道理）

/** 定义模块 hero.js **/
// hero.js
var tname = '李白';
var capacity = function(){
    return tname+"的神来之笔";
}
var year = 1000;

export {  //原名        新名字
               tname as his_name, 
               capacity as skill, 
               year as decade
            };

重命名后，这些变量与函数可以用不同的名字输出两次。

五、export default 命令

1、唯一性

设计本意就是用来指定默认接口的

2、无需{}

通过 export 方式导出，在导入时要加{ }，export default 则不需要。

         import a from "./xxx.js"; // 不需要加{}

3、任意变量接收

export default 向外暴露的成员，可以使用任意变量来接收。

         import b from "./xxx.js"; // 可以使用任意变量接收

4、实例比较

下面比较一下默认输出和正常输出。

// 第一组
export default function capacity ()  {// 输出
  // ...
}

import capacity from 'capacity'; // 输入

// 第二组
export function capacity() { // 输出
  // ...
};

import {capacity} from 'capacity'; // 输入

上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。