目录
前言
模块存在的必要性，使得大型的程序可拆分成各个相互依赖的文件，再搭积木般的拼成一个大型的程序，如果没有这项功能，将对开发大型的项目构成巨大障碍。在此之前，平替模块功能的主要是最主要的有 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文件_半糖冰的博客-CSDN博客
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语句需要使用大括号。
结束语
希望本篇文章可以帮到求知若渴的众多同学吖~ 这篇文章及附属文章属实花费了不少功夫吖！若能帮到 也欢迎点赞、收藏、关注，小糖后续也会持续发布新文章，祝大家学有所成！！！
欢迎各位前端大佬留言讨论指教！ 小糖谢谢各位啦~❤ ❤ ❤ ❤
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
