Question

据我所知，在实践中，UI代码应该在需要时调用逻辑，但逻辑应该对GUI一无所知（“松散耦合”，例如参见How can I separate the user interface from the business logic while still maintaining efficiency?）。

我目前正在编写一个使用chrome.serial API的Chrome网络应用。这个api中的大多数函数都是非阻塞的，而是在完成工作时调用回调函数。例如

chrome.serial.getDevices(callback)

搜索设备，然后使用已找到的设备列表调用callback。

现在，在从我的代码的逻辑部分调用chrome.serial.getDevices之后，其结果最终必须传回UI代码。

在这种情况下，如何实现干净的UI /逻辑分离？我的UI是否需要在每次调用时使用我的逻辑代码注册回调函数？这似乎违反了松散耦合的上述原则，感觉很快就会变得非常混乱。

Answer 1

您可以使用Promises。在控制器代码中启动它们并将它们传递给视图。然后，视图将调用其.then()方法并显示结果。

例如：

//controller.js
myAsyncTask = new Promise(resolve,reject=>{
   chrome.serial.getDevices(resolve)
})
view(myAsyncTask);

//view.js
function view(myAsyncTask){
   myAsyncTask.then(render);
}

Answer 2

如果您正在使用构建工具，例如Webpack或Browserify，那么您可以让您的“逻辑对象”扩展Node EventEmitter（还有其他在浏览器中工作的实现，例如https://github.com/Olical/EventEmitter ，如果您不想使用构建工具捆绑Node API。

您的“逻辑对象”是一个专门的EventEmitter，它运行chrome异步API，它接触串行设备，然后根据您的数据层规则处理结果，然后在它有用的事情时发出自己的事件。用户界面。

UI会监听并发出“逻辑对象”上的事件，具体取决于发生的情况。额外奖励：此事件发射器也可以由单独的UI对象使用，以通过事件相互通信。

EventEmitter是使这种分离感觉干净，简单和可扩展的关键。

当逻辑需要回调函数时实现UI /逻辑分离

2 个答案: