1.加载 JavaScript 文件
RequireJS的目标是鼓励代码的模块化,可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。
RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层
<script data-main="scripts/main.js" src="scripts/require.js"></script>
如果没有显式指定config及data-main,则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。
有时候你想避开”baseUrl + paths”的解析过程,而是直接指定加载某一个目录下的脚本。此时可以这样做:如果一个module ID符合下述规则之一,其ID解析会避开常规的”baseUrl + paths”配置,而是直接将其加载为一个相对于当前HTML文档的脚本:
以 ".js" 结束.
以 "/" 开始.
包含 URL 协议, 如 "http:" or "https:".
一般来说,最好还是使用baseUrl及”paths” config去设置module ID。它会给你带来额外的灵活性,如便于脚本的重命名、重定位等。 同时,为了避免凌乱的配置,最好不要使用多级嵌套的目录层次来组织代码,而是要么将所有的脚本都放置到baseUrl中,要么分置为项目库/第三方库的一个扁平结构,如下:
- www/
- index.html
- js/
- app/
- sub.js
- lib/
- jquery.js
- canvas.js
- app.js
index.html:
<script data-main="js/app.js" src="js/require.js"></script>
app.js:
requirejs.config({
#默认加载url js/lib
baseUrl: 'js/lib',
#配置相对的路径,可以是目录,也可以是http:// 的url
paths: {
app: '../app'
}
});
#加载相应的 js模块
requirejs(['jquery', 'canvas', 'app/sub'],
#注入模块的全局变量
function($,canvas,sub) {
#利用依赖模块的全局变量做一些事情……
});
注意在示例中,三方库如jQuery没有将版本号包含在他们的文件名中。我们建议将版本信息放置在单独的文件中来进行跟踪。使用诸如volo这类的工具,可以将package.json打上版本信息,并在磁盘上保持文件名为”jquery.js”。这有助于你保持配置的最小化,避免为每个库版本设置一条path。例如,将”jquery”配置为”jquery-1.7.2”。
理想状况下,每个加载的脚本都是通过define()来定义的一个模块;但有些”浏览器全局变量注入”型的传统/遗留库并没有使用define()来定义它们的依赖关系,你必须为此使用shim config来指明它们的依赖关系。 如果你没有指明依赖关系,加载可能报错。这是因为基于速度的原因,RequireJS会异步地以无序的形式加载这些库。
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>
##不能保证它所依赖的JS也加载成功。
<script src="scripts/other.js"></script>
main.js:
require.config({
paths: {
foo: 'libs/foo-1.1.3'
}
});
other.js: 依赖于main.js中的js
require( ['foo'], function( foo ) {
//do something……
});
定义模块
模块不同于传统的脚本文件,**它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量。**RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块。
RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的。同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本。
1.(简单的值对)如果一个模块仅含值对,没有任何依赖,则在define()中定义这些值对就好了:
define({
color: "black",
size: "unisize"
});
2.(函数式定义)如果一个模块没有任何依赖,但需要一个做setup工作的函数,则在define()中定义该函数,并将其传给define():
define(function () {
//做一些设置工作
return {
color: "black",
size: "unisize"
}
});
3.(存在依赖的函数式定义)如果模块存在依赖:则第一个参数是依赖的名称数组;第二个参数是函数,在模块的所有依赖加载完毕后,该函数会被调用来定义该模块,因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上,参数列表与依赖名称列表一一对应。
//定义的模块需要依赖于其它的js库
define(["./cart", "./inventory"], function(cart, inventory) {
//返回定义模块的对象,这样该模块不作为一个全局变量而存在。
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);
/**
本示例**创建了一个my/shirt模块**,它依赖于my/cart及my/inventory。磁盘上各文件分布如下:
my/cart.js
my/inventory.js
my/shirt.js
模块函数以参数"cart"及"inventory"使用这两个以"./cart"及"./inventory"名称指定的模块。在这两个模块加载完毕之前,shirt模块函数不会被调用
返回的object定义了"my/shirt"模块。这种定义模式下,"my/shirt"不作为一个全局变量而存在。
*/