一、模块化的由来

在没有模块化思想之前，我们总是将大量的逻辑代码写在一起，这样的代码杂乱无章，没有条理性，不便于维护，不利用复用。并且很多代码重复，逻辑重复。甚至造成全局变量污染，也不方便保护私有数据。
为了解决上面的问题，模块化的编程思想应运而生。
模块化的基本思想就是：闭包自调用函数

二、模块化的规范

1.CommonJs

CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，也是Node中使用的模块化解决方案。

CommonJS是一个有志于构建 JavaScript 生态圈的组织。它有一个 邮件列表,很多开发者参与其中。整个社区致力于提高 JavaScript 程序的可移植性和可交换性，无论是在服务端还是浏览器端。

2.CMD

CMD : common module define，CMD其实是阿里一位大神编写的seajs中提出的模块化解决方案。其实CMD可以看成是CommonJS的前端实现。
在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition）模块定义规范。该规范明确了模块的基本书写格式和基本交互规则

在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：

define([],function(){});

define `Function`

define 是一个全局函数，用来定义模块。

3.AMD

AMD(Asynchronous Module Definition)翻译为异步模块定义。异步强调的是，在加载模块以及模块所依赖的其它模块时，都采用异步加载的方式，避免模块加载阻塞了网页的渲染进度
AMD：async module define：异步模块定义。

三、require.js基本用法

我们先创建一个index.html的页面，引入require.js模块路径
在前面加上defer之后在页面加载之前不会运行JavaScript脚本
而加上async是为了让脚本变成一个异步

    <script defer async="true" data-main="js/main.js" src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script>

然后创建一个main.js做为js文件中的主文件也可以成为入口文件,这样的一个模板

require([],function(){})

然后再创建一个head.js和center.js做为分模块

这是center.js\

然后是head.js\

然后我们使用main.js文件依赖一下head.js和center.js 调用一下他们return暴露的返回值

输出的结果:

如果说这个模块还依赖其他的模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性要打引号''。

define(['myLib'], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

javascript模块化之require.js