elephant

赫本之后 再无女神

Requirejs

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

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

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  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定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  //依赖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/