Достижение UI / логического разделения, когда логика требует функций обратного вызова

Question

Насколько я понимаю, в хорошей практике код пользовательского интерфейса должен вызывать логику всякий раз, когда это необходимо, но логика не должна ничего знать о GUI ("слабая связь", см., Например, Как я могу отделить пользователяинтерфейс из бизнес-логики при сохранении эффективности? ).

В настоящее время я пишу веб-приложение Chrome, использующее API chrome.serial.Большинство функций из этого API-интерфейса не блокируют и вместо этого вызывают функцию обратного вызова, когда их работа завершена.Например,

chrome.serial.getDevices(callback)

ищет устройства, а затем вызывает callback со списком найденных устройств.

Теперь, после вызова chrome.serial.getDevices из логической части моего кода, егов конечном итоге результаты должны быть переданы обратно в код пользовательского интерфейса.

Как добиться в этом случае чистого разделения пользовательского интерфейса / логики?Должен ли мой пользовательский интерфейс регистрировать функции обратного вызова с моим логическим кодом для каждого вызова, который он выполняет?Это, кажется, нарушает вышеупомянутый принцип слабой связи и кажется, что это очень быстро сбивает с толку.

Answer 1

Если вы используете инструменты сборки, такие как Webpack или Browserify, тогда ваш «логический объект» может расширять Node's EventEmitter (есть другие реализации, которые работают в браузере, такие как https://github.com/Olical/EventEmitter,, есливы не хотите связывать API-интерфейсы Node с инструментом сборки).

Ваш «логический объект», который является специализированным EventEmitter, использует асинхронный API-интерфейс chrome, который связывается с последовательными устройствами, а затем обрабатывает результаты.в соответствии с вашими правилами уровня данных, а затем генерирует свои собственные события, когда у него есть что-то полезное для пользовательского интерфейса.

Пользовательский интерфейс слушает и прослушивает, и генерирует события на вашем «логическом объекте», в зависимости от того, что происходит,Бонус: этот источник событий может также использоваться отдельными объектами пользовательского интерфейса для связи друг с другом через события.

EventEmitter - это ключ, который сделает этот вид разделения чистым, простым и расширяемым.

Answer 2

Вы можете использовать Обещания .Инициируйте их в коде вашего контроллера и передайте их в представление.Затем представление вызовет свой метод .then() и отобразит результат.

Например:

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

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