Module模块及用法

Module模块

概念

在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

好处：

1. 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点
2. 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性
3. 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供

特点：

1. ES6 的模块自动开启严格模式
2. 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等
3. 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域
4. 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取

回到顶部 目录

export 与 import

模块功能主要由两个命令构成：

• export命令用于规定模块的对外接口
• import命令用于输入其他模块提供的功能

模块的定义

模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码

模块可以是函数、数据、类，需要指定导出的模块名，才能被其他模块访问

// 数据模块
const obj = {name: 'he'};

// 函数模块
const fn = (a, b) => a + b;

// 类模块
class My {}

模块导出

export命令必须出现在全局作用域，不然就报错

• 给需要导出的数据、函数、类添加一个export，就能导出模块

  // 数据模块
  export const obj = {name: 'he'};
  
  // 函数模块
  export const fn = (a, b) => a + b;
  
  // 类模块
  export class My {}
  

• 可以通过as关键字给模块取别名

  // 正常情况下模块名称为obj
  export const obj = {name: 'he'};
  
  // 取别名后模块名称为module1
  export {
      obj as module1;
  }
  

• 不同的写法

  // 写法一
  export var m = 1;
  
  // 写法二
  var m = 1;
  export {m};
  
  // 写法三
  var n = 1;
  export {n as m};
  

回到顶部 目录

模块的引用

在另外的js文件中，我们可以引用上面定义的模块，使用import关键字：

• 导入指定模块：

  import {obj, My} from 'url'
  console.log(obj, My)
  

• 导入全部模块：

  import * as all from 'url'
  console.log(all.obj, all.fn, all.My)
  

• 可以通过as关键字给模块取别名

  // 现在调用url文件的fn就使用add
  import (fn as add) from 'url'
  console.log(add)
  

默认模块

将模块加上default关键字，该js文件就变成默认只导出该模块：

// 模块.js
const fn = (a, b) => a + b;
export default fn;

// 调用模块.js
import fn from 'url'

浏览器加载模块

安装顺序引用：

<script type="module" src="url1.js"></script>
<script type="module" src="url2.js"></script>

url2.js要引用url1.js里面的代码

回到顶部 目录