3

Estoy tratando de implementar la OOP para manipular el DOM pero hay ciertas cosas que no se donde colocar por ejemplo los addEventListeners, un caso puntual que estoy enfrentando es, he creado un objeto que trabaja con algunos elementos del DOM y necesito identificar el nivel de scroll que realice el usuario en dicho objeto(Menu). Una manera de hacerlo sin la implementacion de la OOP es:

//===============================================
//ARCHIVO Menu.JS
//===============================================

exports.Menu = () => {
    //Implementación sin OOP
     const mainNav     = document.getElementById( 'main-nav' );
     const features    = document.getElementById( 'features-container' );
     let lastScrollTop = 0;

     const fixMenu = () => {

        const currentScroll = window.scrollY;

        //darle nuevos estilos al navbar
        if ( currentScroll > 0 ) {
            mainNav.classList.add( 'is-scrolled' );
        } else {
            mainNav.classList.remove( 'is-scrolled' );
        }

        //mostrar u ocultar navbar segun direccion del scroll
        if ( currentScroll > lastScrollTop ) {
             mainNav.classList.add( 'is-up' );
        } else {
            mainNav.classList.remove( 'is-up' );
        }

        lastScrollTop = currentScroll;
    };

    window.addEventListener( 'scroll', fixMenu );
}     

//===============================================
//ARCHIVO Index.JS
//===============================================    

import {Menu} from './menu';    

const menu    = document.getElementById('menu');
const toggler = document.getElementById('toggler');    

Menu(menu, toggler);

Ahora como implemento lo anterior en OOP, donde coloco los addEventListeners?, dentro del mismo objeto? o por fuera?

//===============================================
//ARCHIVO(objeto) Menu.js
//===============================================    

exports.Menu = function ( menu, toggler ) {

  const self = this;

  function _isDom ( el ) {
    return (el !== null && (el.nodeType === 1 || el.nodeType === 11))
      ? el
      : self.error = '[PersaErp] target is null or undefined';
  }

  self.initialize = () => {
    self.menu       = _isDom( menu );
    self.toggler    = _isDom( toggler );
    self.initScroll = 0;
    self.travelled  = 0;
  };

  self.initialize();
};

//===============================================
//ARCHIVO Index.JS
//===============================================    

import {Menu} from './menu';    

const menu    = document.getElementById('menu');
const toggler = document.getElementById('toggler');    

const mainMenu = new Menu(menu, toggler);
1

1 respuesta 1

1

Si quieres encapsular ciertos elementos del DOM en clases, lo lógico es poner los Event Listener también dentro. Lo que yo te propongo es que uses métodos genéricos para cada evento que quieras capturar, voy a ponerte el ejemplo con un botón.

class Button {

    constructor(id){
         let element = document.getElementById(id);
         element.addEventListener("click",this.click);
    }

    click(){

    }
}

class HomeButton extends Button{
    constructor(){
        super("home-button");
    }
    click(){
        alert("Click en Home Button");
    }
}

let boton = new HomeButton();

HTML:

 <button id="home-button>HOME</button>

Entonces cada clase que herede de Button puede sobreescribir click, que será llamado cuando se haga click en aquel botón. Desde fuera no tienes que tocar nada de los eventos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.