Discussion:
Wczytywanie skryptów
(Wiadomość utworzona zbyt dawno temu. Odpowiedź niemożliwa.)
Roman Tyczka
2018-09-10 09:15:48 UTC
Permalink
Witam,

Czy wczytywanie skryptów typu jQuery w sekcji <head> jest poprawne?
--
pozdrawiam
Roman Tyczka
rePeter
2018-09-10 09:50:46 UTC
Permalink
Mon, 10 Sep 2018 11:15:48 +0200
Post by Roman Tyczka
Witam,
Czy wczytywanie skryptów typu jQuery w sekcji <head> jest poprawne?
IMHO, najlepiej na końcu strony przed samym </body>
jQuery i pozostałe skrypty.
--
pozdrawiam, Peter
Roman Tyczka
2018-09-10 11:24:26 UTC
Permalink
Post by rePeter
Post by Roman Tyczka
Czy wczytywanie skryptów typu jQuery w sekcji <head> jest poprawne?
IMHO, najlepiej na końcu strony przed samym </body>
jQuery i pozostałe skrypty.
To jest trochę kłopot. Bo jak rozwiązujecie taki układ, że strona składa
się z kilku fragmentów, będących szablonami i w nich następują odwołania do
jQuery, które podpinają zdarzenia pod np. buttony formularzy? One są w
środku strony, więc jak zaczynają działać to jQuery jeszcze nie będzie
załadowane, bo ładuje się na końcu i bach.. błąd.
--
pozdrawiam
Roman Tyczka
rePeter
2018-09-10 12:05:06 UTC
Permalink
Mon, 10 Sep 2018 13:24:26 +0200
Post by Roman Tyczka
Post by rePeter
Post by Roman Tyczka
Czy wczytywanie skryptów typu jQuery w sekcji <head> jest poprawne?
IMHO, najlepiej na końcu strony przed samym </body>
jQuery i pozostałe skrypty.
To jest trochę kłopot. Bo jak rozwiązujecie taki układ, że strona składa
się z kilku fragmentów, będących szablonami i w nich następują odwołania do
jQuery, które podpinają zdarzenia pod np. buttony formularzy? One są w
środku strony, więc jak zaczynają działać to jQuery jeszcze nie będzie
załadowane, bo ładuje się na końcu i bach.. błąd.
Skrypty muszą zaczekać aż wczyta się cały DOM,
czyli albo ładować się na końcu strony
albo, jeśli ładowane w header, czekać aż reszta strony się załaduje.
np. $(document).ready lub $(window).load
W przeciwnym wypadku skrypt może odwoływać się do elementu który jeszcze nie został
wczytany/utworzony.
--
pozdrawiam, Peter
Roman Tyczka
2018-09-10 13:56:33 UTC
Permalink
Post by rePeter
Post by Roman Tyczka
Post by rePeter
IMHO, najlepiej na końcu strony przed samym </body>
jQuery i pozostałe skrypty.
To jest trochę kłopot. Bo jak rozwiązujecie taki układ, że strona składa
się z kilku fragmentów, będących szablonami i w nich następują odwołania do
jQuery, które podpinają zdarzenia pod np. buttony formularzy? One są w
środku strony, więc jak zaczynają działać to jQuery jeszcze nie będzie
załadowane, bo ładuje się na końcu i bach.. błąd.
Skrypty muszą zaczekać aż wczyta się cały DOM,
czyli albo ładować się na końcu strony
albo, jeśli ładowane w header, czekać aż reszta strony się załaduje.
np. $(document).ready lub $(window).load
W przeciwnym wypadku skrypt może odwoływać się do elementu który jeszcze nie został
wczytany/utworzony.
Aj noł...
Jeszcze raz, postaram się lepiej opisać.
Używam szablonów Mustache, one pozwalają osadzać jedne szablony w innych
przez składnię:

<html>
<head>
</head>
<body>
{{> szablon naglowka}}
{{> szablon menu}}
{{> szablon informacji X}}
{{> szablon stopki}}
{{> szablon z includami jQuery}}
</body>

I teraz za pomocą szablonu "szablon z includami jQuery" ładuję jQuery na
końcu.
Ale już w szablonie "szablon informacji X" już chcę przypisać zdarzenia
click do buttona. I nie mogę.
Jak to obejść?
--
pozdrawiam
Roman Tyczka
rePeter
2018-09-10 18:18:52 UTC
Permalink
Mon, 10 Sep 2018 15:56:33 +0200
Post by Roman Tyczka
Post by rePeter
Post by Roman Tyczka
Post by rePeter
IMHO, najlepiej na końcu strony przed samym </body>
jQuery i pozostałe skrypty.
To jest trochę kłopot. Bo jak rozwiązujecie taki układ, że strona składa
się z kilku fragmentów, będących szablonami i w nich następują odwołania do
jQuery, które podpinają zdarzenia pod np. buttony formularzy? One są w
środku strony, więc jak zaczynają działać to jQuery jeszcze nie będzie
załadowane, bo ładuje się na końcu i bach.. błąd.
Skrypty muszą zaczekać aż wczyta się cały DOM,
czyli albo ładować się na końcu strony
albo, jeśli ładowane w header, czekać aż reszta strony się załaduje.
np. $(document).ready lub $(window).load
W przeciwnym wypadku skrypt może odwoływać się do elementu który jeszcze nie został
wczytany/utworzony.
Aj noł...
Jeszcze raz, postaram się lepiej opisać.
Używam szablonów Mustache, one pozwalają osadzać jedne szablony w innych
<html>
<head>
</head>
<body>
{{> szablon naglowka}}
{{> szablon menu}}
{{> szablon informacji X}}
{{> szablon stopki}}
{{> szablon z includami jQuery}}
</body>
I teraz za pomocą szablonu "szablon z includami jQuery" ładuję jQuery na
końcu.
Ale już w szablonie "szablon informacji X" już chcę przypisać zdarzenia
click do buttona. I nie mogę.
Jak to obejść?
jQuery możesz załadować w nagłówkach, byleby skrypty z niego korzystające odpalać po
załadowaniu elementu do którego się odnoszą. Powinno zadziałać.
--
pozdrawiam, Peter
Roman Tyczka
2018-09-10 18:35:56 UTC
Permalink
Post by rePeter
Post by Roman Tyczka
Post by rePeter
Post by Roman Tyczka
Post by rePeter
IMHO, najlepiej na końcu strony przed samym </body>
jQuery i pozostałe skrypty.
To jest trochę kłopot. Bo jak rozwiązujecie taki układ, że strona składa
się z kilku fragmentów, będących szablonami i w nich następują odwołania do
jQuery, które podpinają zdarzenia pod np. buttony formularzy? One są w
środku strony, więc jak zaczynają działać to jQuery jeszcze nie będzie
załadowane, bo ładuje się na końcu i bach.. błąd.
Skrypty muszą zaczekać aż wczyta się cały DOM,
czyli albo ładować się na końcu strony
albo, jeśli ładowane w header, czekać aż reszta strony się załaduje.
np. $(document).ready lub $(window).load
W przeciwnym wypadku skrypt może odwoływać się do elementu który jeszcze nie został
wczytany/utworzony.
Aj noł...
Jeszcze raz, postaram się lepiej opisać.
Używam szablonów Mustache, one pozwalają osadzać jedne szablony w innych
<html>
<head>
</head>
<body>
{{> szablon naglowka}}
{{> szablon menu}}
{{> szablon informacji X}}
{{> szablon stopki}}
{{> szablon z includami jQuery}}
</body>
I teraz za pomocą szablonu "szablon z includami jQuery" ładuję jQuery na
końcu.
Ale już w szablonie "szablon informacji X" już chcę przypisać zdarzenia
click do buttona. I nie mogę.
Jak to obejść?
jQuery możesz załadować w nagłówkach, byleby skrypty z niego korzystające odpalać po
załadowaniu elementu do którego się odnoszą. Powinno zadziałać.
No, że zadziała to wiem, tak zresztą teraz mam, tylko właśnie spotykałem
się z twierdzeniem, że skrypty to na końcu stąd ten wątek zacząłem, żeby to
rozjaśnić. I nadal nic nie wiem. Bo niby warto na końcu, ale nie można, gdy
stronka trochę bardziej skomplikowana niż hello world.
--
pozdrawiam
Roman Tyczka
rePeter
2018-09-10 18:49:20 UTC
Permalink
Mon, 10 Sep 2018 20:35:56 +0200
Post by Roman Tyczka
No, że zadziała to wiem, tak zresztą teraz mam, tylko właśnie spotykałem
się z twierdzeniem, że skrypty to na końcu stąd ten wątek zacząłem, żeby to
rozjaśnić. I nadal nic nie wiem. Bo niby warto na końcu, ale nie można, gdy
stronka trochę bardziej skomplikowana niż hello world.
Nie możesz w programie używać danych, których jeszcze nie wczytałeś (przeglądarka nie
pobrała), co w tym dziwnego/skomplikowanego?
--
pozdrawiam, Peter
Borys Pogoreło
2018-09-10 21:10:49 UTC
Permalink
Post by Roman Tyczka
To jest trochę kłopot. Bo jak rozwiązujecie taki układ, że strona składa
się z kilku fragmentów, będących szablonami i w nich następują odwołania do
jQuery, które podpinają zdarzenia pod np. buttony formularzy? One są w
środku strony, więc jak zaczynają działać to jQuery jeszcze nie będzie
załadowane, bo ładuje się na końcu i bach.. błąd.
Klasyczny problem jajka i kury, praktycznie nierozwiązywalny w śmietnikach
typu Wordpress. Teoretycznie mógłbyś spróbować przechwycić wszystkie
wywołania jQuery, skolejkować i uruchomić po załadowaniu właściwej
biblioteki. Ale jeśli masz do czynienia z cudzym kodem, to tam może dziać
się wszystko i takie rozwiązanie zaraz wybuchnie.

Skrypty zaś wczytuje się w stopce, bo ich przetwarzanie blokuje
renderowanie strony. A przy kilkusetkilobajtowych klockach kodu to staje
się zauważalne na telefonach.
--
Borys Pogoreło
borys(#)leszno,edu,pl
Roman Tyczka
2018-09-11 08:32:59 UTC
Permalink
Post by Borys Pogoreło
Post by Roman Tyczka
To jest trochę kłopot. Bo jak rozwiązujecie taki układ, że strona składa
się z kilku fragmentów, będących szablonami i w nich następują odwołania do
jQuery, które podpinają zdarzenia pod np. buttony formularzy? One są w
środku strony, więc jak zaczynają działać to jQuery jeszcze nie będzie
załadowane, bo ładuje się na końcu i bach.. błąd.
Klasyczny problem jajka i kury, praktycznie nierozwiązywalny w śmietnikach
typu Wordpress. Teoretycznie mógłbyś spróbować przechwycić wszystkie
wywołania jQuery, skolejkować i uruchomić po załadowaniu właściwej
biblioteki. Ale jeśli masz do czynienia z cudzym kodem, to tam może dziać
się wszystko i takie rozwiązanie zaraz wybuchnie.
Kod jest mój, znaczy nie jest to jakiś CMS czy coś, tylko cały kod jest
własny. Mogę z nim robić co chcę... obym tylko umiał ;-)
Na czym polega to przechwytywanie wywołań jQuery?
Bo sprawa jest teoretycznie prosta. W każdym z tych małych szablonów
potrzebuję przypinać zdarzenia, używam do tego jQuery, ale szablon jest
wczytany, gdy jQuery jeszcze nie ma. Można by to przypięcie zdarzeń wsadzić
w SetTimeout(), ale to drut, bo nigdy nie wiadomo czy czas jest odpowiedni.
Szkoda, że nie ma czegoś takiego jak SetTimeOut() ale z flagą afterLoadPage
czy coś w tym stylu.
Albo teraz wymyśliłem, mógłbym w nagłówku mieć zadeklarowaną jakąś tablicę
funkcji i do niej pakować wywołania z wnętrza strony, a stopka by tylko to
wyciągała z tablicy i odpalała, ale nie wiem jak to zrobić.
Post by Borys Pogoreło
Skrypty zaś wczytuje się w stopce, bo ich przetwarzanie blokuje
renderowanie strony. A przy kilkusetkilobajtowych klockach kodu to staje
się zauważalne na telefonach.
No i właśnie dlatego warto te skrypty mieć na końcu i o to walczyć.
--
pozdrawiam
Roman Tyczka
Borys Pogoreło
2018-09-13 21:28:42 UTC
Permalink
Post by Roman Tyczka
Kod jest mój, znaczy nie jest to jakiś CMS czy coś, tylko cały kod jest
własny. Mogę z nim robić co chcę... obym tylko umiał ;-)
Na czym polega to przechwytywanie wywołań jQuery?
Trochę za bardzo uprościłem, bo to o czym myślę nie zadziała w Wordpressie.
Są jakieś wtyczki, które próbują ogarnąć ten śmietnik, ale chyba przepisują
HTML.

Jeśli masz kontrolę, to już jest sporo. Bo zamiast uruchamiać kod JS możesz
owinąć go w funkcję, wrzucić do jakiejś kolejki (nawet prostej tablicy), a
później uruchomić po kolei w odpowiednim kontekście.
Post by Roman Tyczka
Bo sprawa jest teoretycznie prosta. W każdym z tych małych szablonów
potrzebuję przypinać zdarzenia, używam do tego jQuery, ale szablon jest
wczytany, gdy jQuery jeszcze nie ma. Można by to przypięcie zdarzeń wsadzić
w SetTimeout(), ale to drut, bo nigdy nie wiadomo czy czas jest odpowiedni.
Szkoda, że nie ma czegoś takiego jak SetTimeOut() ale z flagą afterLoadPage
czy coś w tym stylu.
A to akurat bardzo prosto rozwiązać tak jak opisałem. Wrzuć sobie gdzieś
element docelowy, nazwę zdarzenia i funkcję do wywołania, a po
inicjalizacji jQuery na podstawie tego przypnij wszystkie eventy.

Albo zwyczajnie użyj addEventListener(). jQuery był do tego potrzebny, gdy
w eventach był bałagan, IE miał własne funkcje i inną strukturę obiektu
zdarzenia. jQuery to normalizowało.
--
Borys Pogoreło
borys(#)leszno,edu,pl
Loading...