标签：style class blog code java http
好久之前就看到了famo.us的优良特性，尤其是它避开浏览器弊病的跳跃思维，再加上自己使用JQM来开发Web App时的页面切换的白屏bug，又比对了sencha touch，最后还是决定将famo.us作为开发框架，它是基于浏览器的，目标就是使页面呈现性能最大化，而我不会拿它来做游戏，只是做简单的WebApp，要的就是这个界面显示性能。
但悲剧的是国内没有关于famo.us的教程，近些日子Google被天朝打压的挺惨，幸运的是famo.us官网还是可以访问的，所以以下的学习结果都来自官网http://www.famo.us/，并且famo.us针对开发者是免费开源的，所以不用担心费用问题。
famo.us的基本信息
famo.us不同于以往的HTML，是通过Javascript来驱动进行页面的渲染和切换，HTML的页面结构是通过DOM，而famo.us是通过它自己的渲染树来进行页面的结构布局，这是它与HTML的区别
famo.us的官方教程
官网提供了一个famo.us的教程，链接地址为http://www.famo.us/university，提供了一系列的demo，所见即所得的编辑器和效果，助于学习。
本人总结的学习教程
需要什么?
一共需要6个文件，5个JS文件+一个CSS文件，可以在官网下载的demo文件中找到
文件结构是怎样的？
需要的库文件已经准备好了，现在如何来使用呢？首先可以在项目中新建几个文件夹
项目名称叫做famous,css文件用于放css文件，famous_libs是放了上面的6个库文件，images中放了项目中将来会使用的图片文件，js放将来会使用的js文件，src是一个比较新奇的文件夹，里面放置了页面布局的js文件(一会儿通过一个小例子了解这个src的作用吧)。
来个小例子吧
①在项目根目录中新建一个index.html文件,这里面需要做一个简单的H5基本文档，并且需要在<head>中引入famo.us的库文件，最后需要引入src文件夹中的一个一会儿需要处理的JS文件
index.html
-
<!DOCTYPE HTML>
-
<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" />
-
<span style="white-space:pre"> </span>
-
-
<script type="text/javascript" src="famous_libs/functionPrototypeBind.js"></script>
-
<script type="text/javascript" src="famous_libs/classList.js"></script>
-
<script type="text/javascript" src="famous_libs/requestAnimationFrame.js"></script>
-
-
-
<script type="text/javascript" src="famous_libs/require.js"></script>
-
-
-
<link rel="stylesheet" type="text/css" href="famous_libs/famous.css" />
-
<script type="text/javascript" src="famous_libs/famous.min.js"></script>
-
<pre name="code" class="html"><span> </span>
<script type="text/javascript"> require.config({baseUrl: ‘src/‘}); require([‘index‘]);//这里引入页面布局的那个在src文件夹中的index.js文件 </script> </head> <body></body></html>
②配置页面布局文件 index.js
HTML文件已经准备好了，会发现我们的这个index.html的<body>中并无任何内容，那么这个页面该怎么添加进去，实际上就需要通过JS来实现了，现在需要处理一下index.js了，在src文件件中新建index.js文件。
index.js
-
define(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: ‘hello world <br/><h2>FAMO.US</h2>‘
-
});
-
-
mainContext.add(firstSurface);
-
});
③见证效果吧
PS:这个简单的小例子当然无法观察到famo.us的强大，具体可以到官网查看。
这里面最最核心的就是index.js了，会发现其中
-
var firstSurface = new Surface({
-
content: ‘hello world <br/><h2>FAMO.US</h2>‘
-
});
创建了一个Surface的对象，实际上这个Surface可以映射到HTML标签中的<div>，famo.us已经为我们封装好了
目前本人也就是刚刚接触到这，接下来还要继续学习，后期会完善。
famo.us 一个JavaScript游戏引擎初探,布布扣,bubuko.com
famo.us 一个JavaScript游戏引擎初探
标签：style class blog code java http
原文地址：http://blog.csdn.net/u014646984/article/details/32923211
