• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Rozdzielenie skryptów JS dla mobile i desktop.

+1 głos
91 wizyt
pytanie zadane 25 listopada 2020 w JavaScript przez name() Nowicjusz (200 p.)

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

 

 

1 odpowiedź

0 głosów
odpowiedź 25 listopada 2020 przez ScriptyChris Mędrzec (181,080 p.)

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.

komentarz 25 listopada 2020 przez name() Nowicjusz (200 p.)

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ć :)

Podobne pytania

+3 głosów
2 odpowiedzi 111 wizyt
0 głosów
4 odpowiedzi 3,126 wizyt
pytanie zadane 6 kwietnia 2018 w Java przez timati Bywalec (2,060 p.)
–1 głos
2 odpowiedzi 193 wizyt
pytanie zadane 23 listopada 2017 w Java przez BartekDataIT Użytkownik (770 p.)

88,661 zapytań

137,269 odpowiedzi

306,597 komentarzy

58,863 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...