与 require.js 的非连接 dat.gui 源。自定义或模板化 dat.gui

Question

请原谅 SEO 友好的标题，但我想让我目前正在解决的问题尽可能容易理解。对于那些希望自定义 dat.gui 外观和感觉的人，您需要下载源代码并使用 require.js 将其包含在此处的说明中：https://code.google.com/p/dat-gui/。

现在我的问题。 我正在做一个项目，该项目需要构建一个与 Javascript 进行大量实时集成的 UI（我正在使用 three.js），我决定修改 dat.gui 来创建这个 ui；以期尽快将其与backbone.js 集成为视图集合。

我想改用 dat.gui 源文件来编辑样式

首先，我使用上面链接中的说明从串联的 dat.gui.min.js 切换到源代码。我将整个源代码放在我的库文件夹中自己的文件夹中，并将 main.js 文件的 require.js err ... 需要放在“src”文件夹中。我这样做是因为在 dat.gui 的“GUI.js”中链接了依赖项。

一切似乎都正确链接了，我使用的代码与创建 dat.guis 之前使用的代码基本相同，但我不断收到未定义的错误，这取决于我如何在原始代码中更改 gui 变量或在 main.js 中。我对 require.js 的理解非常有限，我觉得它是其工作方式不可或缺的一部分（对于有知识的人来说，这无疑是那些非常简单的问题之一）

这是我的 ma​​in.js 文件，位于 /libraries/dat-gui/src （这个目录还包括 text.js）

//This is main.js for using require.js
require([
  'dat/gui/GUI'
], function(GUI) {

  // No namespace necessary 
  var gui = new GUI();

});

这是我最初的 dat.gui 定义代码的基本内容：

    ////////////////////////////////////////////////DatGui/////////////////////////////////////////////////////
        var stageConfigData = function() {
            this.scaleX = params.stageWidth;
            this.scaleZ = params.stageDepth;
            this.spinTheCamera = false;

            this.lightIntensity = 1;
            this.lightDistance = 0;
            this.lightFrontColour = "#ffb752";
            this.lightRearColour = "#3535fa";

            this.lockCameraToScene = true;

            this.tooltype = 3;
            this.objectSelect = 'Man';

            this.saveJSON = function(){
                saveJSON();
            };

        };

        var stageConfig = new stageConfigData( );

        var moveConfig = new moveConfigData( );

///I think the problem is linked to defining this variable:
        //var gui = new dat.GUI();//works for the minified version 
        var gui = new dat.GUI();//for non-concatenated

        var fstage = gui.addFolder('Stage');
        var fcamera = gui.addFolder('Camera');
        var ffhouselts = gui.addFolder('Front of House Lights');
        var fRearlts = gui.addFolder('Rear Lights');
        var sandl = gui.addFolder('Saving and Loading');

        fstage.add( stageConfig, 'scaleX', 1, 100, 5).name('Width of stage').onChange( function(){
            stage.scale.x = ( stageConfig.scaleX );
        });

        fstage.add( stageConfig, 'scaleZ', 1, 100, 5).name('Depth of stage').onChange( function(){
            stage.scale.z = ( stageConfig.scaleZ );
        });
... //there's more but i think it's irrelevant

我得到的错误是：

Uncaught ReferenceError: dat is not defined 

或

Uncaught ReferenceError: GUI is not defined 

取决于我如何处理这些变量以及 main.js 中 //No namespace required 下的位。我不明白命名空间是如何工作的，因为我对整个 JavaScript 还是很陌生。

有人有什么想法吗？再说一次，我想说这可能是那些真正的愚蠢时刻之一，但我仍然非常感谢您的帮助。

非常感谢！

Answer 1

当你使用 require.js 方法时，不会有全局对象。但是你可以自己创建它

require([
  'dat/gui/GUI'
], function(GUI) {
  window.dat = {
    GUI: GUI
  };
});