Question

我有一个关于famo.us幻灯片教程如何使用requirejs（教程here）的基本问题。我不太了解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的角度做了两件事： a）表明我们所有的模块都将位于＆＃34; src＆＃34;文件夹
b）指示执行的初始js文件将是＆＃39; src / main.js＆＃39;

这里是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');

因为我们将基本文件夹设置为＆＃39; src＆＃39;文件夹，我认为要求期望这个模块在＆＃39; src / famous / core＆＃39 ;,虽然没有这样的目录。实际上，着名的目录比文件层次结构中的src文件夹高几级。那怎么需要找到着名的目录？

Answer 1

'famous/core/View'只是一个模块名称，而不是您期望的路径。它在dist/famous.js:5009中定义。他们可能将/约定用作命名空间。

有关使用名称定义模块的详细信息，请转到requirejs docs。

简而言之，可以在名为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)
});

P.S。我强烈建议你阅读文档，requirejs很棒

famo.us使用教程中的requirejs

1 个答案: