javascript - Dojo 构建和转换为 AMD 时出现问题

Question

我正在开发一个由其他人编写的 Dojo 应用程序。我是 Dojo 的新手，但发现为了减少 http 请求，我需要生成一个“构建”版本。我已经做到了，AFAICT(我至少得到了一个压缩脚本)，但是当使用构建的脚本时，以前可用的函数都不起作用(它们是“未定义的”)。

此外，在试图解决这个问题时，看起来这似乎是使代码与 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 构建工具确实是为了容纳模块而设计的，而不是松散的脚本，但这种事情以前发生在“Just Work”上。

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

当 Dojo 构建遇到一个它检测到不是 AMD 格式的文件时，它会在它周围放置一个 AMD 包装器，目的是调整使用 dojo.provide 的正确遗留 Dojo 模块、dojo.require 以及诸如 dojo 和 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 调用中收集。
AMD 通常不需要
• dojo/ready，因为 dojo/domReady!已经在等待 DOMContentLoaded (或同等内容)，并且 define 工厂已经在等待模块加载。

然后，您可以通过另一个模块中的 define 或页面脚本中的 require 加载该模块上的每个函数，然后引用这些函数通过存储模块的变量。(在此示例中，otherModule 是使用另一个转换模块的示例，因为您建议 globalContainerEmpty 位于另一个类似的脚本文件中。 )

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