前端必会node-模块化

193 阅读2分钟

006APoFYly8gv6zhe3q97j60rn0rn76402.jpg

啥是模块化?

一个js文件可以引入其他的js文件,能使用引入的js文件的中的变量、数据,这种特性就称为模块化。

使用模块化开发可以很好的解决变量、函数名冲突问题,也能灵活的解决文件依赖问题。

模块化的发展

  • 以前
    es5不支持模块化,让前端人员很为难。为了让支持模块化,我们一般会借用第三方库来实现:
  • 现在
    • es6原生语法也支持模块化(并不表示浏览器也直接支持模块化 --- 需要单独设置一下)
    • Nodejs内部也支持模块化(与es6的模块化有些不同之处),具体的语法在后面来介绍。

常见的模块化规范有

  • CommonJS 规范(nodejs 默认支持的)
  • ES6 模块化规范
  • CMD 和 AMD 模块化规范(不再推荐使用)

Node.js 中的 CommonJS 的模块化规范

CommonJS 规范

CommonJS 规范中主要规定了以下 3 项内容:

  • 导入其它模块时,统一使用 require() 函数。
  • 每个 .js 文件,都是一个独立的模块,模块内的成员都是私有的。
  • 在每个 JS 模块中,使用 module.exports 向外共享成员。

image.png

注意

  • module.exports 是固定写法,一般放在文件的最末尾,也只用一次。
  • module.exports表示当前模块要暴露给其它模块的功能。
    • 它可以导出对象,数组,函数等等类型。为了方便组织代码,导出对象的情况比较多。
    • 不必要导出所有函数,对象,数组等。那些没有导出的部分就相当于这个模块的内部变量了。在下图中变量1,函数1,数组就是模块内部的数据,在外部无法别访问到。

    自定义模块

背景

我们对代码的封装是以模块(一个独立的.js文件)为单位进行的。一般的做法是实现好某一个功能之后,封装成一个模块,然后在其它文件中使用这个模块。

类比于js自定义函数,自定义模块的使用场景是:

  • 代码需要在项目重用
  • 代码需要提供给他人使用
  • 代码虽然不需要重用,但封装成模块有利于优化代码结构,方便后期维护与扩展

步骤

一共有两步:

  1. 定义模块。就是创建一个js文件, 对外导出我们希望导出的内容。
  2. 使用模块。在需要使用的地方去导入模块文件。