理想状况下,每个加载的脚本都是通过define()来定义的一个模块;但有些"浏览器全局变量注入"型的传统/遗留库并没有使用define()来定义它们的依赖关系,你必须为此使用shim config来指明它们的依赖关系。 如果你没有指明依赖关系,加载可能报错。这是因为基于速度的原因,RequireJS会异步地以无序的形式加载这些库。
§ 1.2 data-main 入口点
require.js 在加载的时候会检察data-main 属性:
<script data-main="scripts/main" src="scripts/require.js"></script>
你可以在data-main指向的脚本中设置模板加载 选项,然后加载第一个应用模块。.注意:你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。例如:
<script data-main="scripts/main" src="scripts/require.js"></script> <script src="scripts/other.js"></script> // contents of main.js: require.config({ paths: { foo: 'libs/foo-1.1.3' } }); // contents of other.js: // This code might be called before the require.config() in main.js has executed. // When that happens, require.js will attempt to load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js' require( ['foo'], function( foo ) { });
§ 1.3 定义模块
模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量。RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块。
RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的。同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本。
一个磁盘文件应该只定义 1 个模块。多个模块可以使用内置优化工具将其组织打包。
§ 1.3.1 简单的值对
如果一个模块仅含值对,没有任何依赖,则在define()中定义这些值对就好了:
//Inside file my/shirt.js: define({ color: "black", size: "unisize" });
§ 1.3.2 函数式定义
如果一个模块没有任何依赖,但需要一个做setup工作的函数,则在define()中定义该函数,并将其传给define():
//my/shirt.js now does setup work //before returning its module definition. define(function () { //Do setup work here return { color: "black", size: "unisize" } });
§ 1.3.3 存在依赖的函数式定义