Actualmente estoy trabajando en un control deslizante de imagen y tengo un problema con la limpieza y la división de mi código en clases propias. Esta es una versión simplista y mínima, por lo que los constructores y otros métodos quedaron fuera.

 // Main class in slimSlider.js import SliderUI from './slimSlider.ui'; class Slider { #addUI() { this.sliderUI = new SliderUI(this.opts,this.#sliderContainer,this.sliderWrapper,this.sliderElements); } #addUIEventsArrow() { this.sliderUI.arrowContainer.sliderButtonLeft.addEventListener('click', () => this.showPrevSlides()); this.sliderUI.arrowContainer.sliderButtonRight.addEventListener('click', () => this.showNextSlides()); } showNextSlides() { this.#slideTransition(false, 'right'); } showPrevSlides() { this.#slideTransition(false, 'left'); } }

Quiero transferir todos los métodos que controlan los detectores de eventos como #addUIEventsArrow de la clase Slider a SliderUi . Pero, ¿cómo puedo llamar a métodos de clase principal como this.showPrevSlides() y this.showNextSlides() desde SliderUi sin tener la instancia de clase y no heredarla?

 // UI class in slimslider.ui.js export default class SliderUI { #addUIArrows() { this.arrowContainer = {} this.arrowContainer.wrapper = document.createElement('div'); SliderHelpers.setElClass(this.arrowContainer.wrapper,this.#controlCssClasses.container.arrowContainer.name); this.arrowContainer.sliderButtonLeft = this.#addUIArrowsSingle('left'); this.arrowContainer.sliderButtonRight = this.#addUIArrowsSingle('right'); this.controlContainer.appendChild(this.arrowContainer.wrapper); } // final result should be something like this #addUIEventsArrow() { this.arrowContainer.sliderButtonLeft.addEventListener('click', () => this.showPrevSlides()); this.arrowContainer.sliderButtonRight.addEventListener('click', () => this.showNextSlides()); } }

Sería bueno si alguien puede ayudar. Gracias