ES6模块化

1.模块化

1.1什么是模块化

模块化是指一个复杂的工程拆分成一个一个部分，再以拼接的方式拼接在一起

1.2模块化开发的优点

• 1.一个单独的文件就是一个单独的模块，向外展出特定的变量和函数，这样可以避免污染全局变量，减少变量命名冲突。
• 2.代码复用，让我们更方便的进行代码管理，同时也便于后面代码的修改和维护。

1.3js模块化规范

js模块化规范有：CommonJs、AMD、CMD、以及要本章要总结的ES6模块系统。

其中，CommonJs是服务端的模块规范，AMD和CMD是浏览器端的模块规范。

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

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

2.导出的语法

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

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

as关键字，可以指定变量，函数，类在模块外改成想要的名字。

2.2导出默认值

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

注意：

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

验证：

• 1. export default后面不能加声明语句，因为export default只是输出一个叫做default的变量

3.导入的语句

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

import关键字，来执行导入操作。

 3.2导入默认值

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

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

 如果写反则会报错：

 验证：

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

如果怕在一个模块之中，先导入后导出同一个模块，可以这样写

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

用一条语句完成，上述等价于： 

 

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

  5.小结

有几点要说明：

•  1.模块时自动运行在严格模式下，并且无法退出运行的js代码。即ES6的模块时自动采用严格模式，不管有没有在模块头部加上“use strict”;
• 2.在ES6的模块中，在模块顶层创建的变量旨在模块的顶层作用域中存在，不会自动被添加到全局作用域中。
• 3.在模块顶层，this的值时undefined，即不要再顶层代码使用this。
• 4.模块不支持HTML风格的代码注释
• 5.在<script>中使用模块，需要将<script>默认的将js脚本加载的行为(type="text/javacript"),改为作为模块加载。方法是将type的属性值设为“module”，即可支持模块加载。

 不过在import加载模块时，要确保两点：

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

实例

esport.js文件：

html文件：

 

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

验证：

模块的好处就在于不用把所有东西都放到一个文件中，可以通过模块导出，导入需要的东西。笔记总结了ES6中模块 module​​​​​​​中的基本语法和使用中需要注意的地方。