【VUE】前端模块化

为什么要学习前端模块化

因为前端模块化是学习VUE框架的基础，而笔者最近正在攻略VUE这座大山，所以了解前端模块化的知识必不可少。

走进前端模块化

是什么

首先要说明，前端模块化开发并不是一种编程技术，而是一种编程思想。通过将复杂代码划分为不同功能模块，对不同功能模块进行单独维护，来提升效率，降低成本。

为什么

学习前端模块化，我们需要了解

1. 为什么会出现前端模块化这种思想
2. 这种编程思想解决了前人编程的哪些痛点

我们才能更好的理解这种思想的先进和带来的方便。

1. 为什么会出现前端模块化这种思想
早期的前端页面都比较简单，就是使用java script进行表单交互，js的组织结构也比较凌乱。而且前后端代码也没有进行分离，前端代码经常和后端的操作搅在一起。因为这样凌乱的，难以维护的方式肯定不利于企业的维护，也不利于代码的复用。所以慢慢的出现了前后端分离和前端的模块化。

2. 前端模块化的优点

• 可维护
• 可复用
• 方便管理依赖关系（当不同模块/类之间的执行有顺序关系，通俗的说前一个的输出是后一个的输入时，我们需要确保模块/类按顺序执行）
• 分治思想（将一个N规模的问题分为n个a规模的问题）
• 减少全局变量污染（当声明了一个全局变量，当在其他文件中出现同名的变量时，会产生冲突）

怎么做

为了统一不同开发项目和开发者之间的编程习惯，推出了前端模块化规范。现在有四种模块化规范方案可供同学们选择。

commonJS模块化规范方案

在node.js（一个使JavaScript能够脱离浏览器运行的环境，采用了chrome v8 JavaScript引擎，支撑ES6标准）推出后，在最开始的一段时间内只支持commonJS模块化规范。（node.js是commonJS的实现，在commonJS规范的基础上增加了自己的一些新特性实现了自己的模块化系统。先有的commonJS，再有的node,js，node.js将commonJS发扬光大），AMD，CMD等方案都是基于commonJS的发展。commonJS是应用最广泛的模块化规范

AMD模块化规范方案

CMD模块化规范方案

UMD模块化规范方案

ESM模块化规范方案（重要）

ECMAScript 6(ES6)推出的模块化方案，是写在ECMA规范里面的，主要就学这个规范就好，是模块化的标准。