Question

我只是想了解famo.us并想知道为什么当值相同时我们无法重用StateModifier实例。

var rotateModifierOne = new StateModifier({
  transform: Transform.rotateZ(Math.PI/4)
});

var rotateModifierTwo = new StateModifier({
  transform: Transform.rotateZ(Math.PI/4)
});

如下所示：http://famo.us/university/famous-101/positioning/4/

为什么我们不能这样做

var mainContext = Engine.createContext();

var translateModifier = new StateModifier({
  transform: Transform.translate(200, 0, 0)
});

var rotateModifier = new StateModifier({
  transform: Transform.rotateZ(Math.PI/4)
});

var redSurface = new Surface({
  size: [100, 100],
  classes: ['red-bg']
});

var greySurface = new Surface({
  size: [100, 100],
  classes: ['grey-bg']
});

mainContext
  .add(translateModifier)
  .add(rotateModifier)
  .add(redSurface);

mainContext
  .add(rotateModifier)
  .add(translateModifier)
  .add(greySurface);

为什么在值相同时我们需要单独的实例？我希望得到答案，以帮助我了解状态修饰符的使用方式。

Answer 1

似乎应该可以工作，这让我开始疯狂。我不能说我知道他们让它不起作用的原因是因为我相信你后来在同一课程中看到他们打算在上下文中添加一个修饰符，或者你附加的任何东西并使它成为一个新的变量保持偏移/变换，让你做相对位置。

我可以说他们的方法比一遍又一遍地看同一个修饰符更清晰，更容易阅读。特别是如果你使用这个很多来给出相对的位置。看看http://famo.us/guides/render-tree。我也常常对使用Modifier和StateModifier非常恼火，花了一段时间才找到http://famo.us/guides/layout

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

    var mainContext = Engine.createContext();

    mainContext.downMod = new StateModifier({
      transform: Transform.translate(0, 100, 0)
    });

    var leftSurface = new Surface({
      size: [120, 100],
      content: 'left surface',
      properties: {
        color: 'white',
        backgroundColor: '#FA5C4F'
      }
    });

    var rightSurface = new Surface({
      size: [120, 100],
      content: 'right surface',
      properties: {
        color: 'white',
        backgroundColor: '#404040'
      }
    });

    rightSurface.rightMod = new StateModifier({
      transform: Transform.translate(150, 0, 0)
    });

    var node = mainContext.add(mainContext.downMod);

    //Now anything attached to node is actually attached to mainContext with that singular modifier attached

    node.add(leftSurface);
    node.add(rightSurface.rightMod).add(rightSurface);

Answer 2

StateModifier的消耗与它们扩展的Modifier对象相同。他们需要与子节点建立一对一的关系。 StateModifiers如注释中所述更改其子可渲染视觉更改的状态。

您需要为每个节点提供单独的修改器的原因是设计。从修改器到树中的另一个节点存在一对一的关系。这是由于每个修饰符（节点）的放置都具有父子关系。

功能原因，一次不将修饰符应用于多个Renderable，可能是出于性能原因并保持代码可维护。下面的示例中显示了一种设计模式和最佳实践，以完成上述问题的答案。出于我们的目的，StateModifier实际上不仅仅是一个维护它的子项属性的修饰符，所以我们不会在这里解释它们的区别。

一些事实：

树中有两种类型的节点，Modifiers和Renderables
每个节点代表树中分支的级别

在你的例子中，你想对表面一和表面二做同样的效果：

首先采用此示例：Two nodes

mainContext.add(translateModifierOne).add(rotateModifierOne).add(redSurface);
mainContext.add(translateModifierTwo).add(rotateModifierTwo).add(greySurface);

它类似于您的示例，并且有两个修改器节点通过将曲面放置在彼此相同的精确位置但使用旋转修改器旋转不同的方向来执行相同的操作。

现在让我们看一下这个例子：One node

var myView = new RenderNode();

myView.add(rotateModifierOne).add(redSurface);
myView.add(rotateModifierTwo).add(greySurface);

mainContext.add(translateModifierTwo).add(myView);

它使用一个应用于渲染节点的修改器，将两个曲面放在同一个确切的位置。父渲染节点（myView）有两个节点连接在同一级别，并影响它们的位置。它确实显示了如何通过使用渲染节点将修改器与节点的一对一关系应用于多个表面。

又一个例子：One node chaining another One

var myView = new RenderNode();

var initialTime = Date.now();
var myState = new Modifier({
    transform: function(){
        return Transform.rotateZ(0.002 * (Date.now() - initialTime));
    }
});
myView.add(redSurface);
myView.add(greySurface);

mainContext.add(translateModifierTwo).add(myState).add(myView);

在这个例子中，我们看到两个链接在一起的修饰符，用于转换添加了两个曲面的渲染节点。在这种情况下，我们使用其父渲染节点对两个曲面应用相同的效果。很难看到，但它们在相同的位置堆叠在一起。它可以转换为如何设置将修改器应用于两个不同的曲面。不是很有用，但确实摆脱了重复的修饰符。

简单修复示例：Give each surface it's own modifier

myView.add(rotateModifierOne).add(redSurface);
myView.add(rotateModifierTwo).add(greySurface);

我们对每个曲面应用一个父修改器，使它们在树中具有唯一性，使它们的旋转偏移我们的原始修改器。

为什么我们不能重用状态修饰符？

2 个答案: