RequireJS采用与传统的<script>标签不同的方式来加载脚本文件。然而,这样的方式依然可以以最优的性能快速运行,这种方式的主要目标是鼓励代码的模块化。鼓励使用模块ID而非脚本便签内的ULR也是这种方式的组成部分。
RequireJS根据基URL来加载所有的代码。基URL一般情况下被默认为data-main属性中指定脚本所在的目录,该脚本是为页面而加载的顶级脚本。data-main属性是一个特殊的属性,require.js将会检查并开始加载该脚本文件。以下示例将以一个脚本的基URL结束:
``
<script data-main="script/main.js" src="scripts/require.js"></script>
或者,你可以手动地在RequireJS config当中设置。如果没有显式的配置文件以及data-main被使用,那么基URL将默认为运行RequireJS的文档所在的目录。
RequireJS同时也假设默认情况下所有的依赖都是脚本文件,因此,你不需要在模块ID上加上.js后缀。RequireJS在将模块ID转换为路径时,自动为其加上默认扩展名。通过使用paths config,你可以建立起一组脚本文件的位置。所有的这些功能使得你输入地更少。
可能有些时候你想直接引用一个脚本文件,而不遵循“baseURL+paths”。如果一个模块ID中有一下的字符之一的,该ID将不会使用“baseURL+paths”配置来传递,仅仅将其视为普通的URL:
- 以“.js”结尾
- 以“/”开头
- 包含一个URL协议,例如“http:”、“https”
一般情况下,最好使用基URL以及“paths”配置来为模块ID设立路径。通过这样做,今后你在重命名以及为优化版本配置不同的路径时,将更加的灵活方便。
相似地,为了避免一连串连锁配置,最好避免为脚本设置过深的目录,而是采用基Url,或者你想通过将你的应用代码与库代码或者是组建代码分隔开来,你可以使用以下目录布局:
www/
|--- index.html
|--- js/
|--- app/
|---sub.js
|--- lib/
|--- jquery.js
|--- canvas.js
|--- app.js
|--- require.js
在index.html中:
<script data-main="js/app.js" src="js/require.js"></script>
在app.js中:
requirejs.config({ //默认情况下会在js/lib目录下加载任何模块ID baseUrl:'js/lib', //除非模块ID使用‘‘app’’开头,从js/app目录中加载它。 //路径配置是相对于基Url,而且不会包含任何的扩展 //名'.js',因为路径配置是为了目录 path:{ app:'.../app' } }); //主要应用逻辑开始 requirejs(['jquery','canvas','app/sub'], function($, canvas, sub){ //jQuery, canvas and the app/sub模块全部能被加载并能在此被使用 });
作为示例的一部分,这些组件库,例如jQuery在它们的文件名当中都没有出现版本数字。如果你想追踪版本,我们推荐将版本信息保存在单独的文本文件中,或者你可以使用像volo这类工具,这类工具将会建立起一个保存有版本信息的package.json文件在硬盘上。这样你就可以进行非常微小的配置,而不是为每个库在配置中建立起单独的入口。例如,配置'jquery'为'jquery-1.7.2'。
理想情况下,你所加载的模块将成为模块,这些模块通过调用define()函数来定义。然而,你可能需要使用一些传统的‘浏览器全局’脚本,这些脚本不会使用define()来定义他们的依赖。出于这个目的,你可以使用shim config。该工具能够很好地表述他们的依赖。
如果你表述依赖,你很可能会遇到加载错误,因为RequireJS为了加快加载速度,将异步无序地加载脚本文件。