2

我已经看到人们Surface在 famo.us 中对类进行子类化并覆盖该deploy函数的示例。这是 famo.us 在可渲染对象上需要的特殊功能吗？我有一个正在构建的“控件”，它具有某些动画，我想在它变得可见时显示它们，但我不希望它们在我实例化对象时开始，我希望它们稍后在显示时显示给用户。这是deploy函数的用途吗？

4

2 回答 2

3

披露：我可能是您看到的许多覆盖部署的示例的作者。

当我使用 Famo.us 并需要将我自己的属性添加到本机 DOM 元素时，我想到了 Surface 中的部署功能。Deploy 从管理 DOM 资源的 ElementAllocator 接收一个目标元素。这是 Surface 更改任何原始 DOM 元素的属性以适应提供给 Surface 的选项的机会。

要回答您的问题，只有在您需要在原始 DOM 元素显示在屏幕上之前访问它时，才真正需要重写 deploy 函数。但是，您只需要设置元素的不透明度，并且可以在“部署”事件中使用表面来设置。

这是使用事件的示例..

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

var context = Engine.createContext();

var surface = new Surface({
    size:[200,200],
    content:"Hello!",
    properties: {
        backgroundColor:'green',
        color:'white',
        textAlign:'center',
        lineHeight:'200px'
    }
})

surface.on('deploy',function(){
    console.log("Deployed!");
    surface.state.setOpacity(1);
})

surface.state = new StateModifier({ origin:[0.5,0.5]});

surface.state.setOpacity(0);

context.add(surface.state).add(surface);

在使用部署事件时，您还可以看到一些非常有趣的东西。如果您通过 Web 控制台或 grunt 重新加载代码，并且 Famo.us 应用程序不是当前可见的选项卡，则不会调用部署函数。这是 requestAnimationFrame 的一个功能，允许它不花费周期更新不可见的屏幕。当您最终打开选项卡时，您可以看到“已部署！” 被记录到控制台。

希望这可以帮助！

于 2014-05-23T15:33:17.957 回答
2

我不确定是否要覆盖部署方法，但我认为您正在寻找的是“部署”事件。

当将表面添加到实时 dom 时，确实会触发“部署”事件。因此，对于要在表面位于 dom 树中之后运行的代码：

var surface = new Surface({content: 'foo'})
surface.on('deploy', function() {
   // your code that requires surface to be in the dom
});

我不是 famo.us 开发人员，所以这不是“官方”答案，但我确实在源代码中看到了这个并且已经开始使用它并且它有效。

来源：https ://github.com/Famous/core/blob/35461b36c8d09d39e96c3d61ebd7908946d3f668/Surface.js#L451

于 2014-05-23T00:37:27.467 回答