Question

我正在处理由其他人编写的Dojo应用程序。我是Dojo的新手，但发现要减少http请求，我需要生成一个＆＃34; build＆＃34;版。我已经完成了，AFAICT（我至少得到一个压缩脚本），但是当使用构建的脚本时，以前没有任何功能可用（它们是＆＃34;未定义＆＃34;）。

此外，在试图弄清楚这一点时，看起来这是使代码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!

Answer 1

从AMD之前的Dojo迁移到Dojo 1.7时，您遇到了一个常见问题，因为许多人会尝试通过构建运行完全不是模块的脚本。 Dojo构建工具实际上是为了容纳模块，而不是松散的脚本，但是这种事情发生在＆＃34; Just Work＆＃34;之前。

在上面的示例中，您有一个似乎只定义了许多全局函数的脚本。如果有的话，它是正确模块的反转，因为每个单独的函数都涉及它自己的require调用。

当Dojo构建遇到一个它检测到的文件已经不是AMD格式时，它会围绕它放置一个AMD包装器，目的是调整使用dojo.provide，{{{ 1}}，以及dojo.require和dojo等全局命名空间。问题是，当这些＆＃34;全球＆＃34;脚本中的函数被包装，它们成为包装器中dijit工厂的本地函数，因此不再是全局的。

上面代码的正确转换看起来像这样：

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（或等效），DOMContentLoaded工厂已等待，直到加载模块。

然后，您可以通过另一个模块中的define或页面脚本中的define加载此模块中的每个函数，然后通过存储的变量引用函数module in。（在本例中，require是使用另一个转换模块的示例，因为您建议otherModule在另一个类似的脚本文件中。）

modules tutorial可以提供进一步的帮助，也可能提供modern Dojo教程。

Dojo构建和转换到AMD的问题

1 个答案: