js通過script標(biāo)簽的默認(rèn)加載方式是同步的，即第一個(gè)script標(biāo)簽內(nèi)的js加載完成后，才開始加載第二個(gè)，以此類推，直至js文件全部加載完畢。且js的依賴關(guān)系必須通過script的順序才能確保；而在js加載期間，瀏覽器將停止響應(yīng)，這大大影響了用戶體驗(yàn)，基于此，很多解決js以來和加載的方案出現(xiàn),require js就是其中之一。

requirejs加載的模塊，一般為符合AMD標(biāo)準(zhǔn)的模塊，即用define定義，用ruturn返回暴露方法、變量的模塊；requirejs也可以加載飛AMD標(biāo)準(zhǔn)的模塊，但比較麻煩，這次不涉及。

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

• script 標(biāo)簽data-main屬性聲明requirejs加載的入口模塊，async="true"(非ie) 和defer(ie)標(biāo)簽表明異步加載。
• require.config配置模塊對應(yīng)的路徑
• require聲明依賴關(guān)系

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加載模塊，第一個(gè)參數(shù)為數(shù)組，即要加載的模塊，將按數(shù)組順序加載；第二個(gè)為回調(diào)函數(shù)，在全部加載完成后執(zhí)行。
  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沒有應(yīng)用js加載器，一方面是新版本的rails的asset pipe會將所有的js文件打包為一個(gè)js文件，沒有多個(gè)js加載的狀態(tài)，另一方面turbolink使用褒貶參半的所謂pjax技術(shù)，默認(rèn)鏈接改為ajax方式，只獲取html的bod部分,head部分不變動，使js的加載只在第一次打開網(wǎng)站時(shí)進(jìn)行。

轉(zhuǎn)載請注明出處:http://me.angry-arthas.com/blog/2015/09/14/requirejs/