Загружайте код на лету с помощью requirejs

Я пытаюсь создать онлайн интерактивный тестовый стенд для программирования js. У меня есть окно кода и целевой iframe, в который код загружается для выполнения. Я оборачиваю код в html и загружаю его в iframe. Проблема в том, что код, который я хочу протестировать, обычно загружается через requirejs с использованием параметра data-main. Оказывается, код нужно загрузить из отдельного файла, чтобы я не мог включить его в сам html.

Что работает, но не помогает мне, так это создание файла на сервере для использования в качестве цели параметра data-main и отправка html в iframe, который требует requirejs, а затем загружает мой код.

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(): function (require, exports, module) {...

Я надеюсь либо найти способ переформатировать приведенный выше код во втором теге script, либо найти способ передать фактическое содержимое requireConfigTest.js через data-main вместо передачи имени загружаемого файла.

Любая помощь здесь будет принята с благодарностью.


requirejs famo.us
person rich    schedule 16.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку вы на самом деле не определяете модуль с помощью вызова 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 (или что-то подобное), выполняется обратный вызов.

person Louis    schedule 16.04.2014
comment
Спасибо. Вот оно. Мой код является динамическим, поэтому требуемые элементы будут различаться, но переформатирование вызова будет простой механикой. Спасибо еще раз. Богатый. - person rich; 18.04.2014