要求为什么以及何时使用shim配置
我从这里读取了requirejs文档
requirejs.config({
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.
return this.Foo.noConflict();
}
}
}
});
但我没有得到它的底座部分。 为什么我应该使用垫片,我应该如何配置,我可以得到一些更多的澄清
请用任何一个例子来解释为什么和什么时候应该使用垫片。 谢谢。
shim主要用于不支持AMD的库,但需要管理它们的依赖关系。 例如,在上面的Backbone和Underscore示例中:您知道Backbone需要Underscore,因此假设您编写了如下代码:
require(['underscore', 'backbone']
, function( Underscore, Backbone ) {
// do something with Backbone
}
RequireJS将启动对Underscore和Backbone的异步请求,但是你不知道哪一个会首先回来,所以有可能Backbone会在加载前尝试使用Underscore做些事情。
注意:这个下划线/主干的例子是在这两个库支持AMD之前编写的。 但是这个原则适用于不支持AMD的任何图书馆。
“init”钩子可以让你执行其他高级的事情,例如,如果一个库通常将两个不同的东西导出到全局命名空间中,但是你想在一个命名空间下重新定义它们。 或者,也许你想对正在加载的库中的某个方法做一些修补程序。
更多背景:
按照RequireJS API文档,shim可以让你
为不使用define()声明依赖关系并设置模块值的较旧的传统“浏览器全局”脚本配置依赖项,导出和自定义初始化。
- 配置依赖关系
假设你有2个javascript模块(moduleA和moduleB),其中一个(moduleA)依赖于另一个(moduleB)。 这两个都是您自己的模块所必需的,因此您可以在require()或define()中指定依赖项。
require(['moduleA','moduleB'],function(A,B ) {
...
}
但由于要求自己遵循AMD,你不知道哪一个会被提早取出。 这是垫片来救援的地方。
require.config({
shim:{
moduleA:{
deps:['moduleB']
}
}
})
这将确保moduleB总是在moduleA加载之前获取。
- 配置导出
Shim导出告诉RequireJS全局对象上的成员(窗口,当然假设你在浏览器中)是实际的模块值。 比方说,moduleA将自己添加到window
中'modA'(就像jQuery和下划线分别为$和_),然后我们使出口值为'modA'。
require.config({
shim:{
moduleA:{
exports:'modA'
}
}
它将给RequireJS一个本地引用这个模块。 全局的modA仍然会存在于页面上。
定制初始化旧的“浏览器全局”脚本
这可能是shim config最重要的特性,它允许我们在自己的模块中添加'浏览器全局','非AMD'脚本(不遵循模块化模式)作为依赖关系。
让我们说moduleB是普通的旧JavaScript,只有两个函数funcA()和funcB()。
function funcA(){
console.log("this is function A")
}
function funcB(){
console.log("this is function B")
}
虽然这两个函数在窗口范围内都可用,但RequireJS建议我们通过它们的全局标识符/句柄来使用它们,以避免混淆。 因此将垫片配置为
shim: {
moduleB: {
deps: ["jquery"],
exports: "funcB",
init: function () {
return {
funcA: funcA,
funcB: funcB
};
}
}
}
init函数的返回值用作模块导出值,而不是通过'exports'字符串找到的对象。 这将允许我们在我们自己的模块中使用funcB
require(["moduleA","moduleB"], function(A, B){
B.funcB()
})
希望这有助于。
您必须在requirejs.config中添加路径来声明,例如:
requirejs.config({
paths: {
'underscore' : '.../example/XX.js' /// your file java script
'jquery' : '.../example/jquery.js' /// your file java script
}
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
return this.Foo.noConflict();
}
}
}
});
链接地址: http://www.djcxy.com/p/92519.html
上一篇: Requirejs why and when to use shim config
下一篇: Dojo AMD loader executing define callbacks with empty / missing dependencies