使用RequireJS库加载JavaScript模块的实例教程

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

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

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

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的加载只在第一次打开网站时进行。

案例一： 加载 JavaScript 文件

 <script src="./js/require.js"></script>    <script>   require(["./js/a.js", "./js/b.js"], function() {        myFunctionA();        myFunctionB();     });    </script>

require 方法里的这个字符串数组参数可以允许不同的值，当字符串是以”.js”结尾，或者以”/”开头，或者就是一个 URL 时，RequireJS 会认为用户是在直接加载一个 JavaScript 文件，否则，当字符串是类似”my/module”的时候，它会认为这是一个模块，并且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件。配置的部分会在稍后详细介绍。