requireJS 用法

requireJS使用教程 2.0

常用方法

requirejs.config : 为模块指定别名

requirejs : 将写好的模块进行引入，根据模块编写主代码

define : 编写模块

html

<script src="../js/require.js" data-main='../js/main.js'></script>

main.js

require.config({
  paths: {
    jquery: 'jquery-2.1.4'
  }
});

requirejs(['jquery', 'validate'], function($, validate){
  validate.test();
})

validate.js

define(['jquery'], function($){

  return {
    test: function(){
      $('body').css('backgroundColor', 'red');
    }
  }

});

以上就是简单用法

实际情况

1、datetimepicker 不支持 requirejs，需要用到shim参数

 require.config({
  shim: {
      'bootstrap': ['jquery'],
      'datepicker': ['bootstrap'],
  },
  paths: {
    jquery: 'jquery-2.1.4',
    bootstrap: 'bootstrap',
    datepicker: 'bootstrap-datetimepicker'
  }
});

requirejs(['jquery', 'bootstrap', 'datepicker',     'modules/datepicker'], function($, a, b, datepicker){
  datepicker.datepicker('date');
})

module

define(['jquery'],  function($){

  return {
    datepicker: function(id){
      $('.'+id).datetimepicker({
        format: 'YYYY.MM.DD'
      });
    }
  }

});

侧栏工具条开发

加载js

RequireJS以一个相对于baseUrl的地址来加载所有的代码，而baseUrl一般设置到与该属性相一致的目录。也可以通过config函数设置。

有时候你想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。此时可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档的脚本：

以 ".js" 结束.

以 "/" 开始.

包含 URL 协议, 如 "http:" or "https:".

项目库/三方库

www/ index.html js/ app/ sub.js lib/ jquery.js canvas.js app.js

有些库并没有使用define()来定义它们的依赖关系，你必须为此使用shim config来指明它们的依赖关系。 如果你没有指明依赖关系，加载可能报错。这是因为基于速度的原因，RequireJS会异步地以无序的形式加载这些库。

data-main

你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

定义模块

define({
  color: 'black',
  size: 4
});

define(function(){
  alert('set up');
  return {
      color: 'black',
      size: 4
  }
});

存在依赖的函数式定义：http://www.requirejs.cn/ 1.3.3

将模块定义为函数。返回函数

特殊情况处理：

1、浏览器全局变量注入型的库，使用shim。比如 jquery.ui 依赖qjuery

2、CommonJS模块格式，需要通过简单包装来实现。

接下来练习一个commonJS的例子

实际中碰到的问题

1、模块A引入模块B

方法一：在main文件中，通过函数的参数引入

方法二：在模块A中引入，如果某个方法用不到模块B，则debugger时，看不到模块B，真正实现按需加载。