0

我正在尝试创建一个在线交互式 js 编程测试平台。我有一个代码窗口和一个目标 iframe，代码在其中被加载以执行。我将代码包装在 html 中并将其加载到 iframe 中。问题是我要测试的代码通常是通过 requirejs 使用 data-main 参数加载的。看来代码需要从单独的文件中加载，以便我无法将其包含在 html 本身中。

有效但对我没有帮助的是在服务器上创建一个文件以用作 data-main 参数的目标，并将 html 发送到需要 requirejs 的 iframe，然后加载我的代码。

html:

<html>
 ....
 <script type="text/javascript" src="lib/requirejs/require.js" data-main="src/requireConfigTest"></script>
 ....
</html>

requireConfigTest.js 的内容：

/*globals require*/
require.config({
    shim: {

    },
    paths: {
        famous: 'lib/famous',
        requirejs: 'lib/requirejs/require',
        almond: 'lib/almond/almond',
        'famous-polyfills': 'lib/famous-polyfills/index'
    }
});
// this is the injection point where the dynamic code starts
define(function (require,exports,module) {
    var Engine = require("famous/core/Engine");
    var Surface = require("famous/core/Surface");

    var mainContext = Engine.createContext();

    var surface = new Surface({
        size: [100, 100],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            textAlign: "center",
            lineHeight: "20px"
        }
    });
    alert('hi');
    mainContext.add(surface);

});
//this is the end of the dynamic code

这需要将动态代码写回服务器，不是一个合理的解决方案。我正在尝试实现这样的东西......

html:

<html>
 ....
<script type="text/javascript" src="lib/requirejs/require.js"</script>
<script type="text/javascript">
/*globals require*/
require.config({
    shim: {

    },
    paths: {
        famous: 'lib/famous',
        requirejs: 'lib/requirejs/require',
        almond: 'lib/almond/almond',
        'famous-polyfills': 'lib/famous-polyfills/index'
    }
});
// this is the injection point where the dynamic code starts
define(function (require,exports,module) {
    var Engine = require("famous/core/Engine");
    var Surface = require("famous/core/Surface");

    var mainContext = Engine.createContext();

    var surface = new Surface({
        size: [100, 100],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            textAlign: "center",
            lineHeight: "20px"
        }
    });
alert('hi');
    mainContext.add(surface);

});
//this is the end of the dynamic code
</script>

这失败并显示以下消息：

未捕获的错误：不匹配的匿名定义（）模块：函数（需要，导出，模块）{...

我希望找到一种方法来重新格式化第二个脚本标记中的上述代码，或者找到一种方法通过 data-main 传递 requireConfigTest.js 的实际内容，而不是传递要加载的文件名。

在这里的任何帮助将不胜感激。

4

1 回答 1

0

由于您实际上并未通过define调用定义模块，因此您可以使用require：

require(["famous/core/Engine", "famous/core/Surface"], function (Engine, Surface) {
    var mainContext = Engine.createContext();
    // Etc...

您可以将其define视为另外定义模块的require调用。您使用它的方式是定义一个没有名称的模块，因为您没有给它一个名称（这通常是正确的做法），但它不是从文件中加载的。当你没有给模块命名作为 的第一个参数时，RequireJS 会从它加载模块的文件中分配一个名称。define.jsdefine.js

要记住的另一件事是立即require安排其回调执行。（回调不会立即执行，但它会立即安排执行。）而define没有安排任何事情。它只记录回调，然后当require调用（或等效的东西）需要它时，执行回调。

于 2014-04-16T16:11:17.050 回答