Groups > pl.comp.lang.javascript > #3514 > unrolled thread

Wczytywanie skryptów

Started by	Roman Tyczka <noemail@because.no>
First post	2018-09-10 11:15 +0200
Last post	2018-09-13 23:28 +0200
Articles	11 — 3 participants

Back to article view | Back to pl.comp.lang.javascript

  Wczytywanie skryptów Roman Tyczka <noemail@because.no> - 2018-09-10 11:15 +0200
    Re: Wczytywanie skryptów rePeter <no@spam.no> - 2018-09-10 11:50 +0200
      Re: Wczytywanie skryptów Roman Tyczka <noemail@because.no> - 2018-09-10 13:24 +0200
        Re: Wczytywanie skryptów rePeter <no@spam.no> - 2018-09-10 14:05 +0200
          Re: Wczytywanie skryptów Roman Tyczka <noemail@because.no> - 2018-09-10 15:56 +0200
            Re: Wczytywanie skryptów rePeter <no@spam.no> - 2018-09-10 20:18 +0200
              Re: Wczytywanie skryptów Roman Tyczka <noemail@because.no> - 2018-09-10 20:35 +0200
                Re: Wczytywanie skryptów rePeter <no@spam.no> - 2018-09-10 20:49 +0200
        Re: Wczytywanie skryptów Borys Pogoreło <borys@pl.edu.leszno> - 2018-09-10 23:10 +0200
          Re: Wczytywanie skryptów Roman Tyczka <noemail@because.no> - 2018-09-11 10:32 +0200
            Re: Wczytywanie skryptów Borys Pogoreło <borys@pl.edu.leszno> - 2018-09-13 23:28 +0200

#3514 — Wczytywanie skryptów

From	Roman Tyczka <noemail@because.no>
Date	2018-09-10 11:15 +0200
Subject	Wczytywanie skryptów
Message-ID	<82x3gdp9ljso.dlg@tyczka.com>

Witam,

Czy wczytywanie skryptów typu jQuery w sekcji <head> jest poprawne?

-- 
pozdrawiam
Roman Tyczka

[toc] | [next] | [standalone]

#3515

From	rePeter <no@spam.no>
Date	2018-09-10 11:50 +0200
Message-ID	<20180910115046.10abb9f6@spam.no>
In reply to	#3514

Mon, 10 Sep 2018 11:15:48 +0200      
Roman Tyczka <noemail@because.no>   napisał(a):

> 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

[toc] | [prev] | [next] | [standalone]

#3516

From	Roman Tyczka <noemail@because.no>
Date	2018-09-10 13:24 +0200
Message-ID	<okeultrcgz1z.dlg@tyczka.com>
In reply to	#3515

On Mon, 10 Sep 2018 11:50:46 +0200, rePeter wrote:

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

[toc] | [prev] | [next] | [standalone]

#3517

From	rePeter <no@spam.no>
Date	2018-09-10 14:05 +0200
Message-ID	<20180910140506.61b60a81@spam.no>
In reply to	#3516

Mon, 10 Sep 2018 13:24:26 +0200      
Roman Tyczka <noemail@because.no>   napisał(a):

> On Mon, 10 Sep 2018 11:50:46 +0200, rePeter wrote:
> 
> >> 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

[toc] | [prev] | [next] | [standalone]

#3518

From	Roman Tyczka <noemail@because.no>
Date	2018-09-10 15:56 +0200
Message-ID	<dxepxd272yyt.dlg@tyczka.com>
In reply to	#3517

On Mon, 10 Sep 2018 14:05:06 +0200, rePeter wrote:

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

[toc] | [prev] | [next] | [standalone]

#3519

From	rePeter <no@spam.no>
Date	2018-09-10 20:18 +0200
Message-ID	<20180910201852.0ee73a8f@spam.no>
In reply to	#3518

Mon, 10 Sep 2018 15:56:33 +0200      
Roman Tyczka <noemail@because.no>   napisał(a):

> On Mon, 10 Sep 2018 14:05:06 +0200, rePeter wrote:
> 
> >>> 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ść?
> 

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

[toc] | [prev] | [next] | [standalone]

#3520

From	Roman Tyczka <noemail@because.no>
Date	2018-09-10 20:35 +0200
Message-ID	<1pv169vspc3do.dlg@tyczka.com>
In reply to	#3519

On Mon, 10 Sep 2018 20:18:52 +0200, rePeter wrote:

>>>>> 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ść?
>> 
> 
> 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

[toc] | [prev] | [next] | [standalone]

#3521

From	rePeter <no@spam.no>
Date	2018-09-10 20:49 +0200
Message-ID	<20180910204920.31a76ba6@spam.no>
In reply to	#3520

Mon, 10 Sep 2018 20:35:56 +0200      
Roman Tyczka <noemail@because.no>   napisał(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.

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

[toc] | [prev] | [next] | [standalone]

#3522

From	Borys Pogoreło <borys@pl.edu.leszno>
Date	2018-09-10 23:10 +0200
Message-ID	<1p6q0p38frnoj$.1y2dh3fne43sl.dlg@40tude.net>
In reply to	#3516

Dnia Mon, 10 Sep 2018 13:24:26 +0200, Roman Tyczka napisał(a):

> 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

[toc] | [prev] | [next] | [standalone]

#3523

From	Roman Tyczka <noemail@because.no>
Date	2018-09-11 10:32 +0200
Message-ID	<1muzqdv1rbvnb.dlg@tyczka.com>
In reply to	#3522

On Mon, 10 Sep 2018 23:10:49 +0200, Borys Pogoreło wrote:

>> 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ć.

> 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

[toc] | [prev] | [next] | [standalone]

#3524

From	Borys Pogoreło <borys@pl.edu.leszno>
Date	2018-09-13 23:28 +0200
Message-ID	<1arrrljq9o1bv$.14bae714qls30$.dlg@40tude.net>
In reply to	#3523

Dnia Tue, 11 Sep 2018 10:32:59 +0200, Roman Tyczka napisał(a):

> 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.

> 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

[toc] | [prev] | [standalone]

csiph-web

Wczytywanie skryptów

Contents

#3514 — Wczytywanie skryptów

#3515

#3516

#3517

#3518

#3519

#3520

#3521

#3522

#3523

#3524