由于浏览器的是单线程的,在加载script标签时会打断,模块的加载.同时,模块间的依赖需要按顺序加载才能正常执行.为了解决这些问题,可以通过使用AMD模块中的requireJS使模块和它的依赖可以被异步的加载,并且按照正确的顺序.
使用requireJS的步骤
1.新建一个项目
2.在index.html中导入require.js文件,
在其script标签中使用data-main属性,
指定main.js,即设置全局变量配置文件的js文件
<script defer async="true" type="text/javascript" src="./require.js" data-main="./main.js">
</script>
/*
html中的script标签在加载和执行过程中会阻塞网页的渲染，
所以一般要求尽量将script标签放置在body元素的底部，以便加快页面显示的速度，
还有一种方式就是通过异步加载的方式来加载js，这样可以避免js文件对html渲染的阻塞。
defer和async，defer这个属性在IE浏览器和早起的火狐浏览器中支持，
async在支持html5的浏览器上都支持，
只要有这两个属性，script就会以异步的方式来加载
data-main需要给所有的脚本文件设置一个根路径。
根据这个根路径，RequireJS将会去加载所有相关的模块
*/
3.对main.js进行配置
require.config({
baseUrl:"",
paths:"",
})
/*
baseUrl——用于加载模块的根路径。
paths——用于映射不同根路径下面的模块路径。
RJ默认采用一种baseUrl + moduleID的解析方式，这个解析方式后续会举例说明。
这个baseUrl非常重要，RJ对它的处理遵循如下规则：
在没有使用data-main和config的情况下，baseUrl默认为当前页面的目录
在有data-main的情况下，main.js前面的部分就是baseUrl
在有config的情况下，baseUrl以config配置的为准
上述三种方式，优先级由低到高排列。
RJ默认按baseUrl + module ID的规则，解析文件，并且它默认要加载的文件都是js，
所以你的module ID里面可以不包含.js的后缀，
这就是为啥你看到的module ID都是lib/foo, app/bar这种形式了。
有三种module ID，不适用这种规则：
以/开头，如/lib/jquey.js
以.js结尾，如test.js
包含http或https，如[http://cdn.baidu.com/js/jquery.js](http://cdn.baidu.com/js/jquery.js)
这三个module 都不会根据baseUrl + module ID的规则来解析,而是直接用module ID来解析
<script src="/lib/foo.js"></script>
<script src="test.js"></script>
<script src="http://cdn.baidu.com/js/jquery.js"></script>
*/
4.配置main,或者其他文件的define,(js模块的使用)
define([dependencies], function(id){
})
或者
define(funciton (require, exports, module)){
require("ccs!./a.css")
var a = require("text!./a.html")//自定义依赖模块的调用
module.exports={
"a":a;
"b":function(){}
}
}
define(id?, dependencies?, factory);
其中：
id: 模块标识，可以省略。
dependencies: 所依赖的模块，可以省略。
factory: 模块的实现，或者一个JavaScript对象
RJ建议所有模块都不要使用第一个参数，
如果使用第一个参数定义的模块成为命名模块，
不适用第一个参数的模块成为匿名模块，
命名模块如果更名，
所有依赖它的模块都得修改！
第二个参数是依赖数组，
跟require一样，如果没有这个参数，
那么定义的就是一个无依赖的模块；
最后一个参数是回调或者是一个简单对象，
在模块加载完毕后调用，
当然没有第二个参数，最后一个参数也会调用。
5.调用backbone.js underscore.js
配置路由文件
define(["backbone"],function(backbone){
var Router = backbone.Router.extend=function(){
routes = {
"a":"a1", // ID为a的标签对应的名a1的方法
"b":"b1",
"*action": "defaultAction"
},
a:function(){}
})
/*
创建一个路由对象
*/
new router();
6.在main.js中启动路由
require(['jquery','backbone','./router.js'],function($,Backbone){
Backbone.history.start();
})
PS:循环依赖：
当一个模块foo的依赖数组中存在bar，bar模块的依赖数组中存在foo，就会形成循环依赖
define(['require', 'foo'], function(require, foo) {
return {
name: 'bar',
hi: function() {
foo = require('foo');
console.log('Hi! ' + foo.name);
}
}
});
define(['require', 'app/bar'], function(require, bar) {
return {
name: 'foo',
hi: function() {
bar = require('app/bar');
console.log('Hi! ' + bar.name);
}
}
});
