[英]Implementing Famo.us
我正在嘗試學習如何使用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?
這是使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.