Rozdzielenie skryptów JS dla mobile i desktop.

Question

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

 

 

Answer 1

Wówczas nie zostaną wywołane listenery bo fizycznie nie będą wyświetlane ich buttony w htmlu (ale kod js dalej jest pobierany).

Nie bardzo. Styl display: none nie usuwa elementu z DOM, tylko go ukrywa i usuwa z layoutu strony (efektem czego inne elementy mogą zająć jego miejsce). Listenery w JS podpina się do obiektów w DOM, więc ich widoczność nie ma na to wpływu (ukryte elementy nadal tam są). Przykład (po półtorej sekundzie pokaże się alert z click eventu): https://codepen.io/ScriptyChris/pen/qBaWKgy

Można stworzyć skrypt w JS, który sprawdzi za pomocą metody .matchMedia rozmiar ekranu lub inne cechy urządzenia, na którym jest wyświetlona strona i na tej podstawie dynamicznie doda skrypty odpowiednie dla mobile, desktop itd.

Można też wykryć po stronie serwera z jakiego klienta wysłano zapytanie o stronę i na tej podstawie odesłać stronę z odpowiednimi skryptami dla desktop, mobile itd. Przed użyciem warto zapoznać się z wadami tego rozwiązania.

Comments

Nie bardzo. Styl display: none nie usuwa elementu z DOM, tylko go ukrywa i usuwa z layoutu strony (efektem czego inne elementy mogą zająć jego miejsce). Listenery w JS podpina się do obiektów w DOM, więc ich widoczność nie ma na to wpływu (ukryte elementy nadal tam są). Przykład (po półtorej sekundzie pokaże się alert z click eventu): https://codepen.io/ScriptyChris/pen/qBaWKg

 Dokładnie o to mi chodziło ale chyba nie precyzyjnie o tym napisałem. Skrypt może być wykonany wywołując go tak jak to zrobiłeś ale samo wciśniecie buttona jest niemożliwe z poziomu strony. Stąd też to pytanie o breakpointy aby uniknąć wywołania :)

Szukam jakiś libek aby trochę podpatrzeć jak inni to wykorzystują, jak coś znajdę to wrzucę tutaj i mam nadzieje że jeśli coś Ci się trafi również dasz znać :)