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

question-closed Dynamiczne wczytywanie skryptu zależnego od jQuery

VPS Starter Arubacloud
0 głosów
214 wizyt
pytanie zadane 27 czerwca 2017 w JavaScript przez szymonq Użytkownik (770 p.)
zamknięte 27 czerwca 2017 przez szymonq

Witam, chcę na stronie umieścić dynamicznie bibliotekę jQuery i mój skrypt korzystający z tej biblioteki. Problematyczne jest to, że mój skrypt może się wczytać(i przeważnie się wczytuje) przed jQuery. Ja jestem początkującym w JS i jedyne co wymyśliłem to:

    var head = document.getElementsByTagName('head')[0];

    //add jQuery
    var jQuery = document.createElement('script');
    jQuery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
    jQuery.type  = 'text/javascript';
    head.appendChild(jQuery);
    
    // add core
    setTimeout(function(){var core = document.createElement('script');
    core.src = 'http://localhost/files/core.js';
    core.type  = 'text/javascript';
    head.appendChild(core);}, 5000);

To rozwiązanie chwilowe i ułomne bo nigdy nie wiem po jakim czasie tak naprawdę wczyta się jQuery. Jak to rozwiązać?

komentarz zamknięcia: Rozwiązane

2 odpowiedzi

+1 głos
odpowiedź 27 czerwca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Możesz to rozwiązać za po mocą obiecanki np: fetchAPI.

np:

document.addEventListenr ("load" , loadDynamicjQ);


function loadDynamicJq()[

var myRequest = new Request(''https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'', {method: GET'});

fetch(myRequest).then((response)=>
{
var jQuery = document.createElement('script');
jQuery.src = 'response.url';
jQuery.type  = 'text/javascript';
head.appendChild(jQuery);
var newRequest = new Request (ten twój request do twojego API)
fetch(newRequest).then((response) => {
//Kod wkladania twojego API

}
}
}

Musisz jedynie zrobić poly dla fetchAPI dla IE. 

A teraz co tu się stało, JS porównaniu do innych języków jest językiem jedno wątkowym, dlatego tu nie może użyć wzorca projektowego Observer State, który by badał stan klasy,obiekty etc. Dlatego w JS wymyślono XHR, a wraz rozwojem obiekt Promise. FetchAPI można powiedzieć jest swego rodzaju interfejsem który posiada ten obiekt Promise (dokładne informacje gdzie on dokładnie jest budowany znajdziesz tu --> https://developers.google.com/web/updates/2015/03/introduction-to-fetch);

Inną możliwością jest    najnowszy budowany standard ES7 składania await/async, niestety nie jest oficjanie jeszcze obsługiwana przez natywne API. Dlatego musisz sobie je dociągnąć. 

https://www.npmjs.com/package/asyncawait

Inną opcją jes wykrozystanie gotowych bibliotek specjalnie przystosowanych do tych zadań.

http://headjs.com/ - posiada w sobie ten komponent, ale potrafi wiele innych rzeczy zrobić . Obecnie chyba już nie rozwijana.

https://github.com/systemjs/systemjs - wyspecjalizowana biblioteka do dynamic loadingu . Obsługiwana jest przez requireJS ale pewnie jest i też poly do ES6. 

 

komentarz 27 czerwca 2017 przez szymonq Użytkownik (770 p.)

Dzięki wielkie za tak obszerną odpowiedź ;) skorzystałem z rozwiązania podanego przez xmentora bo jest w czystym JS i jest w miarę jasne dla mnie. Co do Twoich propozycji:

1. XHR, Promise, Observer State to dla mnie w tej chwili jakaś czarna magia

2. Nie mogę skorzystać z zewnętrznej biblioteki bo musiałbym wczytać ją w ten sam sposób co jQuery, a mój skrypt i tak wczytałby się przed nią

Jeszcze raz dziękuję laugh

+1 głos
odpowiedź 27 czerwca 2017 przez xmentor Nałogowiec (49,520 p.)
komentarz 27 czerwca 2017 przez szymonq Użytkownik (770 p.)

Dzięki ;)

Mój kod ostatecznie:

    var head = document.getElementsByTagName('head')[0];
    var scripts = ['https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', 'http://localhost/files/core.js'];

    function addScripts( uris, callback ) {
	if ( !uris instanceof Array || uris.length < 1 ) {
		return false;
	}

	function add( i ) {
		var uri = uris[ i ],
			s = document.createElement( 'script' );

		s.src = uri;

		head.appendChild( s );

		if ( uris[ ++i ] ) {
			s.onload = function() {
				add( i );
			};
		} else if ( typeof callback === 'function' ) {
			s.onload = callback;
		}
	}

        add( 0 );
    }
    addScripts(scripts);

 

Podobne pytania

+2 głosów
0 odpowiedzi 160 wizyt
0 głosów
0 odpowiedzi 157 wizyt
pytanie zadane 13 marca 2017 w JavaScript przez paciek Początkujący (480 p.)
0 głosów
1 odpowiedź 431 wizyt
pytanie zadane 27 września 2016 w JavaScript przez Widemo Użytkownik (920 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...