javascript - How to properly update the UI and the business logic with loose coupling

Question

Say I have a button where the user clicks and 2+ things would happen:

1. A business logic will be invoked.
2. UI will change on screen.

The invoked business logic looks like this:

car.setCommand(new StartCarCommand(engine));
car.execute()

the UI looks like this:

class CarUI
{
    startEngine(picture)
    {
         //show car starting engine picture.
    }
}

So How to provide an effective 'Loose coupling' or how should this be designed. I can surely do something like this:

car.setCommand(new StartCarCommand(engine, carUI));

and in the execute to do:

execute()
{
    engine.start();
    carUI.setPicuture("....");
}

but it feels that it defeats the 'command pattern'. Should I add another command pattern only for the UI?

Answer 1

等待大神解答