Question

为了构建干净的代码，Famo.us使用事件与模块进行通信。大多数Event guide都显示了关于 EventHandler 的示例。现在我们应该用输入和输出事件构建健壮的视图，如何实际使用它？即输入和输出处理程序的目的是什么？

Answer 1

为了构建健壮的模块，可以方便地将代码分成Widgets，Widgets只负责它们的构建功能。以下是构建窗口小部件的官方方法：

function Widget(){
        this.eventOutput = new EventHandler();
        this.eventInput = new EventHandler();
        EventHandler.setInputHandler(this, this.eventInput);
        EventHandler.setOutputHandler(this, this.eventOutput);
    }

    var widget = new Widget();

总结一下上面的函数，它确实创建了一个带有2个EventHandler的对象，一个用于输入，另一个用于输出。

他们的目的很简单：

所有传入事件，即从窗口小部件对象外部触发的事件将被触发到 eventInput 处理程序。
所有传出事件，即窗口小部件向外部生成的事件都是通过 eventOutput 触发的。

为了更好地理解，您很可能会从窗口小部件内部监听eventInput处理程序，并从窗口小部件代码内部触发eventOutput处理程序。

以下是一个例子：

function Widget(){
        // here we are inside the Widget code scope
        var self = this; // just to keep the root "this" somewhere
        this.eventOutput = new EventHandler();
        this.eventInput = new EventHandler();

        this.eventInput.on("sayHello", function()
        {
            alert("Hello")
        });

        function didSomething()
        {
            self.eventOutput.trigger("didSomething");
        }
    }

然后您可以按照以下方式使用小部件：

var widget = new Widget();
widget.eventOutput.on("didSomething", function(){alert("The widget did something!")})
widget.eventInput.trigger("sayHello"); // will alert "Hello" from inside the widget

现在我们可能不愿意知道使用它的小部件的内部结构。在这里，我们正在调用和监听 eventOutput 和 eventInput ，它们实际上可能有任何名称。为了清晰的代码，我们可以将这些事件函数绑定到窗口小部件本身，将以下行添加到窗口小部件中：

... code ...
EventHandler.setInputHandler(this, this.eventInput);
EventHandler.setOutputHandler(this, this.eventOutput);
... code ...

现在可以通过以下方式监听和触发小部件：

widget.on("didSomething", function(){alert("The widget did something!")});
widget.trigger("sayHello"); // will let the widget alert "Hello"

管道怎么样？

这很简单，同时将widgetA传递给widgetB

widgetA.pipe(widgetB);

widgetA.eventOutput触发的所有事件都通过管道传输（读取触发）到widgetB.eventInput

注意：相同的原则可以应用于订阅，以下将实现完全相同的结果：

widgetB.subscribe(widgetA);

如何使用famo.us中的输入和输出处理程序？

1 个答案: