【Node.js】模块化 - 2

Miroku_huang
79 阅读6分钟

什么是模块化

  • 将程序划分为一个个小的结构
  • 这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词是不会影响到其他的结构
  • 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用
  • 可以通过某种方式，导入另外结构中的变量、函数、对象等

说到JS模块化，肯定少不了CommonJS、AMD、CMD、UMD、ESM，

CommonJs规范和Node关系

  • 我们知道CommonJS是一个规范，最初提出来的是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为ComminJS，平时我们简称为CJS

    • Node是CommonJS在服务端一个具有代表性的实现
    • Browserify是CommonJS在浏览器中的一种实现
    • webpack打包工具具备对commonJs的支持和转换

  • Node对CommonJS进行了支持和实现

    • 在Node中每一个js文件都是一个单独的模块
    • 模块包括CommonJS规范的核心变量：exports，module.exports，require
    • 可以用这些变量来进行模块化开发

  • Node实现

    • exports和module.exports可以负责对模块中的内容进行导出
    • require函数可以帮助我们导入其他模块的内容

exports导出

  • exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会被导出

image.png

  • 另外一个文件中可以导入

image.png

  • 上面的操作是这样的
    • 意味着main中的index变量等于exports对象
    • 也就是require通过各种查找方式，找到exports这个对象
    • 并且将这个exports对象赋给了index变量
    • index变量就是exports对象了

module.exports导出

  • CommonJS是没有module.exports的概念的
  • Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module
  • Node中真正用于导出的其实根本不是exports，而是modules.exports
  • 因为module才是真正的导出
  • module.exports === exports

require

  • require是一个函数，可以帮助我们引入一个文件中导出的对象
  • 导入格式：require（X）
    1. X是一个Node核心模块，比如path，http，直接返回核心模块，并且停止查找
    2. X是以./或者../或者/开头的，将X当做一个文件在对应的目录下去查找
      • 如果有后缀名，按照后缀名的格式查找对应的文件
      • 如果没有，会按照以下顺序：查找文件X->X.js->x.json->x.node
      • 如果文件没有，会把X作为一个目录，查找目录下的index文件，查找x/index.js->x/index.json->x/index.node
      • 还是没有就报错了：not found
    3. 直接是一个X，并且x不是一个核心模块 会找node_modules中找，并且从文件一直往上找

模块加载机制

  • 模块在被第一次引入时，模块中的js代码会被运行一次

  • 模块被多次引入时，会缓存，最终只加载一次

    • 为什么只会加载一次是因为每个模块对象module都有一个属性：loaded，为false表示还没有加载，为trur表示已经加载

  • 如果有循环引入，那么加载顺序是什么

    • 图结构，Node采用的是深度优先算法，每个只遍历一次

CommonJS缺点

  • CommonJS加载模块是同步的

    • 同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行
    • 这个在服务器不会有事没问题，因为服务器加载的js文件都是本地文件，加载速度非常快

  • 应用于浏览器

    • 浏览器加载js文件需要先从服务器将文件下载下来，之后在加载运行
    • 那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作

  • 在浏览器中，我们通常不使用CommonJS规范

    • 当然webpack中使用CommonJS是另外一回事
    • 因为它会将我们的代码转成浏览器可以直接执行的代码

  • 在早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD

    • 但是目前一方面现代的浏览器已经支持ES Modules，另一方面借助于webpack等工具可以实现对CommonJS或者ESModule代码的转换
    • AMD和CMD已经使用非常少了

AMD规范

  • AMD主要是应用于浏览器的一种模块化规范
  • AMD是Asynchronous Module Definition(异步模块定义)的缩写
  • 它采用的是异步加载模块
  • 事实上AMD的规范还要早于CommonJS
  • 我们提到过，规范只是定义代码的应该如何去编写，只有有了具体的实现才能被应用，

AMD实现的比较常用的库是require.js和curl.js

CMD规范

  • CMD规范也是应用于浏览器的一种模块化规范:
  • CMD是Common Module Definition(通用模块定义)的缩写
  • 它也采用的也是异步加载模块，但是它将CommonJS的优点吸收了过来
  • 但是目前CMD使用也非常少了

CMD也有自己比较优秀的实现方案:SeaJS（玉伯）

ESModule

ES Module和CommonJS的模块化有一些不同之处

  • 一方面他使用了import和export关键字
  • 另一方面它采用了编译期的静态分析，并且也加入了动态引用的方式 ESModle 默认开启严格模式

export 导出

export关键字将一个模块中的变量、函数、类等导出

我们希望将其他中内容全部导出，它可以有如下的方式: = 方式一:在语句声明的前面直接加上export关键字

  • 方式二:将所有需要导出的标识符，放到export后面的中
    • 注意:这里的{里面不是ES6的对象字面量的增强写法，也不是表示一个对象的
    • 所以: export {name: name}，是错误的写法;
  • 方式三:导出时给标识符起一个别名
    • 通过as关键字起别名

import关键字

import关键字负责从另外一个模块中导入内容

导入内容的方式也有多种:

  • 方式一: import {标识符列表} from '模块'
    • 注意:这里的也不是一个对象，里面只是存放导入的标识符列表内容
  • 方式二:导入时给标识符起别名
    • 通过as关键字起别名
  • 方式三:通过*将模块功能放到一个模块功能对象(a module object)上

default用法

前面我们学习的导出功能都是有名字的导出(named exports)

  • 在导出export时指定了名字;
  • 在导入import时需要知道具体的名字 还有一种导出叫做默认导出(default export)
  • 默认导出export时可以不需要指定名字;
  • 在导入时不需要使用科，并且可以自己来指定名字
  • 它也方便我们和现有的CommonJS等规范相互操作

注意:在一个模块中，只能有一个默认导出(default export)

ES Module的解析过程

  • 阶段一：构建，根据地址查找js文件，并且下载，将其解析成模块记录
  • 阶段二：实例化，对模块记录进行实例化，并且分配内存空间，解析模块的到如何导出，把模块指向对应的内存地址
  • 阶段三：运行，运行代码，计算值，并且将值填充到内存地址中
avatar
文章
阅读
粉丝