非级联的dat.gui源与require.js。定制或模板化dat.gui

Question

请原谅搜索引擎优化友好标题，但我想使我目前正在解决的问题尽可能容易。对于那些希望自定义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错误.需要在"src“文件夹中。我之所以这样做，是因为在dat.gui的"GUI.js“中链接依赖项。

所有的东西似乎都连接得很好，而且我使用的代码与我以前创建dat.guis的代码基本相同，但我仍然会得到一些未定义的错误，这取决于我如何在原始代码中或在main.js中更改gui变量。我对require.js的理解是非常有限的，我觉得它对它的工作方式是不可或缺的(对于那些知道如何工作的人来说，这是一个非常简单的问题)。

下面是位于/libraries/dat-gui/src的main.js文件(这个dir还包括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 

取决于我如何处理这些变量和//No名称空间下的// main.js中的位。我不明白命名空间是如何工作的，因为作为一个整体，我对javascript非常陌生。

有人有什么想法吗？再次，我想说，这可能是一个真正的愚蠢的时刻，但我会真的很感激的帮助，无论如何。

非常感谢!

Answer 1

当您使用require.js方法时，将没有全局对象。但你可以自己创造

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