Czesc, zastanawiam sie w jaki sposob zaleca sie pisanie kodu JS dla responsywnych aplikacji.
Mianowicie: czy i w jaki sposób rozdzielać kod JS dla wersji mobilnych i desktopowych, zakładając że jest to jedna aplikacja.
Kod który jest potrzebny tylko dla użytkownik mobilnych po co ma być dostępny na urządzeniach desktopowych?
No i odwrotnie co jest większym "problemem" funkcjonalności desktopowe będą niepotrzebnie wczytywane na mobilnych co może spowolnić wczytywanie przy kiepskim połączeniu z internetem no i potencjalnie powodować niechciane wywołania itp.
Poniżej prosty przykład.
const menuBtn = document.querySelector('.menuBtn');
const menuMobile = document.querySelector('.menuMobile');
const toggleEle = function(el){
el.classList.toggle('animateShow');
};
menuBtn.addEventListener('click', () => {toggleEle(menuMobile)});
Ta funkcjonalność jest potrzebna tylko na mobilnych co z tym zrobić dla desktopów?
W css jest media queries można by było jak to widziałem w jakimś kursie ukrywać i odkrywać elementy po przez "display: none". Wówczas nie zostaną wywołane listenery bo fizycznie nie będą wyświetlane ich buttony w htmlu (ale kod js dalej jest pobierany).
Co w przypadku funkcjonalności które są wywoływane inaczej niż listenerem np. od razu po zaladowniu dokumentu?
Dobrym rozwiązaniem może będzie zrobienie breakpointów w JS takich jak w CSS po przez:
window.screen.availWidth
Dajcie znać w jaki sposób wy ogarniacie temat. Może znacie jakieś biblioteki które ułatwią prace? A może zupełnie bredzę i jest to nieistotne :D