RequireJS 学习笔记(一)
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。
RequireJS是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。
主要目的还是为了代码的模块化。解决了两个问题:
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。
1.基本API
require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短。
- define 用来定义一个模块
- require 加载依赖模块，并执行加载完后的回调函数
- config该函数用于配置RequireJS.
例如，define函数定义了一个模块，然后再页面中使用：
//a.js
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
//index.js
require(["js/a"],function(){
alert("load finished");
})注意:require中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义.
requir API的第二个参数是callback，一个function，是用来处理加载完毕后的逻辑.
2.加载JS文件
它鼓励在使用脚本时以module ID替代URL地址，以一个相对于baseUrl的地址来加载所有的代码
RequireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上再加”.js”后缀，RequireJS在进行module ID到path的解析时会自动补上后缀。
例如，要么将所有的脚本都放置到baseUrl中，要么分置为项目库/第三方库的一个扁平结构：
//index.html
<script data-main="js/app.js" src="js/require.js"></script>
//app.js
requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
}
});
requirejs(['jquery', 'canvas', 'app/sub'],function($,canvas,sub) {
});require函数用于加载模块依赖但并不会创建一个模块。
3.data-main入口点
require.js 在加载的时候会检察data-main 属性。require.js使用它来启动脚本加载过程。
data-main需要给所有的脚本文件设置一个根路径。根据这个根路径，RequireJS将会去加载所有相关的模块。
4.定义模块
模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入。
4.1 存在依懒关系的函数定义
如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块。
依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表一 一对应。
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);5.shim
通过require加载的模块一般都需要符合AMD规范(使用define来申明模块)，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim。专门用来配置不兼容的模块。
具体来说，每个模块要定义：
（1）exports值（输出的变量名），表明这个模块外部调用时的名称；
（2）deps数组，表明该模块的依赖性。
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : {
deps : ["jquery"]
}
}
})6.require.config配置函数
- baseUrl——用于加载模块的根路径。
- paths——用于映射不存在根路径下面的模块路径。
- shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。
- deps——加载依赖关系数组