Question

我正在尝试学习如何使用Famo.us库。对于初学者，我只想在我的<body>中展示一个表面。所以我尝试了这个：

<html>
<head>
<script>

    var Engine = require('js/famous/core/Engine');
    var Surface = require('js/famous/core/Surface');

    var mainContext = Engine.createContext();

    var firstSurface = new Surface({
      size: [100, 100],
      properties: {
        backgroundColor: '#FA5C4F'
      }
    });

    mainContext.add(firstSurface);
</script>

</head>

<body>
</body>
</html>

但是我收到以下错误：

Uncaught ReferenceError: require is not defined

所以我尝试将脚本添加到<head>：

<script type="text/javascript" src="js/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="js/lib/classList.js"></script>
<script type="text/javascript" src="js/lib/requestAnimationFrame.js"></script>
<script type="text/javascript" src="js/lib/require.js"></script>

现在我收到了这个错误：

Uncaught Error: Module name "js/famous/core/Engine" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded

我做错了什么以及如何在<body>？

中展示此Surface

Answer 1

以下是 Require.js ：

所缺少的内容

在使用require.js
将代码包装在模块中（定义）
需要模块
可以将一些内容放入您的表面（可选）

注意：请参阅下面的标准全局版本，不包含require.js

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="description" content="Famo.us 0.3.4" />  
    <meta charset="utf-8">  
    <title>Famous 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" />  
    <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>  
    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>  

    <!-- famous -->
    <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" />  
    <script type="text/javascript" src="http://code.famo.us/famous/0.3.4/famous.min.js"></script>  
    <script type="text/javascript">
      define('main', function (require, exports, module) {
        var Engine = require('famous/core/Engine');
        var Surface = require('famous/core/Surface');

        var mainContext = Engine.createContext();

        var firstSurface = new Surface({
          content:'My First Surface',
          size: [100, 100],
          properties: {
            backgroundColor: '#FA5C4F'
          }
        });

        mainContext.add(firstSurface);
      });

      require(['main']);
      console.log('------------start------------')

    </script>
  </head>
  <body class='famous-root'>
  </body>
</html>

请记住：您不必对Famo.us使用require.js。还有一个标准的全局JavaScript构建。该库恰好是为require.js

编写的

<!DOCTYPE HTML>
<html>
  <head>
    <title>Famo.us App</title>
    <meta name="description" content="Famo.us 0.3.1 global-seed" />
    <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>

    <!-- famous -->
    <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" />
    <script type="text/javascript" src="http://code.famo.us/famous/0.3.4/famous-global.min.js"></script>
    <script type="text/javascript">
      var Engine = famous.core.Engine;
      var Surface = famous.core.Surface;

      var mainContext = Engine.createContext();

      var firstSurface = new Surface({
        content:'My First Surface',
        size: [100, 100],
        properties: {
          backgroundColor: '#FA5C4F'
        }
      });

      mainContext.add(firstSurface);

    </script>
  </head>
  <body></body>
</html>

实施Famo.us

1 个答案: