关于baseURL
baseURL可以通过data-main或者在config中指定，如果未通过这种方式指定，则默认为引入require.js的那个html文档所在的目录。
如果通过data-main引入了一个入口js文件，则baseURL即为这个文件所在的目录。
或者通过在config中直接指定
如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档的脚本：
- 以 ".js" 结束.
- 以 "/" 开始.
- 包含 URL 协议, 如 "http:" or "https:".
require的模块写法
-
简单的值对
如果一个模块仅含值对，没有任何的依赖，则在define中定义这些值对就好了：
define({
color:"black",
size:"unsize"
}) -
函数式定义
如果一个模块没有任何依赖，但需要做一个setup工作的函数，则在define()中定义该函数，并将其传值给define():
//this js does setup work before return it's mdule definition
define(function(){
//do setup workreturn { color:"red", size："unsize" } })
3.存在依赖的函数式定义
如果模块存在依赖：则第一个参数是依赖的名称数组，第二个参数是函数，在模块所有依赖加载完成后，该函数会被调用来定义该模块，因此该函数应该返回一个定义了该模块的object。依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表应一一对应
define(['a','app/b'],function(a,b){
return {
color:"red",
size:"unsize",
add:function(){
b.dosth(this);
return a.anthorthing(this);
}
}
})
模块函数以参数"a"及"b"使用这两个以"a"及"app/b"名称指定的模块。在这两个模块加载完毕之前，模块函数不会被调用。
严重不鼓励模块定义全局变量。遵循此处的定义模式，可以使得同一模块的不同版本并存于同一个页面上(参见 高级用法 )。另外，函参的顺序应与依赖顺序保存一致。
返回的object定义了一个新的模块。这种定义模式下，这个新模块不作为一个全局变量而存在。
- 将模块定义为一个函数
模块的返回值并没有强制为一个object，任何函数的返回值都是可以的，下面是一个返回函数的模块定义：
//A module definition inside foo/title.js. It uses
//my/cart and my/inventory modules from before,
//but since foo/title.js is in a different directory than
//the "my" modules, it uses the "my" in the module dependency
//name to find them. The "my" part of the name can be mapped
//to any directory, but by default, it is assumed to be a
//sibling to the "foo" directory.
define(["my/cart", "my/inventory"],
function(cart, inventory) {
//return a function to define "foo/title".
//It gets or sets the window title.
return function(title) {
return title ? (window.title = title) :
inventory.storeName + ' ' + cart.name;
}
}
);
其他
-
按需加载
define()中的相对模块名: 为了可以在define()内部使用诸如require("./relative/name")的调用以正确解析相对名称，记得将"require"本身作为一个依赖注入到模块中：define(['require','b'],function(require){ var b = require('b'); })
或者
define(function(require) {
var mod = require("b");
});
这样可以做到当我们执行到某个js需要加载b时再加载
-
shim配置
为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。
下面有个示例，它需要 RequireJS 2.1.0+，并且假定backbone.js、underscore.js 、jquery.js都装于baseUrl目录下。如果没有，则你可能需要为它们设置paths config：
requirejs.config({
//Remember: only use shim config for non-AMD scripts,
//scripts that do not already call define(). The shim
//config will not work correctly if used on AMD scripts,
//in particular, the exports and init config will not
//be triggered, and the deps config will be confusing
//for those cases.
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
//Using a function allows you to call noConflict for
//libraries that support it, and do other cleanup.
//However, plugins for those libraries may still want
//a global. "this" for the function will be the global
//object. The dependencies will be passed in as
//function arguments. If this function returns a value,
//then that value is used as the module export value
//instead of the object found via the 'exports' string.
//Note: jQuery registers as an AMD module via define(),
//so this will not work for jQuery. See notes section
//below for an approach for jQuery.
return this.Foo.noConflict();
}
}
}
});//Then, later in a separate file, call it 'MyModel.js', a module is //defined, specifying 'backbone' as a dependency. RequireJS will use //the shim config to properly load 'backbone' and give a local //reference to this module. The global Backbone will still exist on //the page too. define(['backbone'], function (Backbone) { return Backbone.Model.extend({}); });
那些仅作为jQuery或Backbone的插件存在而不导出任何模块变量的"模块"们，shim配置可简单设置为依赖数组：
requirejs.config({
shim: {
'jquery.colorize': ['jquery'],
'jquery.scroll': ['jquery'],
'backbone.layoutmanager': ['backbone']
}
});
网友评论