前端模块化

在 ES6 之前，前端是原生不支持模块化的。但是有 requirejs（AMD规范） 和 seajs（CMD规范） 两个库可以让我们实现前端模块化。从 ES6 开始，JS 原生的支持模块化开发了。

JS 模块

在 HTML 文件中，要让一个 JS 文件，变成一个 JS 模块，只需要在通过 script 引入该 JS 文件时，添加 type="module" 的属性：

<script src="./a.js" type="module"></script>

import

在前端中，可以通过 import，在一个 JS 文件中引入另一个 JS 文件：

// a.js
import './b.js';

暴露和引入

暴露

前端模块化的暴露分为两种情况：

• 一个 JS 文件中暴露多条数据：

  export var a = 1;
  
  export function foo() {
      console.log('foo');
  }
  
  export const num = 100;
  

• 一个 JS 文件中只暴露一条数据：

  var obj = {
      a: 1
  }
  
  export default obj;
  

引入

由于前端的暴露分为了两种情况，所以引入时需要根据暴露的情况来分别进行引入：

• 暴露多条数据，引入时：

  import { a, foo, num } from './05-b.js';
  console.log('a', a);
  foo();
  console.log('num', num);
  

  注：引入的数据名，必须和暴露的数据名统一。

• 只暴露一条数据，引入时：

  import foo from './05-b.js';
  console.log(foo);
  

  注：引入时不需要大括号，引入的数据名可以任意命名。

  模块化总结

  1. 模块化：在应用中，将每一个 JS 文件都看作是一个独立的模块，都拥有自己独立的作用域。每一个模块中的数据都是私有的，默认情况，模块之间都不能进行互相的访问。

  2. 模块化的规范：

     • 在浏览器端，JS 遵循的是 ECMAScript 规范；
       • 在 ES6 之前，还有 AMD 和 CMD 两个前端模块化规范；
     • 在 Nodejs 端，JS 遵循的是 CommonJS 规范；

  3. 暴露和引入

     • 前端：
       • 暴露：export / export default
       • 引入：import … from …
     • 后端：
       • 暴露：module.exports
       • 引入：require()