Classroom Examples for decoupling software components

I'm trying to get to grips with highly-decoupled, low-cohesion patterns for designing components.

I am building a graphics editor app.

I'm packaging each Feature of my app as a Web Component, e.g Export-PDF functionality, Boards functionality etc.

The issue is that some components are dependent between them - they call methods of each, have access to their public variables etc.

Since each component needs to be testable in isolation, must be highly-decoupled, must have low inter-dependency with other components, what are some classroom examples for decoupling one from one another?

---

Considering this scenario:

• User presses CTRL+P
• Keybindings are handled by the Shortcuts Component
• Shortcuts Component calls Export-PDF Component .print() method.

---

Some solutions I've though about:

---

Use events

Each component dispatches an event which is then caught in the other component, e.g using this.addEventListener(...

Pros:

• Allows testing in isolation since there are no direct calls to another component's methods.

Cons:

• Will result in many dispatches/listeners which might impact performance.
• There is still a lot of coupling and it has the potential of getting unmanageable.

---

Use direct calls to methods of the other component

Each component simply calls the other components method directly, e.g exportPDF.printPages().

Pros:

• It's the most simple.

Cons:

• Each component is interdependent to one another.
• Component is NOT testable in isolation.

---

What are some other methods of decoupling components?

For the record, the language of interest is Javascript. Although concepts and methods might be applicable across many programming languages, I'm specifically talking about concepts and solutions to the problems using features that JavaScript has.