requireJS的使用

由于浏览器的是单线程的,在加载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);
        }
    }
});