目录

一、什么是模块化

二、模块化规范

三、Node.js 中的模块化    

四、ES6中的模块化

五、在 node.js 中体验 ES6 模块化


一、什么是模块化


        编程领域中的模块化,就是 遵守固定的规则 ,把一个 大文件 拆成 独立并互相依赖 的 多个小模块 。 对于整个系统来说, 模块是可组合、分解和更换的单元



        直观理解:一个页面由,html,css,js三个构成,可以写一个页面内,但不利于后期修改和复用。所以一般会分开写,并页面内进行组合




二、模块化规范



模块化规范 就是对代码进行模块化的拆分与组合时,需要遵守的那些规则。


  • 使用什么样的语法格式来引用模块
  • 在模块中使用什么样的语法格式向外暴露成员


三、Node.js 中的模块化    

默认仅支持 CommonJS 模块化规范 ,适用于服务端

Node.js 中根据模块来源的不同,将模块分为了 3 大类,分别是:

  • 内置模块(内置模块是由 Node.js 官方提供的,例如 fs、path、http 等)
  • 自定义模块(用户创建的每个 .js 文件,都是自定义模块)
  • 第三方模块(由第三方开发出来的模块,并非官方提供的内置模块,也不是用户创建的自定义模块,使用前需要先下载)
//导入内置模块
const fs = require('fs')

//导入自定义模块,后缀会自动补全
const clock= require('./clock.js')
const clock= require('./clock')


//导入第三方模块,但需要先通过npm下载
const moment = require('moment')

在对自定义模块进行导入前,需要先对自定义模块的内容进行导出。因为存在模块作用域。如果默认导入模块的全部属性或方法,则会存在全局变量污染问题。


模块存在一个model.exports 对象。

外界用 require() 方法导入自定义模块时,得到的是模块 module.exports 所指向的对象。默认为空。只有模块先使用 module.exports 对该对象传递属性或方法时,外部才能访问到内容。



注:使用 require() 方法导入模块时,导入的结果, 永远以 module.exports 指向的对象为准



// 在一个自定义模块中,默认情况下, module.exports = {}

const age = 20

// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs'
// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function() {
  console.log('Hello!')
}
module.exports.age = age

// 让 module.exports 指向一个全新的对象
module.exports = {
  nickname: '小黑',
  sayHi() {
    console.log('Hi!')
  }
}

为了简化向外共享成员的代码,Node 提供了 exports 对象。默认情况下,exports 和 module.exports 指向同一个对象。最终共享的结果,还是以 module.exports 指向的对象为准。为了防止混乱,不要在同一个模块中同时使用exports 和 module.exports

四、ES6中的模块化

ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。


ES6 的模块化主要包含如下 3 种用法:

  •  默认导出与默认导入  

                默认导出的语法: export default {默认导出的成员}

                默认导入的语法: import 接收名称 from '模块标识符'


  •  按需导出与按需导入

                按需导出的语法: export  let s1 = 'aaaa'

                按需导入的语法: import { s1 } from '模块标识符'

                注意:按需 导入的成员名称 必须和 按需导出的名称 保持一致


  • 直接导入并执行模块中的代码

                import './name.js'

单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。

五、在 node.js 中体验 ES6 模块化

  1. 确保安装了 v14.15.1 或更高版本的 node.js
  2. 在 package.json 的根节点中添加 "type": "module" 节点