前端模块化开发的基础知识点

前端模块化开发

一、什么是模块

模块是一个实现特定功能的文件，需要什么模块就加载什么模块

将一个复杂的程序按照一定的规则，抽离组合形成一个模块，模块与模块之间是相互独立，也有可能是相互依赖，模块内部的数据外部是不可见的，可以在模块内部进行导出（暴露），外部就可以使用了

• 模块化的好处
  1. 避免变量污染
  2. 高复用性
  3. 高维护性
  4. 方便依赖关系管理

二、模块的化的过程

• 全局function模式
  • 编码：将不同的功能封装成不同的全局函数
  • 问题： 污染全局命名空间，容易引起命名冲突，造成问题，
• namespace模式：简单对象封装
  • 作用： 解决变量污染、冲突
  • 问题： 数据不安全，在外部可以随意修改 模块内部的代码
• IIFE模式：函数自调用（闭包）
  • 作用： 数据不能随意修改，只能访问导出的内容
  • 导出内容： 传递window对象
• IIFE模式增强：引入依赖
  • 引入依赖

三、引入模块过多会遇到的问题

1. 请求过多

   引入多个模块，会产生多个请求，导致了请求变多

2. 依赖模糊

   各个模块之间依赖模糊，分不清依赖关系，一旦加载顺序有问题，就会导致错误出现

3. 难以维护

   可能会出现牵一发而动全身情况，导致项目出现严重的问题

四、模块化规范

模块化固然有很多好处，但是如果页面中引入js文件过多，就会出现以上这些问题，而这些问题可以通过模块化规范来解决

• 开发中比较流程的模块化规范
  1. CommonJS（同步模块规范）
  2. AMD（异步模块规范）
  3. CMD（普通模块规范）
  4. ES6

1. CommonJS

是一个服务器端的规范，nodejs采取了这个规范

每个文件就是一个模块，有自己的作用域，在文件中定义的数据、变量、函数等等都是私有的，对其他文件是不可见的

• 特点
  • 所有代码都运行在自己的作用域，不会污染全局作用域
  • 模块在多次加载的时候，不会重复加载，第一次加载完成后会进行缓存
  • 模块的加载顺序，按照在代码中的顺序
• 具体实现：
  • 服务器端实现（nodejs）
  • 浏览器端（需要进行打包）

2. AMD

commonjs是同步加载，也就是说，只有在加载完成时，才能进行后面的操作，而AMD则是异步加载模块，允许指定回调函数

• 具体实现： require.js
• 下载require.js 并引入 https://requirejs.org

3.CMD

整合了commonjs和AMD的特点，具体实现：sea.js

4.ES6

ES6设计思想趋向于静态化，在编译的时候就确定依赖关系

总结

• CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案。
• AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅。
• CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行。不过，依赖SPM 打包，模块的加载逻辑偏重
• ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。