首先要知道为什么要使用requirejs?
1,防止JS阻塞浏览器渲染。例如我们执行alert时，在alert代码之后的html就会停止加载页面的内容就不会在出现了。
2，防止页面加载过多JS相互依赖时，页面出现过多的<script type="text/javascript"></script>页面变丑。

这是我们需要requirejs的2大理由，还有其他一些附加功能也方便我们维护JS。


以下是使用教程

/********************以下是基本用法********************/


1， require([],fn)  //第一个参数必须是数组放索引0位置的先执行，第二个参数是回调函数也就是第一个参数里面的js加载成功后才执行。
<script type="text/javascript" src="js/require.js"></script>  //首先加载requirejs
<script type="text/javascript">
     require(["js/a"]);    //   require就相当于加载器，a其实就是a.js不能加.js


     require(["js/a"],function(){  //参数1:加载的js，参数2:参数1的js加载成功后的回调函数
       alert("load finished");
     })
</script>





2， define //定义一个模块
要想加载a.js成功a.js的代码必须用define来定义
define(function(){    

    function fun1(){
      alert("it works");
    }
    fun1();
	
}






3，加载远程文件
require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], //如果加载远程文件不成功就加载本地文件，并且自定义一个jquery.js名字
        "a" : "js/a"   //将本地的a.js自定义一个名字为a的文件
    }
})
require(["jquery","a"],function($){  
    $(function(){
        alert("load finished");  
    })
})








4，加载依赖类似jquery,underscore文件
require(["jquery","underscore"],function($, _){   //有些JS代码依赖jquery依赖JQ的代码要传递一个$，写在回调函数的参数中就行
    $(function(){
        _.each([1,2,3],alert);
    })
})







5,全局配置
上面的教程 如果想要使用自定义好的"jquery"和"a"，那就要在每一个页面加上这样类似的代码会不好看。
require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], 
        "a" : "js/a" 
    }
})
所以推荐使用以下代码写

<script data-main="js/main" src="js/require.js"></script>  

data-main="js/main"  //这里的main.js里面所写的代码将在加载完reuqire.js后处理，这里需要到data-*自定义属性所以IE7以下不支持
如果需要每个页面都要加载到的JS代码就写在main.js即可。
这里注意以下路径问题"js/main"就相当于
require.config({
    baseUrl : "js"
})
也就是说原来需要 "js/a"现在只写成 "a"就行了







6，解决不是AMD规范的JS插件、库的加载问题
requirejs是AMD规范，也就是为什么它能解决JS阻塞的原因，因为它不必去等待它依赖的组建去加载完才去运行，是异步加载。
例如：underscore类库，但是他并没有实现AMD规范，那我们可以这样配置
require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})
这样配置后，我们就可以在其他模块中引用underscore模块：
require(["underscore"], function(_){
    _.each([1,2,3], alert);
})
也可以直接手动去修改underscore.js源代码让它直接支持AMD规范。





在举例子是jquery插件常用的问题
我们会看到很多插件使用的是类似
(function( $, undefined ) {

})( jQuery );
的结构去封装插件，插件形式的非AMD模块，我们经常会用到jquery插件，而且这些插件基本都不符合AMD规范，比如jquery.form插件，这时候就需要将form插件"垫"到jquery中：
require.config({
    shim: {
        "underscore" : {
            exports : "_"    // 将“_”暴露在全局
        },
        "jquery.form" : {
            deps : ["jquery"]    //jquery.form依赖jquery的意思
        }
    }
})
也可以简写为：
require.config({
    shim: {
        "underscore" : {
            exports : "_"
        },
        "jquery.form" : ["jquery"]   
    }
})
这样配置之后我们就可以使用加载插件后的jquery了
require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})







7，加载样式

define(["require"], function(require) {
    var cssUrl = require.toUrl("./style.css");
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = cssUrl;
    document.getElementsByTagName("head")[0].appendChild(link);
});





8，加载未使用define()模块定义的JS。
c.js代码如下 （只能将所有的代码声明一个函数体中）
var wo;


function c(){
  alert('11');
}


function w(){
  alert('11');
}

-----------------------------------------

main.js代码如下

shim: {
	    c:{     //这里指的是c.js
			init:function(){
				return{
				    c0:c,   //c和w指的是函数体的名称
				    c1:w
				}
			}
		}
    },




require(['c'],function(fn){
    console.log(fn);
});

当 exports 与 init 同时存在的时候， exports 将被忽略。
/********************以上是基本用法********************/





对外提供接口


//home.js

define(['jquery'],function($){    
	function run(){ 
		  $(function(){
			  alert( $().jquery );  
		  })
	}
	
	return{
	   hello:run
	}

});



//在main.js中调用，
require(["home"],function(home){
   home.hello();
});

哪里都可以调用home.hello();只要加载就行