famo.us 教程中requireJS的使用

famo.us use of requirejs from tutorial

本文关键字：requireJS us 教程 famo      更新时间：2023-09-26

我有一个关于 famo.us 幻灯片教程如何使用requirejs的基本问题（教程在这里）。我对requirejs了解不多，就本教程而言，它是一种三级工具，但我确实做了一些阅读，试图了解它的作用，但这似乎只会让我更加困惑。

从索引.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） 表示我们所有的模块都将位于"src"文件夹中
b） 指示要执行的初始 js 文件将是 'src/main.js'

这是主要.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);
});

这是应用视图模块的一个迭代：

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"文件夹，我认为 require 会期望这个模块位于"src/famous/core"中，尽管没有这样的目录。实际上，著名的目录比文件层次结构中的src文件夹高出几级。那么需要如何找到著名的目录呢？

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

附言我强烈建议您阅读文档，requireJS太棒了

相关文章：