前端模块化发展历史

234 阅读2分钟

随着前端项目越来越大,项目越来越难维护。早期出现的不同的功能存放在不同的文件。使用挂载到全局对象, 使用命令空间, 使用闭包保护私有变量。这些大都是一些君子协定,到最后还是越来越难以维护。

早期所有的模块都需要我们手动单独引入。模块的加载并不受代码的控制,如果有哪块没有引入就会报错。人之长情有谁不会犯错的呢。作为工程师来说这并不是我们逃避的借口。

在nodejs提出了一套模块化规范CommonJS规范

  • 一个文件就是一个模块
  • 每个模块都有一个单独的作用域
  • 通过module.exports导出成员
  • 通过require函数载入模块
  • CommonJS是以同步的模式加载模块
  • 在启动时候加载模块,执行得到时候不需要加载的只需要使用

早期前端根据浏览器的特别重新设计了一套浏览器的规范,异步加载模块 AMD(Asynchronous Module Definition) 推出了Require.js,实现了AMD这个规范。是强大模块加载器。 Require: 约定: 加载模块必须define定义一个模块

  • 第一个参数是模块的名字: string
  • 第二个参数是数组是依赖的额模块: Array
  • 第三个参数是一个额回调函数,回调函数的参数对应着依赖的个数:function
  • 回调函数通过return的方法返回这个模块的成员。

require函数自动加载这个函数:

  • 第一个参数是一个数组: 里面对应着每个模块

  • 第二个参数是一个回调函数:参数是这个模块。

  • AMD使用起来相对复杂

  • 模块js请求频繁。