Dojo構建和向AMD轉換的麻煩

Question

我正在研究別人編寫的Dojo應用程序。 我是Dojo的新手，但是我發現要減少http請求，我需要產生一個“ build”版本。 我已經做到了，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.require和dojo等全局名稱空間的適當的舊版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調用中收集。
• dojo/ready一般不會因為道場/ domready中需要與AMD！ 已經等待DOMContentLoaded （或等效），並且define工廠已經等待，直到模塊被加載。

然后你就可以通過加載它通過訪問每一個此模塊的功能define在另一個模塊或require在一個網頁腳本，然后通過你存儲在模塊（在這個例子中，變量引用功能， otherModule是示例，因為您建議globalContainerEmpty在另一個類似的腳本文件中。）

模塊教程有望提供進一步的幫助，也可能會提供現代的Dojo教程。