Question

我正在尝试创建一个在线交互式js编程测试平台。我有一个代码窗口和一个目标iframe，代码被加载执行。我将代码包装在html中并将其加载到iframe中。问题是我想要测试的代码通常是使用data-main参数通过requirejs加载的。似乎代码需要从单独的文件加载，以便我不能将它包含在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>

此操作失败并显示以下消息：

未捕获错误：匿名的define（）模块：函数不匹配（要求，出口，模块）{...

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

非常感谢任何帮助。

Answer 1

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

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

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

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

加载＆＃34;动态＆＃34;带有requirejs的代码

1 个答案: