最近学习了一下requirejs,对照官方文档和阮一峰大神的博客Javascript模块化编程(三):require.js的用法,学到了基本的用法,以下是我的一些总结和补充
基本用法看官方文档和阮一峰大神的博客就可以了,我这里写一下感觉要注意的地方。
(1)require.config({...})中的shim,官方文档中的解释是:为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。
其实就是帮助我们以AMD模块的方式,使用那些不符合AMD规范的模块。有如下代码:
require.config({ shim:{ 'underscore':{ //'underscore'需要和paths中定义的别名一致,若underscore.js在BaseUrl目录下,则不用设置paths。后面的backbone也一样 exports:'_' }, 'backbone':{ deps:['underscore','jquery'], exports:'Backbone' } } });
使用的时候:
requirejs(['underscore','backbone'],function(_,Backbone){ // 'underscore'和'backbone'和paths中设置的别名一致 ...... })
有两个属性,deps和exports,exports是模块的返回值,exports的值,一定要与JS库中暴露出的全局变量名称一致。显然,
'underscore'与'backbone'这两个模块的返回值,就是这两个框架(underscore.js和backbone.js)暴露出的全局变量'_'和'Backbone'。
(2)map的用法
官方文档解释map:对于给定的模块前缀,使用一个不同的模块ID来加载该模块。
该手段对于某些大型项目很重要:如有两类模块需要使用不同版本的"foo",但它们之间仍需要一定的协同。
在那些基于上下文的多版本实现中很难做到这一点。而且,paths配置仅用于为模块ID设置root paths,而不是为了将一个模块ID映射到另一个。
map示例:
如果各模块在磁盘上分布如下:
- foo1.0.js
- foo1.2.js
- some/
- newmodule.js
- oldmodule.js
代码:
requirejs.config({ map: { 'some/newmodule': { 'foo': 'foo1.2' }, 'some/oldmodule': { 'foo': 'foo1.0' } } });
当“some/newmodule”调用了“require('foo')”,它将获取到foo1.2.js文件;而当“some/oldmodule”调用“`require('foo')”时它将获取到foo1.0.js。
该特性仅适用于那些调用了define()并将其注册为匿名模块的真正AMD模块脚本。并且,请在map配置中仅使用绝对模块ID,“../some/thing”之类的相对ID不能工作。
另外在map中支持“*”,意思是“对于所有的模块加载,使用本map配置”。如果还有更细化的map配置,会优先于“*”配置。示例:
requirejs.config({ map: { '*': { 'foo': 'foo1.2' }, 'some/oldmodule': { 'foo': 'foo1.0' } } });
意思是除了“some/oldmodule”外的所有模块,当要用“foo”时,使用“foo1.2”来替代。对于“some/oldmodule”自己,则使用“foo1.0”。