famo.us:famo.us 中的 "deploy"函数的含义是什么？

Question

我见过一些例子，人们在 famo.us 中对 Surface 类进行子类化，并重写 deploy 函数。这是 famo.us 在渲染上需要的特殊函数吗？我有一个我正在构建的“控件”，它有一些我想在它变得可见时显示的动画，但我不希望它们在实例化对象时启动，我希望它们稍后在向用户显示时显示。这就是 deploy 函数的用途吗？

Answer 1

披露:我可能是您见过的许多覆盖部署示例的作者。

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

为了回答你的问题，只有当你需要在原始 DOM 元素显示在屏幕上之前访问它时，才需要重写部署函数。然而，您只需要设置元素的不透明度，并且可以使用“部署”事件上的表面来执行此操作。

这是使用事件的示例..

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);

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

希望这有帮助!