Loader per javascript

**mxa** · 29-06-2010, 18:13

Sto lavorando ad un'applicazione abbastanza complessa, e per tenere le cose in ordine vorrei non dover includere tutte le dipendenze javscript nel file html, vorrei invece che in ognuno dei miei file js includo solo le cose che realmente mi servono. Vorrei diciamo una cosa molto simile all'import di java.

Ho provato ad abbozzare una roba del genere:

Codice PHP:


var JSLOADER = {};



JSLOADER.load = function (jsname, pos) {

    var th = document.getElementsByTagName(pos)[0];

    var s = document.createElement('script');

    s.setAttribute('type','text/javascript');

    s.setAttribute('src',jsname);

    th.insertBefore(s, document.getElementsByTagName ("script")[0]);

};



JSLOADER.head = "head";

JSLOADER.body = "body";



JSLOADER.jquery = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";

JSLOADER.jqueryUI = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js";

JSLOADER.hoverIntent = "http://cherne.net/brian/resources/jquery.hoverIntent.minified.js";

e poi nel mio JS scrivo ad esempio

Codice PHP:


JSLOADER.load ("resources/js/main.js", JSLOADER.head);

JSLOADER.load (JSLOADER.hoverIntent, JSLOADER.head);

JSLOADER.load ("resources/js/utilities/jquery.url.js", JSLOADER.head);

JSLOADER.load (JSLOADER.jqueryUI, JSLOADER.head);

JSLOADER.load (JSLOADER.jquery, JSLOADER.head);

JSLOADER.load ('resources/js/json-support.js', JSLOADER.head);



//A questo punto mi aspetterei di poter usare JQuery

$(document).ready(function(){

//...

});

Pero' non funziona. Nonostante con firebug io veda che gli elementi <script> sono correttamente aggiunti al DOM, ricevo un errore quando cerco di usare JQuery. Quindi assumo che nonostante i tag siano li' il codice javascript non venga scaricato e interpretato dal browser.

C'e' un modo di ottenere quello che voglio?

**mxa** · 29-06-2010, 20:13

Ok, ci sono QUASI riuscito. Dico quasi perche' adesso sono arrivato al punto in cui devo fare questo perche' tutto funzioni:

Codice PHP:


<head>

        <script type="text/javascript" src="resources/js/js-loader.js"></script>

        <script type="text/javascript">

            /* <![CDATA[ */

            JSLOADER.load ('resources/js/json-support.js', JSLOADER.head);

            JSLOADER.load (JSLOADER.jquery, JSLOADER.head);

            JSLOADER.load (JSLOADER.jqueryUI, JSLOADER.head);

            JSLOADER.load ("resources/js/utilities/jquery.url.js", JSLOADER.head);

            JSLOADER.load (JSLOADER.hoverIntent, JSLOADER.head);

            JSLOADER.load ("resources/js/main.js", JSLOADER.head);

            /* ]]> */

        </script>

        <script type="text/javascript" src="resources/js/editor-views.js"></script>

</head>

quindi non ho ottenuto nulla perche' comunque devo fare quelle chiamate al mio loader nell'HTML della pagina. Immagino che non importi tanto l'ordine in cui gli elementi script sono nel DOM quanto l'ordine in cui il browser li legge la prima volta. Essendo quindi

codice:

<script type="text/javascript" src="resources/js/editor-views.js"></script>

li' fin dall'inizio non importa se gli altri tag script caricati dal loader vengono di fatto messo prima. Quindi se le chiamate al loader vengono fatte anch'esse all'inizio di editor-views.js e subito dopo comincio ad usare jQuery la cosa non funziona.

Il codice del mio loader, che probabilmente si puo' migliorare e' questo:

Codice PHP:


var JSLOADER = {};



JSLOADER.load = function (jsname, pos) {

    var th = document.getElementsByTagName(pos)[0];

    var s = document.createElement('script');

    s.setAttribute('type','text/javascript');

    s.setAttribute('src',jsname);

    if (!JSLOADER.firstLoaded) {

        JSLOADER.lastInserted = th.insertBefore(s, document.getElementsByTagName ("script")[0]);

        JSLOADER.firstLoaded = true;

    }

    else {

        //insertAfter

        JSLOADER.lastInserted = th.insertBefore (s, JSLOADER.lastInserted.nextSibling);

    }



};



JSLOADER.head = "head";

JSLOADER.body = "body";



JSLOADER.jquery = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";

JSLOADER.jqueryUI = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js";

JSLOADER.hoverIntent = "http://cherne.net/brian/resources/jquery.hoverIntent.minified.js";



JSLOADER.firstLoaded = false;

JSLOADER.lastInserted = null;

nessun javascript Guru che abbia un'idea su come posso risolvere?

**carlomarx** · 01-07-2010, 00:59

Aggiungere uno script dopo l'apertura della pagina è un'operazione asincrona. Vuol dire che se scrivi qualcosa come:

codice:

aggiungiScript("mioscript.js");
eseguiFunzioneNuovoScript();

non ti funzionerà mai. Devi passare le chiamate alle nuove funzioni attraverso l'evento onload associato al nuovo script. Prova a modificare la tua funzione in questo modo:

codice:

var JSLOADER = {};

JSLOADER.load = function (jsname, pos, fncCallBack) {
    var th = document.getElementsByTagName(pos)[0];
    var s = document.createElement('script');
    s.setAttribute('type','text/javascript');
    s.setAttribute('src',jsname);
    s.onload = fncCallBack;
    if (!JSLOADER.firstLoaded) {
        JSLOADER.lastInserted = th.insertBefore(s, document.getElementsByTagName ("script")[0]);
        JSLOADER.firstLoaded = true;
    }
    else {
        //insertAfter
        JSLOADER.lastInserted = th.insertBefore (s, JSLOADER.lastInserted.nextSibling);
    }

};

JSLOADER.head = "head";
JSLOADER.body = "body";

JSLOADER.jquery = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
JSLOADER.jqueryUI = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js";
JSLOADER.hoverIntent = "http://cherne.net/brian/resources/jquery.hoverIntent.minified.js";

JSLOADER.firstLoaded = false;
JSLOADER.lastInserted = null;

Discussione: Loader per javascript

Strumenti discussione

Ricerca discussione

Visualizza

Loader per javascript

Permessi di invio