Dojo 构建和转换为 AMD 的问题
Trouble with Dojo Build and Conversion to AMD
我正在开发其他人编写的 Dojo 应用程序。我是 Dojo 的新手,但发现要减少 http 请求,我需要制作一个 "build" 版本。这我已经完成了,AFAICT(我至少得到了一个压缩脚本),但是当使用内置脚本时,none 以前可用的功能(它们是 "undefined")。
此外,在试图解决这个问题时,看起来这似乎是使代码 AMD 兼容的一个好点(此代码与 AMD 兼容吗?)。这将如何与下面的示例一起使用?从阅读看来,我可能需要将每个现有功能从这样的脚本制作成一个模块,这会产生数百个脚本,而且感觉不对。如何最好地转换此类代码,使其与 AMD 兼容并可构建?
我有 15 个左右的 .js 脚本,它们都包含以这种方式编写的不同数量的函数...
TIA!
var somethingStatus = false;
somethingInit();
function somethingInit() {
require(["dojo/ready", "dojo/dom", "dojo/dom-construct", "dojo/cookie", "dojo/json", "dojo/domReady!"], function(ready, dom, domConstruct) {
ready(function() {
var content = '';
// content generated here, then...
domConstruct.place(content, dom.byId('body'));
});
});
}
function somethingToTop(target) {
require(["dojo/dom", "dojo/dom-style", "dojo/_base/fx", "dojo/window", "dojo/domReady!"], function(dom, domStyle, fx, win) {
var vs = win.getBox();
somethingBarStatus = true;
fx.animateProperty({
node: dom.byId('somethingBar'),
properties: {
top: { start: domStyle.get('somethingBar', 'top'), end: 0 },
height: { start: domStyle.get('somethingBar', 'height') + (domStyle.get("somethingBar", "padding") * 2), end: vs.h }
},
duration: 500,
onEnd: function() {
document.location = 'http://192.168.0.1' + target;
}
}).play();
});
}
function somethingEmptyTop() {
require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"], function(dom, domConstruct) {
globalContainerEmpty('somethingTop'); // this function is in another .js file, constructed similarly to this
});
}
// many more functions like this below and across other scripts!
从 pre-AMD Dojo 迁移到 Dojo 1.7 时,您 运行 遇到了一个常见问题,因为许多人会尝试 运行 通过完全是不是模块。 Dojo 构建工具实际上是为容纳模块而设计的,而不是松散的脚本,但是这种事情以前发生在 "Just Work" 上。
在上面的示例中,您有一个似乎只定义了一些全局函数的脚本。如果有的话,它是一个适当模块的反面,因为每个单独的函数都涉及它自己的 require
调用。
当 Dojo 构建遇到它检测到的文件还不是 AMD 格式时,它会围绕它放置一个 AMD 包装器,目的是调整使用 dojo.provide
、dojo.require
,以及 dojo
和 dijit
等全局命名空间。问题是,当脚本中的这些 "global" 函数被包装时,它们在包装器中成为 define
工厂的本地函数,因此不再是全局的。
上面代码的正确转换看起来像这样:
define([
'dojo/_base/fx',
'dojo/cookie',
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/json',
'dojo/window',
'my/otherModule',
'dojo/domReady!'
], function (fx, cookie, dom, domConstruct, domStyle, JSON, win, otherModule) {
var somethingStatus = false;
var util = {
somethingInit: function () {
var content = '';
// content generated here, then...
domConstruct.place(content, dom.byId('body'));
}
somethingToTop: function (target) {
var vs = win.getBox();
somethingBarStatus = true;
fx.animateProperty({
node: dom.byId('somethingBar'),
properties: {
top: { start: domStyle.get('somethingBar', 'top'), end: 0 },
height: { start: domStyle.get('somethingBar', 'height') + (domStyle.get("somethingBar", "padding") * 2), end: vs.h }
},
duration: 500,
onEnd: function() {
document.location = 'http://192.168.0.1' + target;
}
}).play();
},
somethingEmptyTop: function () {
// assuming that the other module was converted similarly to this one
otherModule.globalContainerEmpty('somethingTop');
}
};
util.somethingInit();
return util;
}
- 请注意,之前每个单独函数中的所有依赖项都已收集到此模块的
define
调用中。
dojo/ready
通常不需要 AMD,因为 dojo/domReady!已经在等待 DOMContentLoaded
(或等效),并且 define
工厂已经在等待模块加载。
然后,您可以通过在另一个模块中的 define
或在页面脚本中的 require
加载它来访问该模块上的每个函数,然后通过变量引用函数将模块存储在。(在这个例子中,otherModule
是使用另一个转换模块的例子,因为你建议 globalContainerEmpty
在另一个类似的脚本文件中。)
modules tutorial can hopefully provide further help, and possibly also the modern Dojo教程。
我正在开发其他人编写的 Dojo 应用程序。我是 Dojo 的新手,但发现要减少 http 请求,我需要制作一个 "build" 版本。这我已经完成了,AFAICT(我至少得到了一个压缩脚本),但是当使用内置脚本时,none 以前可用的功能(它们是 "undefined")。
此外,在试图解决这个问题时,看起来这似乎是使代码 AMD 兼容的一个好点(此代码与 AMD 兼容吗?)。这将如何与下面的示例一起使用?从阅读看来,我可能需要将每个现有功能从这样的脚本制作成一个模块,这会产生数百个脚本,而且感觉不对。如何最好地转换此类代码,使其与 AMD 兼容并可构建?
我有 15 个左右的 .js 脚本,它们都包含以这种方式编写的不同数量的函数...
TIA!
var somethingStatus = false;
somethingInit();
function somethingInit() {
require(["dojo/ready", "dojo/dom", "dojo/dom-construct", "dojo/cookie", "dojo/json", "dojo/domReady!"], function(ready, dom, domConstruct) {
ready(function() {
var content = '';
// content generated here, then...
domConstruct.place(content, dom.byId('body'));
});
});
}
function somethingToTop(target) {
require(["dojo/dom", "dojo/dom-style", "dojo/_base/fx", "dojo/window", "dojo/domReady!"], function(dom, domStyle, fx, win) {
var vs = win.getBox();
somethingBarStatus = true;
fx.animateProperty({
node: dom.byId('somethingBar'),
properties: {
top: { start: domStyle.get('somethingBar', 'top'), end: 0 },
height: { start: domStyle.get('somethingBar', 'height') + (domStyle.get("somethingBar", "padding") * 2), end: vs.h }
},
duration: 500,
onEnd: function() {
document.location = 'http://192.168.0.1' + target;
}
}).play();
});
}
function somethingEmptyTop() {
require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"], function(dom, domConstruct) {
globalContainerEmpty('somethingTop'); // this function is in another .js file, constructed similarly to this
});
}
// many more functions like this below and across other scripts!
从 pre-AMD Dojo 迁移到 Dojo 1.7 时,您 运行 遇到了一个常见问题,因为许多人会尝试 运行 通过完全是不是模块。 Dojo 构建工具实际上是为容纳模块而设计的,而不是松散的脚本,但是这种事情以前发生在 "Just Work" 上。
在上面的示例中,您有一个似乎只定义了一些全局函数的脚本。如果有的话,它是一个适当模块的反面,因为每个单独的函数都涉及它自己的 require
调用。
当 Dojo 构建遇到它检测到的文件还不是 AMD 格式时,它会围绕它放置一个 AMD 包装器,目的是调整使用 dojo.provide
、dojo.require
,以及 dojo
和 dijit
等全局命名空间。问题是,当脚本中的这些 "global" 函数被包装时,它们在包装器中成为 define
工厂的本地函数,因此不再是全局的。
上面代码的正确转换看起来像这样:
define([
'dojo/_base/fx',
'dojo/cookie',
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/json',
'dojo/window',
'my/otherModule',
'dojo/domReady!'
], function (fx, cookie, dom, domConstruct, domStyle, JSON, win, otherModule) {
var somethingStatus = false;
var util = {
somethingInit: function () {
var content = '';
// content generated here, then...
domConstruct.place(content, dom.byId('body'));
}
somethingToTop: function (target) {
var vs = win.getBox();
somethingBarStatus = true;
fx.animateProperty({
node: dom.byId('somethingBar'),
properties: {
top: { start: domStyle.get('somethingBar', 'top'), end: 0 },
height: { start: domStyle.get('somethingBar', 'height') + (domStyle.get("somethingBar", "padding") * 2), end: vs.h }
},
duration: 500,
onEnd: function() {
document.location = 'http://192.168.0.1' + target;
}
}).play();
},
somethingEmptyTop: function () {
// assuming that the other module was converted similarly to this one
otherModule.globalContainerEmpty('somethingTop');
}
};
util.somethingInit();
return util;
}
- 请注意,之前每个单独函数中的所有依赖项都已收集到此模块的
define
调用中。 dojo/ready
通常不需要 AMD,因为 dojo/domReady!已经在等待DOMContentLoaded
(或等效),并且define
工厂已经在等待模块加载。
然后,您可以通过在另一个模块中的 define
或在页面脚本中的 require
加载它来访问该模块上的每个函数,然后通过变量引用函数将模块存储在。(在这个例子中,otherModule
是使用另一个转换模块的例子,因为你建议 globalContainerEmpty
在另一个类似的脚本文件中。)
modules tutorial can hopefully provide further help, and possibly also the modern Dojo教程。