Question

有人能解释一下SAPUI5中Event Bus和Router之间的区别吗？请帮助我在哪种情况下我们必须使用路由器或事件总线。

Answer 1

让我试着在购物场景中解释一下。

假设您正在浏览“MyshopWebsite”购物网站。我们认为它是使用SAP UI5库开发的。

主要功能：

主页上的无限滚动（首先加载，例如，n个项目，然后在您到达底部时再加载10个项目。
点击产品，您可以在单独的页面中查看其详细信息。
建议根据您的选择显示在侧面板上。

场景1：现在，在主页上滚动。一旦达到最低点，就会加载新产品。注意：

在这里，我们需要在同一页面上显示更多信息。我们没有浏览或更改浏览器HASH。
路由器用于导航到与当前页面不同的页面并传递所需数据。所以，我不会在这里使用它。我希望在同一页面上，而不是更改浏览器URL及其当前哈希值。
那么，如何在到达页面末尾后显示更多产品？检查浏览器页面末尾（通过JS）并加载更多内容。有很多方法。

所以，我们认为有一个Messenger，X，他的工作就是告诉全世界：嘿，他到达了页面末尾!!他到达了End of Page。我们需要更多产品!!!

还有一个听众L，他一直在听我们的使者，X。当他听到他时，他会向他发送新的数据。

所以，让我们把它转换成技术术语。

function initMethod() {
    var eventBus = sap.ui.getCore().getEventBus();
    eventBus.subscribe("homePage", "reachedEndOfPage", handleEndOfPage, this); // Listener L
}

function reachedEndOfPage() {
    var eventBus = sap.ui.getCore().getEventBus();
    eventBus.publish("homePage", "reachedEndOfPage"); // Messenger X

}

function handleEndOfPage() {
    // Ok.. lets send more data
}

场景2 ：点击了产品。很简单，把他带到一个新的页面。显示页面的信息。更改Broswer URL和哈希，以便将其加入书签。

选择什么：路由器。

我们的SAPUI5路由器基于Crossroads JS。他们说Crossroads是：

它是一个功能强大且灵活的路由系统。如果使用得当，它可以通过解耦对象以及抽象导航路径和服务器请求来降低代码复杂性。

用于导航的路由器。

但是可以在这里使用事件总线进行导航。怎么样？在产品，发布事件（说“产品点击”）的新闻事件中，然后创建一个处理者，他将订阅“产品点击”事件，然后点击App.navTo或Router.navTo。

所以，差异是事件总线为任何类型的事件创建监听器，您可以手动触发。

路由器习惯于导航，只能听到浏览器HASH的变化。

场景3 ：现在，我希望它变得清晰。我不是导航，但我希望每次用户点击产品时都能听取/做出反应。

所以，我会创建一个Messenger，'Click'，当我点击任何产品时，他会喊（发布）。还有一个建议听众，比如听众'建议'，他将通过我们的信息收听/回应发布的事件：'点击'。

我希望它可以帮到你。如果你仍然有困惑，请告诉我。将尝试根据需要添加更多信息。

Answer 2

使用路由器，您可以在不同目标之间导航。一个目标包含一个或两个视图。

假设您在视图A中有一个列表，并且包含视图B中列表项详细信息的表单。当按下视图A中的列表项时，您可以使用路由器导航到详细视图B.

使用事件总线，您可以在不同的活动控制器之间进行通信。

假设您有一个拆分应用程序，其中包含主视图和详细视图。您可以在主视图中触发事件并在详细视图中监听这些事件（反之亦然）

SAPUI5中路由器和eventBus之间的区别是什么

2 个答案: