Node.js系列三 彻底掌握前端模块化(上篇)
1、 什么是模块化开发
1.1、 JavaScript设计缺陷
那么，到底什么是模块化开发呢？
- 事实上模块化开发最终的目的是将程序划分成一个个小的结构；
- 这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；
- 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；
- 也可以通过某种方式，导入另外结构中的变量、函数、对象等；
上面说提到的结构，就是模块；
按照这种结构划分开发程序的过程，就是模块化开发的过程；
无论你多么喜欢JavaScript，以及它现在发展的有多好，我们都需要承认在Brendan Eich用了10天写出JavaScript的时候，它都有很多的缺陷：
- 比如var定义的变量作用域问题；
- 比如JavaScript的面向对象并不能像常规面向对象语言一样使用class；
- 比如JavaScript没有模块化的问题；
Brendan Eich本人也多次承认过JavaScript设计之初的缺陷，但是随着JavaScript的发展以及标准化，存在的缺陷问题基本都得到了完善。
- JavaScript目前已经得到了快速的发展，无论是web、移动端、小程序端、服务器端、桌面应用都被广泛的使用；
在网页开发的早期，Brendan Eich开发JavaScript仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的：
- 这个时候我们只需要讲JavaScript代码写到<script>标签中即可；
- 并没有必要放到多个文件中来编写；
但是随着前端和JavaScript的快速发展，JavaScript代码变得越来越复杂了：
- ajax的出现，前后端开发分离，意味着后端返回数据后，我们需要通过JavaScript进行前端页面的渲染；
- SPA的出现，前端页面变得更加复杂：包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现；
- 包括Node的实现，JavaScript编写复杂的后端程序，没有模块化是致命的硬伤；
所以，模块化已经是JavaScript一个非常迫切的需求：
- 但是JavaScript本身，直到ES6（2015）才推出了自己的模块化方案；
- 在此之前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范：AMD、CMD、CommonJS等；
在这个章节，我们将详细学习JavaScript的模块化，尤其是CommonJS和ES6的模块化。
1.2. 没有模块化的问题
我们先来简单体会一下没有模块化代码的问题。
我们知道，对于一个大型的前端项目，通常是多人开发的（即使一个人开发，也会将代码划分到多个文件夹中）：
- 我们假设有两个人：小明和小丽同时在开发一个项目，并且会将自己的JavaScript代码放在一个单独的js文件中。
小明开发了a.js文件，代码如下（当然真实代码会复杂的多）：
// a.js
var flag = true;
if (flag) {
console.log("aaa的flag为true")
}
小丽开发了b.js文件，代码如下：
// b.js
var flag = false;
if (!flag) {
console.log("bbb使用了flag为false");
}
很明显出现了一个问题：
- 大家都喜欢使用flag来存储一个boolean类型的值；
- 但是一个人赋值了true，一个人赋值了false；
- 如果之后都不再使用，那么也没有关系；
但是，小明又开发了c.js文件：
// c.js
if (flag) {
console.log("使用了aaa的flag");
}
问题来了：小明发现c.js中的flag值不对
- 对于聪明的你，当然一眼就看出来，是小丽将flag赋值为了false；
- 但是如果每个文件都有上千甚至更多的代码，而且有上百个文件，你可以一眼看出来flag在哪个地方被修改了吗？
备注：引用路径如下：
// test.html
<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./c.js"></script>
所以，没有模块化对于一个大型项目来说是灾难性的。
当然，我们有办法可以解决上面的问题：立即函数调用表达式（IIFE）IIFE (Immediately Invoked Function Expression)
a.js
const moduleA = (function () {
var flag = true;
if (flag) {
console.log("aaa的flag为true")
}
return {
flag: flag
}
})();
// b.js
const moduleB = (function () {
var flag = false;
if (!flag) {
console.log("bbb使用了flag为false");
}
})();
// c.js
const moduleC = (function() {
const flag = moduleA.flag;
if (flag) {
console.log("使用了aaa的flag");
}
})();
命名冲突的问题，有没有解决呢？解决了。
但是，我们其实带来了新的问题：
- 第一、我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用；
- 第二、代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
- 第三、在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况；
所以，我们会发现，虽然实现了模块化，但是我们的实现过于简单，并且是没有规范的。
- 我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码；
- 这个规范中应该包括核心功能：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性；
JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，接下来我们就学习具有代表性的一些规范。
