实施Famo.us

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
将代码包装在模块中（定义）
需要模块
可以将一些内容放到您的表面（可选）

注意：请参阅以下内容，了解没有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 个解决方案

解决方案1
2 已采纳 2014-12-28 18:52:11

实施Famo.us

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-12-28 18:52:11

解决方案1
2 已采纳 2014-12-28 18:52:11