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，真正实现按需加载。