require js

js通过script标签的默认加载方式是同步的，即第一个script标签内的js加载完成后，才开始加载第二个，以此类推，直至js文件全部加载完毕。且js的依赖关系必须通过script的顺序才能确保；而在js加载期间，浏览器将停止响应，这大大影响了用户体验，基于此，很多解决js以来和加载的方案出现,require js就是其中之一。

requirejs加载的模块，一般为符合AMD标准的模块，即用define定义，用ruturn返回暴露方法、变量的模块；requirejs也可以加载飞AMD标准的模块，但比较麻烦，这次不涉及。

require加载js主涉及以下方面：

• script 标签data-main属性声明requirejs加载的入口模块，async="true"(非ie) 和defer(ie)标签表明异步加载。
• require.config配置模块对应的路径
• require声明依赖关系

html demo

<script src ="js/require.js" defer async="true" data-main="js/main" >
<!--给出requirejs路径，声明为异步加载，指定入口模块为main.js（可省略.js）-->

main.js

  require.config({
      //声明模块的位置
      paths: {
          "jquery":"libs/jquery"
          "login" : "libs/login"
      }
      //或使用baseUrl指定所有模块的路径
      baseUrl: "js/libs"
  });
  //使用require加载模块，第一个参数为数组，即要加载的模块，将按数组顺序加载；第二个为回调函数，在全部加载完成后执行。
  require(['jquery','login'],function($,Login){
      alert("jquery and login module load success!");
      Login.do_login();
      //some else
 });

符合amd的login module定义

  //依赖jquery的定义
  define(['jquery'],function($){
     // some definations
    function do_login(){
        $.post('/sessions/create',{uname:$("#uname").val(),
                  password:$("#password").val()},function(data){
          //some 
      });
     return {do_login:do_login};
   } 
  });

//不依赖其他模块的定义
define(function(){
  //some definations
  return {xx:xx};
});

rails没有应用js加载器，一方面是新版本的rails的asset pipe会将所有的js文件打包为一个js文件，没有多个js加载的状态，另一方面turbolink使用褒贬参半的所谓pjax技术，默认链接改为ajax方式，只获取html的bod部分,head部分不变动，使js的加载只在第一次打开网站时进行。

转载请注明出处:http://me.angry-arthas.com/blog/2015/09/14/requirejs/