前端模块化的简单综述（一）

刚学前端的时候，曾有一段时间很迷糊，不知道为啥突然从html文件、js文件和css文件三件套，变成需要打包在服务器才能用了。这种不明白感，随着使用vue，weex等框架逐步熟练之后，降低不少。但依然不知道，这一路究竟发生了什么。

  故在此，梳理整个前端模块的发展过程，为自己的疑惑提供一个完满的解答。（有不少内容来自对网络上一些大神的博客整理，本文会在文章最后做出引用和感谢）

---

目录

         0，模块的定义

1，前端最开始的处理

2，前端为什么需要模块化

3，common JS规范

4，AMD规范

5，CMD规范

---

---

 

0，模块的定义

  模块和模块化：

    模块：

在软件系统设计中，模块是一个拥有明确定义的输入输出和特性的程序实体。如果模块的所有输入都是实现功能必不可少的，所有输出都有动作产生，那么该模块即成为具有明确意义的模块。也就是说，如果少了一个输入，模块就不能实现全部功能，它没有不必要的输入，每个输入都用于产生输出，每个输出都是模块执行某一功能的结果，没有未经模块的转换就变成输出的输入。

总的来说，一般模块具有以下几种特征：

1. 接口，模块的输入输出
2. 功能，指模块实现的功能，有什么作用
3. 逻辑，描述模块内部如何实现需求及所需数据
4. 状态，指该模块的运行环境，模块间调用与被调用关系。

模块化：

    模块化就是将程序划分成若干个独立的模块，每个模块完成一个特定子功能，每个模块即相对独立，又相互联系，他们共同完成系统指定的各项功能。 模块化的目的是为了降低软件的复杂性。对软件进行适当的分解，不但可以降低复杂性，而且可以减少开发工作量，从而降低软件开发成本。

---

1, 前端最开始的处理：

        最自然的写法：

function foo(){
    //...
  }
  function bar(){
      //...
  }

而只将相关的代码放一起这种写法缺点很明显：

  1：大量的函数名会"污染"全局变量，无法保证不与其他模块发生变量名冲突，

  2：模块成员之间的关系不能清晰看出。

  3：没有私有变量和方法等。

 

针对问题1：和2：，可以用对象来缓解。

 var moduleA = {
    foo : function () {},
    bar: function () {}
  }

但是，这样的写法会暴露所有模块成员，内部状态