前端的模块化发展

模块化与组件化的区别

1. 模块化解耦复杂度，即将功能分成小块
2. 组件化我理解为可复用的功能，比如写一个轮播组件，基于Vue框架的UI组件库中的一个组件
3. 以下主要讨论模块化的历史

最初

在一个index.html里的script块里我们直接写很多js代码

随后

用引入一个js文件替代这种方式。在js文件里的代码不断增多时，可以把一个js中不同功能的部分抽离出来，写成多个js文件。

1. MVC

一个js文件中的代码又可用MVC来设计，具有很好的可读性。

2. 依赖顺序

这种方式下，依然需要用script方式引入多个js文件，严重依赖于引入顺序，若b模块依赖a模块，则顺序错误时便会出错。
import export的方式解决了这一问题，明确了每部分模块的依赖关系。

Node.js出世

适用于服务器端的规范——CommonJs

• 使用require来获取依赖模块
• 不能用于浏览器端

浏览器端的模块解决方案

1. AMD（Asynchronous Module Definition）规范

• 非原生
• RequireJs实现

2. CMD（Common Module Definition）规范

• 玉伯，自立门户
• 非原生
• SeaJs实现

3. AMD和CMD差异

• 主要在于何时加载和运行依赖项？
• AMD 声明依赖后即将依赖模块运行
• CMD在需要依赖时才会运行依赖模块。

统一规范

CommnJs，RequireJs，SeaJs，众多规范看起来实在头疼，好在es6要解决模块问题了

1. ES6Module

在之前众多非原生解决方案后，ES6提出module模块，以export，import方式来解决依赖问题。
但是目前浏览器还未支持，因此不能直接运行。一般使用babel将其转为浏览器能运行的版本（向过去转换）

2. 特性

• ES6中，import引入的依赖在编译时加载或称为静态加载

Ref

• js模块化历程
• JavaScript模块化开发的演进历程