模块化的标准
有了模块，我们就可以更方便地使用别人的代码,想要什么功能，就加载什么模块。这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！ 【螺丝与螺帽】
- CommonJS：是一个模块化的标准，Node.js在使用的模块化标准。适用与后端开发的标准。
- AMD（Async Module Definition）：在CommonJS基础上衍生出来的适用于前端开发的模块化标准。
- 特点：预加载，第一次访问时，将所有的文件都加载出来。
- 优点：第一次访问完成以后，再次访问速度会很快
- 缺点：第一次加载，需要的时间会比较长
- 代表：requirejs
- CMD（Common Module Definition）：在CommonJS基础上衍生出来的适用于前端开发的模块化标准。
- 特点：懒加载，只有使用到的时候，才会加载对应的模块。
- 优点：第一次访问速度会比较快
- 缺点：再次访问其他模块时会比较慢。
- 代表：seajs
require.JS
require.js概念
requirejs是AMD规范的一个实现，require.js是一个javascript文件，也是一个模块加载器。模块加载器：相当于canvas中封装的图片加载器，只不过一个是加载图片的，一个加载js，文件的类型不一样。
requirejs主要提供两大功能：
- 加载模块：可以加载AMD规范的模块，也可以是普通的模块，异步加载，并且能够管理模块之间的依赖。
- 规范了模块的定义：有助于不同模块之间的共享与依赖。
requirejs的优点：
- 提高了javascript文件的加载速度，避免不必要的堵塞。
- 独特的模块定义方式可以避免全局变量污染。
- 独特的模块定义方式可以在脚本层面声明模块之间的依赖。
requirejs初体验
一、引入js文件
<!--1. 引入require.js文件-->
<script src="require.js"></script>二、定义模块
//在a.js文件中
console.log("a模块加载了");三、引用模块
//require会自动找当前目录下的js文件，a是文件名，不能写后缀。
require(["a"]);API详解
requirejs一共对外暴露三个全局变量
- requirejs - 用于加载模块
- require - 用于加载模块
- define - 用于定义模块
require和requirejs是同一个函数，类似于$和jQuery的关系
require加载模块
- 作用：加载模块（amd模块或者是普通模块）
- 加载普通模块，模块加载完是会执行一遍的。
//第一个参数：数组，需要加载的模块，异步加载的
//第二个参数：回调函数，在模块都加载完毕之后，回调函数才会执行
//require(["js/a", "js/b", "js/c"]);
require(["js/a", "js/b", "js/c"],function () {
console.log("我是最后执行的");
});define定义模块
使用define函数可以定义一个AMD规范的模块
//第一个参数：模块的依赖
//第二个参数：模块的主体
define([], function () {
console.log("a模块加载了");
});好处：require独特的定义方式，避免了全局变量的污染。
模块之间的依赖
在使用define定义一个模块时，如果模块依赖于另一个模块，我们可以通过define的第一个参数去指定。
//第一个参数：本模块依赖的模块列表 路径是以html的路径为基准
//第二个参数：模块的主体
define(["js/a"], function () {
console.log("a模块依赖与b模块");
});优点：可以在声明模块的时候就可以定义好依赖，那么使用的时候，就不用在管模块之间的依赖了。使用起来会更加的方便。
模块的输出（对外暴露的东西）
如果模块仅仅是执行一些代码实现某个功能，那么直接引入该模块，实现对应的功能即可，不需要返回值。如果该模块的存在是为了提供一些方法、对象或者其他一些内容，那么这个模块需要返回值。
在定义模块的时候，我们通常需要对外返回一些内容，因为使用define定义模块，实质就是一个函数，因此可以使用return返回模块的输出。
define([], function () {
var util = {
sayHello:function (name) {
console.log("大家好，我是"+name);
},
sleep:function () {
console.log("好困啊，我想要睡觉");
}
};
//通过return返回模块的输出
return util;
});想要获取模块的输出，在function中传递形参即可。
//参数1：加载的模块列表
//参数2：模块加载完成后，会执行的回调函数,形参就是模块的返回值
require(["b"], function (util) {
util.sayHello("张三");
util.sleep();
});如果依赖于多个模块，应该怎么办？
//1. 如果依赖于多个模块，并且多个模块都有输出，那么我们需要使用参数一一对应，
//2. 这样就可以获取到多个模块的输出了。
//3. 即便某个模块没有输出，我们也要指定一个参数占着位置。
//4. 通常我们会把有输出的模块写在前面，没有输出的模块写在后面。这样方便写参数。
require(["js/util", "js/common", "js/test"], function (util, demo) {
console.log(util);
console.log(demo);
});配置路径和别名
- 使用require来加载某个模块时，路径会以当前html文件作为参考。
- require可以使用config来配置一些内容，比如基础路径
require.config({
//1. 配置所有模块的基础路径，该路径相对于引入了requirejs的html文件的路径。
//2. 所有的路径都会自动的拼上baseUrl
baseUrl:"js/",
//1. 给模块起别名，方便使用，在依赖的模块中也能使用
paths:{
"common":"common/common",
"util":"util/util",
"test":"login/test"
}
});
//引入模块时，只需要直接引入模块的别名即可。
require(["common", "util", "test"],function (demo, util) {
console.log(demo);
console.log(util);
});加载非AMD规范的模块
requirejs可以通过require函数加载模块。在加载不是AMD规范的模式时，会出现问题，需要做特殊的处理。
市面上有很多模块，并没有实现AMD模块化规范，没有实现模块化的模块也可以使用requirejs去加载，但是require加载时，仅仅会执行这个js文件，并不能帮助这个模块实现依赖的加载，也无法获取到这个模块的输出。
我们可以通过require.config为没实现AMD规范加载依赖项。
require.config({
baseUrl:"js/",
path:{
"base":"base"
},
//垫：配置普通模块的依赖与输出
shim:{
"base":{
//配置普通模块的依赖项
deps:["依赖项1","依赖项2"],
//配置模块的输出
exports: "输出结果"
}
}
});使用模块化加载jquery
想使用模块化加载第三方库的时候，首先需要检查第第三方库是否支持模块化。
{% asset_img jquery.png [模块化] %}
如上图，说明这个第三方库是支持模块化的，可以直接使用require进行加载。
具名模块与匿名模块
define声明时，第一个参数可以是该模块的名字，如果声明了模块名，在配置时，模块别名就不能够调整了。