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.providedojo.require,以及 dojodijit 等全局命名空间。问题是,当脚本中的这些 "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教程。