前言
在其他编程语言中，我们可以通过划分模块，来组织庞大复杂的项目，而JS一开始并没有模块的概念，因为一开始JS的脚本就很简单。
后来随着JS的发展，前端要开发的项目越来越复杂，也越来越大型，因此需要更好的代码组织方式，于是JS也引入了模块功能，比如AMD,UMD,CommonJS等等不同的模块加载方式。
而在ES6规范中，也引入了官方的模块加载方式，也就是我们下面要讨论的知识。
什么是模块
在JS中，一个文件或者脚本就是一个模块，模块可以声明哪些变量或函数供外部使用，也可以引入其他模块的变量与函数为自己所用，在模块中，使用export标记了可以从当前模块外部访问的变量和函数，使用import从其他模块导入所需要的功能，如：
hello.js
//声明当前模块可以被其他模块使用的变量
export function sayHello() {
alert('Hello');
}
main.js
//导入其他模块的变量
import {sayHello} from './hello.js';
alert(sayHello);
sayHello();
在浏览器中使用模块
在支持ES6规范的浏览器中，可以使用用script type="module"></script>标签可以声明模块或者导入其他模块，如：
<!doctype html>
<script type="module">
import {sayHi} from './say.js';
document.body.innerHTML = sayHi('John');
</script>
“
其实，目前前端项目开发中，并不会使用上面这种在浏览器中使用模块的方式，我们一般是创建一个工程项目，再通过webpack这类的构建工具解析各个模块的导出与依赖，最终打包上线的。
”
模块的特性
现代模式
模块的代码始终默认使用现代模式use strict，例如对一个未声明的变量赋值或者重复声明变量都将产生错误。
<script type="module">
test = 5; // 未声明就使用，报错
let a = 1;
let a = 2;//重复声明，报错
</script>
作用域
每个模块都有自己的顶级作用域，也就是说，一个模块中的顶级作用域变量和函数在其他模块中是不可见的,如：
<script type="module">
let a = 10;
</script>
<script type="module">
alert(a)//报错，a is not defined
</script>
上面的示例中，如果把type=module去掉，变成非模块代码，则可以正常运行。
模块代码解析
如果同一个模块被导入多次，那么它的代码只在第一次导入时便解析运行,比如下面的示例中，只会弹窗一次：
hello.js
alert(1);
index.html
<script type="module" src="./hello.js"></script>
<script type="module" src="./hello.js"></script>
this的值
在JS模块中，this关键字的值undefined，非模块脚本的顶级 this 是全局对象，比如浏览器的window。
非模块代码
<script>
alert(this)
</script>
模块代码
<script type="module">
alert(this)//undefined
</script>
export
export命令用于模块内部导出可供外部使用的变量，导出的方式有：
在声明前导出
可以在变量或函数声明加上export命令，便可以直接导出该变量或函数，如：
export function sayHello(){
return "Hello";
}
export let a = 1;
导出与声明分开
也可以在声明之后，再使用export命令进行导出，不过这时候，导出的变量需要用花括号{}包括起来，如：
//声明
function sayHello(){
return "Hello";
}
//导出
export {sayHello};//正确
//export sayHello;错误
也可以同时导出多个变量，如：
function sayHello(){
return "Hello";
}
const username='test';
export {username,sayHello}
默认导出
如果直接使用export导出，则使用者必须知道模块导出的变量名称，否则就无法加载，因为使用者需要先了解你的模块代码，但如果想让使用者直接使用而不用了解你的代码，则可以使用export default来指定模块的默认输出。
hello.js
export default function(){
return "hello"
}
main.js
import sayHi from './hello.js';//导出默认输出时，可以自定义变量的名称
sayHi();
导出时给个别名
在导出的时候，可以使用关键字as给导出的变量重新命名，如：
function sayHello(){
return "Hello";
}
export {sayHello as sayHi}
import
import命令用于在当前模块中导出其他模块的可用变量与函数。
整体导入
如果要导入一个模块的全部变量与函数，可以使用*导出全部,但这种不按需导入的方式，可以会导入很多你不需要的东西，因此一般不推荐使用：
import * from './hello.js'
另外，可以使用as关键字给整体导出起一个别名，如：
import * as say from './hello.js';
say.hello();
按需导入
如果我们只需要导入其他模块的部分功能，则可以使用花括号{}来指定要导出的变量与函数，如：
import {sayHi,sayHello} from './hello.js';
导入时给个别名
在导入的时候，也可以使用关键字as给导入的变量与函数起个别名，如：
import {sayHi as hi, sayBye as bye} from './hello.js';
导入模块的默认导出变量时，则不需要使用花括号，如：
import sayHi from './sayHi.js'; //sayHi.js模块中有使用export default导出的变量或函数
小结
JS模块可以让我们把一个很大的前端项目拆分一个个JS小文件，然后再通过构建工具将这些文件组织起来打包运行，因此JS模块的使用，也是前端程序员的必须掌握的知识，希望通过这篇文件能让你对这方面的知识有更加深入的了解。
原文始发于微信公众号（程序员读书）：【前端入门】深入了解JavaScript Module
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/39075.html
