RequireJS 使用概要

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

    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

    标签:

      分享到:
      comments powered by Disqus

      31/34ms