famo.us использование requirejs из учебника

У меня есть, вероятно, основной вопрос о том, как в учебнике по слайд-шоу famo.us используется requirejs (учебник здесь). Я не знаю много о requirejs, и это своего рода третичный инструмент для целей этого урока, но я немного почитал, чтобы попытаться обернуть голову вокруг того, что он делает, но это, казалось, только оставило меня больше озадачен.

Из файла index.html

<head>
    <title>famo.us App</title>
    <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <!-- shims for backwards compatibility -->
    <script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
    <script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
    <script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>

    <!-- module loader -->
    <script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>

    <!-- famous -->
    <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.0/famous.css" />
    <script type="text/javascript" src="http://code.famo.us/famous/0.3.0/famous.min.js"></script>

    <!-- app code -->
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <script type="text/javascript">
        require.config({
            baseUrl: './src/'
        });
        require(['main']);
    </script>
</head>

Насколько я понимаю, мы делаем две вещи с точки зрения requirejs:
а) указав, что все наши модули будут расположены в папке "src"
б) указание исходного js-файла для выполнения будет 'src/main.js'

вот main.js:

define(function(require, exports, module) {
    var Engine = require('famous/core/Engine');

    // import the AppView class using require
    var AppView = require('views/AppView');

    var mainContext = Engine.createContext();

  // create a new instance of app view
    var appView = new AppView();

    // add the instance to the context
    mainContext.add(appView);
});

И вот одна итерация модуля appview:

define(function(require, exports, module) {
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');

    // import the SlideshowView class
    var SlideshowView = require('views/SlideshowView');

    function AppView() {
        View.apply(this, arguments);

        // create a new instance of slideshow view
        var slideshowView = new SlideshowView();

        // add the instance to app view
        this.add(slideshowView);
    }

    AppView.prototype = Object.create(View.prototype);
    AppView.prototype.constructor = AppView;

    AppView.DEFAULT_OPTIONS = {};

    module.exports = AppView;
});

Моя путаница заключается в импорте этих модулей в appview:

var View = require('famous/core/View');

Поскольку мы установили базовую папку в папку 'src', я бы подумал, что требуется, чтобы этот модуль находился в 'src / known / core', хотя такого каталога нет. Фактически, известный каталог находится на несколько уровней выше папки src в файловой иерархии. Так как же требовалось найти знаменитый каталог?

Источник

1 ответ

Решение

'famous/core/View' это просто имя модуля, а не путь, как вы ожидаете. Определяется в dist/famous.js:5009, Они использовали / конвенция, вероятно, как пространство имен.

Для получения дополнительной информации об определении модуля с именем перейдите в документ requirejs.

В короткие сроки можно сделать следующее в файле с именем foo.js:

define('foo/bar', function () {
    return {
        name: 'bar'
    }
});
define('foo/baz', function () {
    return {
        name: 'baz'
    }
});

И если этот файл foo.js загружается в какой-то момент, может потребоваться следующее, без необходимости иметь структуру папок / файлов foo/bar.js и foo / baz.js:

require(['foo/bar', 'foo/baz', function (Bar, Baz) {
    console.log(Bar.name, Baz.name)
});

ps я настоятельно рекомендую вам прочитать документы, requirejs просто потрясающий

Источник
Другие вопросы по тегам