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

据我所知，在良好的实践中，UI代码应该在需要时调用逻辑，但逻辑应该对GUI一无所知（“松耦合”，参见示例）

我目前正在编写一个使用

chrome.serial

api的chrome web应用程序。此api中的大多数函数都是非阻塞的，它们在完成工作时调用回调函数。比如说

chrome.serial.getDevices(callback)

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

回调

现在，在从我代码的逻辑部分调用

chrome.serial.getDevices

之后，其结果最终必须传回UI代码

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

您可以使用。在控制器代码中启动它们并将它们传递给视图。然后视图将调用其

.then（）

方法并显示结果

例如：

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

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

---

如果您正在使用构建工具，如Webpack或Browserify，那么您可以让“逻辑对象”扩展节点的

EventEmitter

（还有其他在浏览器中工作的实现，例如，如果您不想将节点API与构建工具捆绑在一起）

您的“逻辑对象”是一个专门的EventEmitter，它操作chrome async API，该API与串行设备联系，然后根据数据层规则处理结果，然后在对UI有用时发出自己的事件

UI会侦听“逻辑对象”上的事件，并根据发生的情况发出这些事件。好处：这个事件发射器还可以被单独的UI对象使用，通过事件相互通信

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