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);