使用 requirejs 加载"on the fly"代码

我正在尝试创建一个在线交互式js编程试验台。我有一个代码窗口和一个目标iframe，在其中加载代码以执行。我用html包装代码并将其加载到iframe中。问题是，我想要测试的代码通常是通过requirejs使用数据主参数加载的。代码似乎需要从一个单独的文件加载，这样我就不能将其包含在html本身中。

有效但对我没有帮助的是在服务器上创建一个文件用作数据主参数的目标，并将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的实际内容的方法，而不是传递要加载的文件的名称。

如有任何帮助，我们将不胜感激。

由于您实际上并没有用define调用定义模块，因此您可以只使用require:

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

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

需要记住的另一件事是，require会立即调度其回调以供执行。（回调不是立即执行，而是立即调度执行。）而define不调度任何内容。它只记录回调，然后当require调用（或类似的调用）需要它时，就会执行回调。

相关内容

最新更新

热门标签：