RequireJS 使用概要

风行水上 @ 2014-01-21 11:10:52

标签： javascript

RequireJS用于JavaScript的动态加载。

配置和入口

<script src="http://cdn.staticfile.org/require.js/2.1.10/require.min.js"></script>
<script>
requirejs.config({
    baseUrl: '.',
    paths: {
      jquery  : 'http://cdn.staticfile.org/jquery/2.0.3/jquery.min',
      domReady: 'http://cdn.staticfile.org/require-domReady/2.0.1/domReady.min',
      text    : 'http://cdn.staticfile.org/require-text/2.0.10/text.min'
    }
});

require(['jquery'], function($){
 ...
});
</script>

可以把上面的第二个"script"标签里内容单独写在一个文件里，从而只需用下面的写法就可以了。

<script data-main="js/app" src="http://path/to/require.min.js"></script>

其中的data-main属性指定了程序入口文件。

加载模块

require(['jquery'], function($){
  //alert('loaded');
}, function(){
  alert('load fail');
});

模块：domReady

"domReady!"用于监听DOM的onload事件。

require(['domReady!'], function(doc){
  if(!window.performance) return;
  var timing = window.performance.timing;
  var record = [], steps=[];
  for(k in timing){
    record.push([k, timing[k]]);
    steps.push(k);
  }
  record.sort(function(a,b){return a[1]-b[1]});
  console.log(record.join("\n"));
  console.log("domComplete  - responseEnd = %d", timing.domComplete  - timing.responseEnd);
  console.log("loadEventEnd - responseEnd = %d", timing.loadEventEnd - timing.responseEnd);
});

模块：text!

"text!"模块用于读取文件内容。这主要是为了便于模块化划分和开发。

require(['text!requirejs.html!strip'], function(html_text){
  console.log(html_text);
});

显然这跟直接把内容内嵌在代码中相比，效率低了一些。不过RequreJS的整体解决方案其实是要借助RequireJS Optimizer来进行combine、inline等操作的。

RequireJS 的整体解决方案

TODO

标签： javascript