Famous框架系列一:famous/core/Surface

famous/core/Surface

既然是Famous的第一篇文章，就先给Famous打个广告：http://periodic.famo.us  Famous12年的作品，点击右下角Fun things to do可以看到操作说明。

我认为Famous框架中最重要的部分莫过于Surface了。

Surface是所有能够被展现的元素的根本，它负责将可见的元素生成DOM输出（目前仅支持DOM，WEBGL版本正在他们的实验室里，并已有华丽视频放出，移步：https://famo.us/blog/）。心血来潮想写一点关于Famous的文章，又害怕自己坚持不下去，就挑重要的最先说吧。

Surface是个虚拟的DIV，真正的DIV是Surface._currentTarget--他的一个属性。Surface会创建一个DIV用以显示内容，并保持这个DIV的引用用于更新。

创建一个Surface：

var surface = new Surface({
    size: [100, 100],
    classes: ['surface'],
    content: '我是Surface！Hello Famous！',
    properties: {
        backgroundColor: '#fff'
    },
    attributes: {
        name: 'surfaceA'
    }
}); 

说一下参数吧：这几个参数不加上也没关系，famous会按默认的来。

size：尺寸（尺寸很关键很关键，由于Famous是一个基于绝对定位的库，尺寸的设置对程序的影响巨大，将来会与Modifier一并说，如果写到这一篇的话。。）

classes：css类，是一个数组的形式

content：内容。这里的内容不仅仅是放几个字或者一两句话，而是一段HTML代码。就我个人的经验，大部分时候还是几个字。。在复制粘贴网络上类似10个酷炫的css效果的时候，插入HTML代码很有用（大牛轻喷，因为我会喷回去的:-D）。

properties：用于控制样式。所有Object.style下的属性都可以写在这里。好吧，就是控制css的地方。

attributes：控制属性的地方。

这些参数初始化的时候忘记写了也没关系，都有方法可以赋值的。比如setContent,setProperties等等，通通都有。

基础就是这些了，平时经常会用的也就是以上这部分。接下来进入意识流阶段，我想到啥就说啥了（意识模糊:-D）。

Surface默认生成的tag是DIV，但也可以生成别的，如<article>,<span>通通都可以。只要给初始化的实例设置这么一个属性：elementType。看源代码我们可以看到，Surface的elementType属性是'div'，所以如果我们需要修改tag名，只需要

surface.elementType = 'span';

这样，之前代码创建的surface的tag就成了span。

Surface除了显示可见内容外还有一个重要的作用是接收和处理事件。Famous是一个挺高层的UI框架，作为框架的使用者，几乎完全不考虑操纵DOM，它唯一与DOM建立联系的就是Surface了，所以DOM的事件如鼠标点击，触摸等等都需要靠Surface来获得（Engine也会获取并处理一部分事件，仅限于body上的事件）。

Surface控制的dom（_currentTarget）在被部署（deploy）到页面时，会触发一个deploy事件。这个事件在你想要直接操作dom（_currentTarget）又纠结这个dom在不在的时候（Surface是虚拟DOM，不会在初始化的第一时间生成DOM部署进页面，而是在初始化后的第一个Engine Tick被部署），非常有用。

好吧，刚刚提到了Engine Tick，就简单解释一下吧：Famous跟游戏框架很像，差不多每秒刷新60次，游戏中一般称为帧，而Famous中我不知道这样称呼合不合适，就按英文的说法叫Engine Tick好了。

Surface有一个家族。目前的成员有（除了Surface）：

CanvasSurface：用于生成<canvas>，干嘛的不用多说吧。恩，下面就随便全举出来好了。

ImageSurface：<img>

InputSurface：<input>

SubmitInputSurface：<input type="submit">

TextareaSurface：<textarea>

VideoSurface：<video>

ContainerSurface：这个既值得一说也不值得一说（好烦:-D），也是个<div>，所不同的是，可以向其中加入其它需要显示的元素，比如往里面加一个Surface和两个ImageSurface，看名字就知道起到一个容器的作用。这个容器本身是个<div>可以直接写内容的。

FormContainerSurface：上面容器的<form>版

每个Surface初始化的时候都可以方便地码出这个Surface的全部css参数，虽然Famous也是支持给Surface配置css类的，但很多时候，一两个属性直接写比较方便。特别是移动端的情况下，少用css，样式参数全写进代码里，能减少服务器请求。把参数写进代码还有一个好处就是方便程序动态调整，比如适配屏幕的时候，fontSize可以根据屏幕的尺寸做像素级的调整。

Surface默认是自带一个css类的：famous-surface。

这个css类首当其冲的就是position: absolute。整个Famous框架都是建立在绝对定位的基础上，个人感觉Famous很多地方更像一个游戏框架。通过绝对定位，有效的降低了dom树的复杂度，并建立自己的渲染树，藉此提升性能，华丽的动画从这里开始。（物理引擎，缓动函数）

构造函数中各种改动标识符，_sizeDirty,_contentDirty，对Surface进行更新的时候，尽量使用提供的各种set方法。。也算是常识吧。。没啥好说的。每一个Tick，都会检查当前的size，content之类的是否dirty，有就更新。

Surface.prototype.setup = function setup(allocator) {
        var target = allocator.allocate(this.elementType);

Famous自带一个DOM对象池，每次生成新的对象都会从池子里找找有没有能用的不在树里的DOM节点。

对应的，这个surface不用了，会被回收。

this.detach(target);
this._currentTarget = null;
allocator.deallocate(target);

内置一个EventHandler。

this._eventOutput = new EventHandler();
this._eventOutput.bindThis(this);

可以监听浏览器事件(on)，抛出自定义事件(emit)，还可以向其他的事件接收者推送自身的事件(pipe)。

surface.on('click', function(event){   //监听浏览器的点击事件
    console.log(event);
    surface.emit('onClick');                //抛出一个onClick事件
});

好啦，关于Surface没啥能说的了。