-1

I have what is probably a basic question around how the famo.us slideshow tutorial is using requirejs (tutorial here). I don't know much about requirejs, and it's sort of a tertiary tool for the purposes of this tutorial, but I did do a bit of reading to try and wrap my head around what it's doing, but that seemed to only leave me more perplexed.

From the index.html file

<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>

As I understand it we are doing two things from a requirejs perspective:
a) indicating all our modules will be located in the "src" folder
b) indicating the inital js file for execution will be 'src/main.js'

here is 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);
});

And here is one iteration of the appview module:

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;
});

My confusion is with these module imports in appview:

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

Since we set the base folder to the 'src' folder, I would think require would expect this module to be in 'src/famous/core', though there is no such directory. In fact, the famous directory is a few levels above the src folder in the file hierarchy. So how did require find the famous directory?

Tim Lindsey
  • 727
  • 1
  • 7
  • 18

1 Answers1

1

'famous/core/View' is just a module name, not a path as you would expect. It is defined in dist/famous.js:5009. They used the / convention probably as a namespace.

For more info about defining a module with a name go to the requirejs docs.

In short terms, one could do the following in a file named foo.js :

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

And if that file foo.js is loaded at some point, one could require the following, without the need of having a folder/file structure foo/bar.js and foo/baz.js:

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

p.s. i strongly suggest you read the docs, requirejs is just awesome

Poelinca Dorin
  • 9,577
  • 2
  • 39
  • 43