全面理解JavaScript模块化：CommonJS与ES6模块规范

Java Script 模块化

1. 模块化概述

1.1. 什么是模块化?

• 就是将程序文件依据一定规则拆分成多个文件, 这种编码 方式就是模块化的编码方式
• 拆分出来每个⽂件就是⼀个模块，模块中的数据都是私有的，模块之间互相隔离。
• 同时也能通过⼀些⼿段，可以把模块内的指定数据“交出去”，供其他模块使⽤。

1.2. 为什么需要模块化

随着应用的复杂度越高, 我们的其代码和文件数量都会急剧增加, 会逐渐引发以下问题:

1. 全局污染问题
2. 依赖混乱问题
3. 数据安全问题

2. 有哪些模块化规范？

历史背景(了解即可)：2009 年，随着 Node.js 的出现，JavaScript 在服务器端的应⽤逐渐增

多，为了让 Node.js 的代码更好维护，就必须要制定⼀种 Node.js 环境下的模块化规范，来⾃

Mozilla 的⼯程师 Kevin Dangoor 提出了 CommonJS 规范（CommonJS 初期的名字叫

ServerJS），随后 Node.js 社区采纳了这⼀规范。

随着时间的推移，针对 JavaScript 的不同运⾏环境，相继出现了多种模块化规范，按时间排序，

分别为：

3. 导⼊与导出的概念

模块化的核⼼思想就是：模块之间是隔离的，通过导⼊和导出进⾏数据和功能的共享。

• 导出（暴露）：模块公开其内部的⼀部分（如变量、函数等），使这些内容可以被其他模块使⽤。

• 导⼊（引⼊）：模块引⼊和使⽤其他模块导出的内容，以重⽤代码和功能

4. CommonJS 规范

4.1 初步体验

• 1.「创建 school.js」

  const name = 'NFIT'
  
  const slogan = '珠海欢迎您'
  
  function getTel() {
       
      return '101-56133123'
  }
  
  function getCities() {
       
      return ['北京','上海','深圳','成都','武汉','⻄安']
  }
  
  // 通过给exports对象添加属性的⽅式，来导出数据（注意：此处没有导出getCities）
  exports.name = name
  exports.slogan = slogan
  exports.getTel = getTel
  

• 2.「创建 student.js」

  const name = '张三'
  const motto = '相信明天会更好！'
  function getTel (){
       
   return '13877889900'
  }
  function getHobby(){
       
   return ['抽烟','喝酒','烫头']
  }
  // 通过给exports对象添加属性的⽅式，来导出数据（注意：此处没有导出getHobby）
  exports.name = name
  exports.slogan = slogan
  exports.getTel = getTel
  

• 3.「创建 index.js」

  // 引⼊school模块暴露的所有内容
  const school = require('./school')
  // 引⼊student模块暴露的所有内容
  const student = require('./student')
  

4.2 导出数据

在 CommonJS 标准中，导出数据有两种⽅式：

• 第⼀种⽅式： module.exports = value

• 第⼆种⽅式： exports.name = value

注意点如下：

1. 每个模块内部的： this 、 exports 、 modules.exports 在初始时，都指向同⼀
   个空对象，该空对象就是当前模块导出的数据，如下图：

2. ⽆论如何修改导出对象，最终导出的都是 module.exports 的值。

3. exports 是对 module.exports 的初始引⽤，仅为了⽅便给导出象添加属性，所以