ES6-模块化

模块化就是把代码进行拆分，方便重复利用，类似java中的导包，需要使用一个包，必须先导包，而js中没有包的概念，换来的是模块

ES6 的模块化分为导出（export） @与导入（import）两个模块。

一个页面需要引入多个js文件引发的问题

  1. 请求过多
  2. 依赖模糊
  3. 难以维护 这些问题可以通过现代模块化编码和项目构建来解决

模块化优点

  1. 避免命名冲突（减少命名空间污染）
  2. 更好的分类，按需加载
  3. 更高的复用性
  4. 高可维护性

特点

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

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

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

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

export 与 import

模块导入导出各种类型的变量，如字符串，数值，函数，类。

  1. 导出的函数声明与类声明必须要有名称（export default 导出了一个对象，没给这个对象起名字，导入的时候可以随意起名字）。
  2. 不仅能导出声明还能导出引用（例如函数）。
  3. export 命令可以出现在模块的任何位置，但必需处于模块顶层。(如果处于块级作用域内，就会报错)
1
2
3
4
function foo() {
  export default 'bar' // SyntaxError
}
foo()
  1. import 命令会提升到整个模块的头部，首先执行。

代码示例
hello.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//  export   const  util={
//     sum(a,b){
//         return  a+b;
//     }
// }

// 这两个等效
// 导出了一个对象，没给这个对象起名字，导入的时候可以随意起名字
export  default{
        sum(a,b){
            return  a+b;
        }
    }

user.js

1
2
3
4
5
6
7
8
var  name="jack"
var  age=21

function  add(a,b){
    return  a+b;
}

export  {name,age,add}

main.js

1
2
3
4
5
6
import abc  from  "./hello.js"
import  {name,add}  from  "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

标签导入

1
<script type="module" src="./main.js">

Babel

Babel是一个Javascript编译器，有些浏览器 (如 IE) 尚未支持 ES6 模块化部分语法，因此我们需要使用 babel 对其进行转化，变为浏览器可以识别的语法（ES5）。提升其兼容性。

参考链接

菜鸟教程