AMD规范

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。例如：

require(["fun"], function(fun) {
		console.log("content finish...")
		fun.fun();
	});

为什么要用requirejs

首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长
由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

所以requirejs就是解决这个两个问题的，实现js的异步加载，管理模块之间的依赖性

require的用法：

1. 引入requirejs

2. 设置入口文件

data-main用于设置requirejs的入口，这个文件会被requirejs第一个加载，可以省略.js后缀

3. 配置

在js/main中配置requirejs

require.config({
	baseUrl : 'js',
	paths : {
		'util' : 'util/util',
		'server' : "util/server"
	},
	shim : {
		
	}
});

baseUrl用于设置requirejs的根路径，如util的完整路径就是js/util/util.js

几种配置的情况：

配置远程服务器的文件

paths: {
		"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
		sendReq: "../lib/sendReq",
		vue: ['https://cdn.bootcss.com/vue/2.2.2/vue']

	}

jquery配置，如果远程服务器访问不到，则访问本地的js/jquery

非AMD规范的的模块，可以这样配置

require.config({
	paths : {
		underscore : "js/underscore"
	},
    shim: {
        "underscore" : {
			deps: ['underscore', 'jquery'],
            exports : "_";
        }
    }
})
require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

deps:表名模块的依赖，exports表名外部调用时候的名称

4.定义模块

define(function(){
	var fun = function(){
		console.log("call fun...");
	}
	
	return {
		fun : fun
	}
})

5. 使用

require(["util"], function(fun) {
		console.log("load finish...")
		fun.fun();
	});

回调函数中的fun就是util模块导出的对象

注意

需要注意的是，requirejs的默认路径的几种情况
1. 如果不配置入口文件，那么如果调用require(['util'])，requirejs的默认目录为自身目录，就是说requirejs会从自身目录下读取util.js
2. 如果不配置baseUrl，那么默认目录是入口文件所在的目录
3. 配置了baseUrl，默认目录是baseUrl
如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档的脚本：
1. 以".js"结尾；
2. 以"/"开头；
3. 包含URL协议，如"http:"、"https:"
关于data-main加载的问题

你在data-main中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

require单页面用法

console.log("config...")
require.config({
	//baseUrl : 'js',
	paths : {
		'util' : 'util/util',
		'server' : "util/server"
	},
	shim : {
		
	}
});

require(['util'], function(util){
	util.fun();
});

require的多页面用法

多页面使用时，可以服用config的配置，但是就需要在页面引入页面对应的js，例如：

<script data-main="js/require-config" src="https://cdn.bootcss.com/require.js/2.3.5/require.js"></script>
		<script src="js/module/index.js" type="text/javascript" charset="utf-8"></script>

但是因为data-main是异步加载，所以如果在index.js使用require的时候，可能require-config还没加载，所以导致加载失败，所以需要去掉data-main，并且在index.js中这样写，例如：

require(['js/require-config'], function() {
	require(["util"], function(fun) {
		console.log("load finish...")
		fun.fun();
	});
});

具体api参考：点击打开链接

requirejs的使用