55 Domanda: Come posso includere un file JavaScript in un altro file JavaScript?

domanda creata a Tue, Oct 17, 2017 12:00 AM

C'è qualcosa in JavaScript simile a @import in CSS che ti consente di includere un file JavaScript all'interno di un altro file JavaScript?

    
4678
  1. 2009-06-04 12: 01: 11Z
  2. @ Daniel, non voglio usare una chiamata AJAX.
    2009-06-04 12: 02: 12Z
  3. Perché non dichiarare il file importato prima dell'altro che lo richiede, semplicemente usando i tag script ordinati?
    2015-01-06 21: 07: 48Z
  4. @ Claudiu Ciò non aiuterebbe a importare qualsiasi cosa, ma dovrebbe funzionare altrettanto bene. Se si dispone di un file JS che dipende da un altro file JS, basta dichiarare prima i tag script dei file di dipendenza, in modo che il successivo abbia già caricato le sue dipendenze. Se hai una situazione in cui non è possibile un approccio, le risposte qui dovrebbero essere utili.
    2016-02-19 12: 29: 41Z
  5. qual è il vantaggio pratico di fare questo? in entrambi i casi il codice base dipendente dal file javascript non verrà caricato e inizierà a funzionare in ogni caso non è caricato!
    2017-01-21 10: 52: 25Z
30 risposte                              30                         

Le vecchie versioni di JavaScript non avevano importato, incluso o richiesto, pertanto sono stati sviluppati molti approcci diversi a questo problema.

Ma dal 2015 (ES6), JavaScript ha avuto lo moduli ES6 standard per importare moduli in Node.js, che è anche supportato da browser più moderni .

Per compatibilità con i browser più vecchi, build e /o transpilation possono essere utilizzati.

Moduli ES6

I moduli ECMAScript (ES6) sono stati supportati in Node.js dalla v8.5, con il flag --experimental-modules. Tutti i file coinvolti devono avere l'estensione .mjs.

 
// module.mjs
export function hello() {
  return "Hello";
}
 
// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

Moduli ECMAScript nei browser

I browser hanno avuto il supporto per caricare direttamente i moduli ECMAScript (non sono richiesti strumenti come Webpack) dal Safari 10.1, Chrome 61, Firefox 60 e Edge 16. Controlla il supporto attuale su caniuse .

 
<script type="module">
  import { hello } from './hello.mjs';
  hello('world');
</script>
 
// hello.mjs
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

Maggiori informazioni su https://jakearchibald.com/2017/es-modules- in-browser /

Importazioni dinamiche nei browser

Le importazioni dinamiche consentono allo script di caricare altri script in base alle esigenze:

 
<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

Ulteriori informazioni su https://developers.google.com/web /aggiornamenti /2017/11 /dinamico-import

Node.js richiede

Il vecchio stile di importazione dei moduli, ancora ampiamente utilizzato in Node.js, è il module.exports /require sistema.

 
// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}
 
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

Ci sono altri modi per JavaScript di includere contenuti JavaScript esterni nei browser che non richiedono il pre-elaborazione.

Caricamento AJAX

È possibile caricare uno script aggiuntivo con una chiamata AJAX e quindi utilizzare eval per eseguirlo. Questo è il modo più diretto, ma è limitato al tuo dominio a causa del modello di sicurezza sandbox JavaScript. L'uso di eval apre anche la porta a bug, hack e problemi di sicurezza.

Caricamento in corso

Come le importazioni dinamiche puoi caricare uno o più script con una chiamata fetchusando le promesse per controllare l'ordine di esecuzione delle dipendenze dello script usando la libreria Fetch Inject :

 
fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

Caricamento jQuery

La libreria jQuery fornisce funzionalità di caricamento in una riga :

 
$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Caricamento script dinamico

È possibile aggiungere un tag script con l'URL dello script nell'HTML. Per evitare il sovraccarico di jQuery, questa è una soluzione ideale.

Lo script può anche risiedere su un server diverso. Inoltre, il browser valuta il codice. Il tag <script> può essere iniettato nella pagina web <head> o inserito poco prima del tag </body> di chiusura.

Ecco un esempio di come potrebbe funzionare:

 
function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

Questa funzione aggiungerà un nuovo tag <script> alla fine della sezione head della pagina, dove l'attributo src è impostato sull'URL che è assegnato alla funzione come primo parametro.

Entrambe queste soluzioni sono discusse e illustrate in JavaScript Madness: caricamento dinamico dello script .

Rilevare quando lo script è stato eseguito

Ora, c'è un grosso problema che devi conoscere. Ciò implica che tu carica il codice da remoto . I moderni browser Web caricheranno il file e continueranno a eseguire lo script corrente perché caricano tutto in modo asincrono per migliorare le prestazioni. (Questo vale sia per il metodo jQuery che per il metodo di caricamento dinamico degli script manuale.)

Significa che se usi questi trucchi direttamente, non potrai utilizzare il codice appena caricato nella riga successiva dopo aver chiesto di caricarlo , perché verrà ancora caricato.

Ad esempio: my_lovely_script.js contiene MySuperObject:

 
var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

Quindi ricarichi la pagina premendo F5 . E funziona! Confondere ...

Che cosa fare al riguardo?

Bene, puoi usare l'hack che l'autore suggerisce nel link che ti ho dato. In breve, per le persone di fretta, utilizza un evento per eseguire una funzione di callback quando lo script viene caricato. Quindi puoi inserire tutto il codice usando la libreria remota nella funzione di callback. Ad esempio:

 
function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

Quindi scrivi il codice che vuoi utilizzare DOPO che lo script è caricato in una funzione lambda :

 
var myPrettyCode = function() {
   // Here, do whatever you want
};

Quindi esegui tutto questo:

 
loadScript("my_lovely_script.js", myPrettyCode);

Si noti che lo script può essere eseguito dopo che il DOM è stato caricato, o prima, a seconda del browser e se si è inclusa la linea script.async = false;. C'è un ottimo articolo sul caricamento di Javascript in generale che discute di questo.

Codice sorgente /Preelaborazione

Come menzionato all'inizio di questa risposta, molti sviluppatori usano nei loro progetti strumenti di costruzione /transpilazione come Parcel, Webpack o Babel, consentendo loro di utilizzare la sintassi imminente di JavaScript, fornire la retrocompatibilità per i browser più vecchi, combinare i file , riduci, esegui la divisione del codice ecc.

    
4056
2019-01-13 17: 13: 20Z
  1. No, ma qualcuno che usi qualcosa di avanzato come Rhino altrimenti non farebbe questa domanda.
    2010-07-15 03: 53: 21Z
  2. Giusto per essere completo, c'è un terzo modo: in certe soluzioni quando controlli entrambi i file javascript, puoi semplicemente creare un gigantesco file javascript che combina il contenuto di entrambi file.
    2012-09-07 08: 36: 00Z
  3. Non dovrebbe "document.createElement (" my_lovely_script.js ");" nell'esempio essere "document.createElement (" script ")"?
    2012-12-14 23: 28: 54Z
  4. In che modo Eval apre la porta agli hack se è il tuo codice che stai eseguendo?
    2013-01-06 09: 39: 09Z
  5. La risposta richiede alcune modifiche per IE (evento onreadystatechange e proprietà readyState). Inoltre, il caricamento dinamico degli script non beneficia degli scanner del preload di broswer. Consiglia questo articolo HTML5Rocks: html5rocks.com/en/tutorials/speed/script- carico
    2015-04-29 08: 32: 21Z

Se qualcuno sta cercando qualcosa di più avanzato, prova RequireJS . Otterrai vantaggi aggiuntivi come la gestione delle dipendenze, una concorrenza migliore ed evitare la duplicazione (ovvero, recuperare uno script più volte).

È possibile scrivere i file JavaScript in "moduli" e quindi fare riferimento a essi come dipendenze in altri script. Oppure puoi usare RequireJS come una semplice soluzione "go get this script".

Esempio:

Definisci dipendenze come moduli:

alcuni-dependency.js

 
define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {

     //Your actual script goes here.   
     //The dependent scripts will be fetched if necessary.

     return libraryObject;  //For example, jQuery object
});

implementation.js è il tuo file JavaScript "principale" che dipende da some-dependency.js

 
require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.   
    //Then your script is executed
});

Estratto dal GitHub README:

  

RequireJS carica file JavaScript semplici e anche più definiti   moduli. È ottimizzato per l'uso in-browser, incluso in un Web   Operaio, ma può essere utilizzato in altri ambienti JavaScript, come   Rhino e Nodo. Implementa l'API del modulo asincrono.

     

RequireJS utilizza semplici tag script per caricare moduli /file, quindi dovrebbe   consentire un facile debug. Può essere usato semplicemente per caricare esistente   File JavaScript, quindi puoi aggiungerlo al tuo progetto esistente senza   dover riscrivere i tuoi file JavaScript.

     

...

    
541
2013-09-28 13: 11: 26Z
  1. Quali sono esattamente d1 e d2 in some-dependency.js?
    2014-02-05 03: 28: 52Z
  2. @ aaaidan: la ragione di MattDmo più si basa su una libreria esterna che in cambio si basa sulla risposta accettata.
    2014-03-20 21: 28: 06Z
  3. Per superare require.js, il più recente sarebbe js angolare che è più stabile e facile da usare insieme ad altre funzionalità HTML vincolanti e ricche.
    2014-11-17 20: 00: 40Z
  4. - 1: Quelle astrazioni - "some_dependency" - sono davvero scarse, con gli indici che aggiungono confusione. Fatico a capire come si presenta un esempio di codice funzionante. Se l'autore fornisce un esempio operativo, quasi chiunque sarebbe in grado di adattarlo e generalizzarlo alle sue esigenze.
    2014-11-17 23: 38: 10Z
  5. non funziona bene con MVC e script bundling con minification automatico
    2015-12-02 14: 24: 17Z

In realtà è un modo per caricare un file JavaScript non in modo asincrono, quindi è possibile utilizzare le funzioni incluse nel file appena caricato subito dopo averlo caricato, e penso funziona su tutti i browser.

È necessario utilizzare jQuery.append() sull'elemento <head> della pagina, ovvero:

 
$("head").append('<script type="text/javascript" src="' + script + '"></script>');

Tuttavia, questo metodo ha anche un problema: se si verifica un errore nel file JavaScript importato, Firebug (e anche Firefox Error Console e Strumenti per sviluppatori di Chrome ) riporterà la sua posizione in modo errato, il che è un grosso problema se usi Firebug per tenere traccia di errori JavaScript molto giù (lo faccio). Firebug semplicemente non conosce il nuovo file caricato per qualche motivo, quindi se si verifica un errore in quel file, segnala che si è verificato nel tuo HTML file e avrai difficoltà a trovare la vera ragione dell'errore.

Ma se questo non è un problema per te, allora questo metodo dovrebbe funzionare.

In realtà ho scritto un plugin jQuery chiamato $. import_js () che usa questo metodo:

 
(function($)
{
    /*
     * $.import_js() helper (for JavaScript importing within JavaScript code).
     */
    var import_js_imported = [];

    $.extend(true,
    {
        import_js : function(script)
        {
            var found = false;
            for (var i = 0; i < import_js_imported.length; i++)
                if (import_js_imported[i] == script) {
                    found = true;
                    break;
                }

            if (found == false) {
                $("head").append('<script type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

Quindi tutto ciò che devi fare per importare JavaScript è:

 
$.import_js('/path_to_project/scripts/somefunctions.js');

Ho anche fatto un semplice test per questo a Esempio .

Include un file main.js nell'HTML principale e quindi lo script in main.js usa $.import_js() per importare un file aggiuntivo chiamato included.js, che definisce questa funzione:

 
function hello()
{
    alert("Hello world!");
}

E subito dopo aver incluso included.js, viene chiamata la funzione hello() e viene visualizzato l'avviso.

(Questa risposta è in risposta al commento di e-satis).

    
177
2018-03-21 04: 29: 29Z
  1. Sto provando questo metodo, ma non funziona per me, l'elemento non appare nel tag head.
    2013-03-12 15: 24: 40Z
  2. @ juanpastas - usa jQuery.getScript , in questo modo non ti devi preoccupare di scrivere il plugin ...
    2013-06-01 17: 44: 30Z
  3. Hmm, secondo questo articolo , aggiungendo un elemento script a head, verrà eseguito in modo asincrono, a meno che il async non sia impostato su false.
    2015-06-18 15: 36: 07Z
  4. La variabile di script non dovrebbe codificare le entità html? Se il link contiene il ", il codice si spezzerà
    2017-08-31 13: 55: 18Z
  5. @ Flimm caro signore, io e il mio team ringraziamo per il tuo commento e personalmente ti devo una birra di soldi pari se mai ci incontriamo di persona
    2019-01-18 09: 50: 45Z

Un altro modo, a mio avviso molto più pulito, è quello di creare una richiesta Ajax sincrona anziché utilizzare un tag <script>. Questo è anche il modo in cui Node.js include include.

Ecco un esempio di jQuery:

 
function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

Puoi quindi utilizzarlo nel tuo codice come di solito utilizzi un include:

 
require("/scripts/subscript.js");

E essere in grado di chiamare una funzione dallo script richiesto nella riga successiva:

 
subscript.doSomethingCool(); 
    
141
2013-09-28 12: 55: 50Z
  1. Buona soluzione, la testa include è asincrono sfortunatamente, la soluzione ajax funziona.
    2011-11-25 09: 21: 49Z
  2. Come indicato da qualcun altro, requirejs.org lo fa e ha anche un pre-compilatore che mette insieme i file js in modo che si caricino più velocemente. Potresti voler controllare.
    2012-01-09 06: 57: 37Z
  3. Trovato ho potuto eseguire il debug aggiungendo questa direttiva nella parte inferiore del file per Chrome: //@ sourceURL = view_index.js
    2013-04-11 00: 02: 09Z
  4. sfortunatamente, async: false ora è deprecato in jQuery. Potrebbe rompersi in futuro, quindi eviterei.
    2013-10-17 01: 45: 50Z
  5. @ katsh Non stiamo usando oggetti jqXHR qui. Il tuo preventivo non sembra confermare il tuo precedente commento affermando che async: false è presumibilmente deprecato. Non è! Come afferma la tua citazione, solo le cose relative a jqXHR sono.
    2015-04-27 16: 50: 40Z

C'è una buona notizia per te. Molto presto sarai in grado di caricare facilmente il codice JavaScript. Diventerà un modo standard per importare moduli di codice JavaScript e farà parte del core JavaScript stesso.

Devi semplicemente scrivere import cond from 'cond.js'; per caricare una macro chiamata cond da un file cond.js.

Quindi non devi fare affidamento su alcun framework JavaScript né devi fare esplicitamente Ajax chiama.

Vedi:

91
2014-10-19 18: 05: 37Z
  1. require /import sul jsfile è stato troppo lungo nel prossimo. (IMO).
    2013-04-10 16: 12: 04Z
  2. @ rwheadon yeah sembra terrificante che questa non sia parte della lingua! Come la gente riesce a fare qualcosa è al di là di me! Sono nuovo ad esso e questo sembra il peggiore (di molti) pezzi di follia
    2014-02-07 12: 04: 37Z
  3. @ jonny-leeds Anche senza il built-in module-loading, JavaScript nel browser è abbastanza flessibile da poter implementare una libreria come RequireJS per la gestione dei nostri moduli.
    2014-05-02 15: 06: 13Z
  4. mid 2015- Ancora non implementato in nessun browser, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
    2015-07-02 16: 14: 33Z
  5. sì hai ragione. ora sto iniziando a sentirmi male per questo :(. Thouh, una volta implementato in tutti i browser questa sarà una grande funzionalità integrata in javascript.
    2015-07-07 11: 01: 01Z

È possibile generare dinamicamente un tag JavaScript e aggiungerlo al documento HTML dall'interno di un altro codice JavaScript. Questo caricherà il file JavaScript mirato.

 
function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

includeJs("/path/to/some/file.js");
    
82
2013-09-28 12: 44: 30Z
  1. Funziona, ma ha seri problemi a causa del caricamento asincrono.
    2009-06-04 12: 11: 12Z
  2. Um ... quale esattamente?
    2009-06-04 12: 14: 31Z
  3. @ e-satis - In realtà, questo è un vantaggio, uno script di sincronizzazione potrebbe bloccare. Cavalli per i corsi, ma 9 volte su 10 vuoi l'opzione non bloccante.
    2009-06-04 12: 15: 11Z
  4. @ Svitlana - gli elementi di script creati in questo modo sono asincroni. Attualmente questo potrebbe essere visto come una scappatoia, quindi potrebbe non essere una prova futura, non ho visto nulla in nessuno standard che chiarisca questo.
    2009-06-04 12: 16: 48Z
  5. @ e-satis asincrono è buono perché non congela la tua pagina. Usa la funzione di callback per ricevere una notifica quando viene eseguito js.onload = callback;
    2013-08-23 15: 40: 56Z

L'istruzione import è in ECMAScript 6 .

La sintassi

 
import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;
    
63
11-12-2016 09: 47: 07Z
  1. ... ma non è supportato da nessun browser fino ad oggi, secondo la tabella di compatibilità sulla pagina a cui sei collegato.
    2015-04-22 20: 34: 42Z
  2. Ora puoi scrivere il codice ES6 e compilarlo con Babel.js ( babeljs .io ) a qualunque sia il tuo sistema di moduli corrente preferito (CommonJS /AMD /UMD): babeljs.io/docs/usage/modules
    2015-06-12 20: 35: 13Z
  3. @ Zero3 Apparentemente il nuovo IE (Edge) è l'unico
    2016-06-25 23: 36: 21Z

Forse puoi usare questa funzione che ho trovato su questa pagina Come faccio includere un file JavaScript in un file JavaScript? :

 
function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}
    
53
2014-11-15 17: 01: 22Z
  1. Dovrebbe essere utile aggiungere script.onload = callback;
    2013-08-23 15: 37: 34Z
  2. @ SvitlanaMaksymchuk quindi, se non uso var, la variabile sarà globale?
    2014-03-18 15: 22: 56Z
  3. @ FranciscoCorrales si.
    2014-05-21 10: 03: 39Z
  4. Finisce in globale con o senza var:)
    2015-01-16 08: 27: 44Z
  5. 2015-07-08 02: 50: 19Z

Ecco una versione sincrona senza jQuery :

 
function myRequire( url ) {
    var ajax = new XMLHttpRequest();
    ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
    ajax.onreadystatechange = function () {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4) {
            switch( ajax.status) {
                case 200:
                    eval.apply( window, [script] );
                    console.log("script loaded: ", url);
                    break;
                default:
                    console.log("ERROR: script not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

Si noti che per ottenere questo dominio incrociato funzionante, il server dovrà impostare l'intestazione allow-origin nella sua risposta.

    
47
2015-06-18 14: 44: 10Z
  1. Funzione eccellente! Carica il codice JavaScript prima che qualsiasi JS aggiuntivo venga scritto dopo il corpo. Molto importante quando si caricano più script.
    2014-02-28 21: 50: 39Z
  2. @ heinob: cosa posso fare per farlo funzionare per il dominio incrociato? (caricamento dello script da http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js)
    2014-09-14 02: 20: 49Z
  3. @ user2284570: Se sei il proprietario del dominio straniero: imposta l'intestazione `allow-origin 'nella risposta del server. Se non sei il proprietario: niente. Scusate! Questa è una politica di origine incrociata.
    2014-09-14 05: 42: 57Z
  4. @ user2284570: Comprendo il tuo commento in questo modo, che non sei il proprietario del dominio da cui vuoi caricare lo script. In tal caso, puoi caricare uno script solo tramite un tag <script> inserito, non tramite XMLHttpRequest.
    2014-09-14 16: 10: 58Z
  5. Per chi ha intenzione di usarlo in Firefox (ad esempio per lo script imacros), aggiungi questa riga all'inizio del file: const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1");
    2016-03-16 00: 16: 29Z

Ho appena scritto questo codice JavaScript (utilizzando Prototype per DOM manipolazione):

 
var require = (function() {
    var _required = {};
    return (function(url, callback) {
        if (typeof url == 'object') {
            // We've (hopefully) got an array: time to chain!
            if (url.length > 1) {
                // Load the nth file as soon as everything up to the
                // n-1th one is done.
                require(url.slice(0, url.length - 1), function() {
                    require(url[url.length - 1], callback);
                });
            } else if (url.length == 1) {
                require(url[0], callback);
            }
            return;
        }
        if (typeof _required[url] == 'undefined') {
            // Haven't loaded this URL yet; gogogo!
            _required[url] = [];

            var script = new Element('script', {
                src: url,
                type: 'text/javascript'
            });
            script.observe('load', function() {
                console.log("script " + url + " loaded.");
                _required[url].each(function(cb) {
                    cb.call(); // TODO: does this execute in the right context?
                });
                _required[url] = true;
            });

            $$('head')[0].insert(script);
        } else if (typeof _required[url] == 'boolean') {
            // We already loaded the thing, so go ahead.
            if (callback) {
                callback.call();
            }
            return;
        }

        if (callback) {
            _required[url].push(callback);
        }
    });
})();

Utilizzo:

 
<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
    require(['foo.js','bar.js'], function () {
        /* Use foo.js and bar.js here */
    });
</script>

Gist: http://gist.github.com/284442 .

    
43
2017-06-25 21: 04: 40Z
  1. jrburke lo ha scritto come RequireJS. Github: requirejs.org/docs/requirements.html
    2011-09-14 17: 14: 26Z
  2. Non sta mettendo lo script caricato fuori dall'ambito in cui require () viene chiamato? Sembra che eval () sia l'unico modo per farlo nell'ambito. O c'è un altro modo?
    2014-03-31 03: 35: 26Z

Ecco la versione generalizzata di come Facebook lo fa per il loro pulsante Mi piace onnipresente:

 
<script>
  var firstScript = document.getElementsByTagName('script')[0],
      js = document.createElement('script');
  js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';
  js.onload = function () {
    // do stuff with your dynamically loaded script
    snowStorm.snowColor = '#99ccff';
  };
  firstScript.parentNode.insertBefore(js, firstScript);
</script>

Se funziona per Facebook, funzionerà per te.

Il motivo per cui cerchiamo il primo elemento script invece di head o body è perché alcuni browser non ne creano uno se mancano, ma abbiamo un elemento script garantito - questo. Maggiori informazioni su http://www.jspatterns.com/the-ridiculous- caso-di-aggiungere-a-script-elemento /.

    
37
2015-07-08 02: 48: 05Z
  1. Accidenti bello! Alcuni dei metodi qui funzionano anche, ma in un ambiente dinamico funziona meglio.
    13-07-2017 15: 51: 34Z

Se vuoi usare JavaScript puro, puoi usare document.write.

 
document.write('<script src="myscript.js" type="text/javascript"></script>');

Se si utilizza la libreria jQuery, è possibile utilizzare il metodo $.getScript.

 
$.getScript("another_script.js");
    
32
2018-03-30 21: 20: 07Z
  1. non document.write rimuovi tutto il resto?
    2014-01-14 00: 53: 51Z

Puoi anche assemblare i tuoi script usando PHP :

File main.js.php:

 
<?php
    header('Content-type:text/javascript; charset=utf-8');
    include_once("foo.js.php");
    include_once("bar.js.php");
?>

// Main JavaScript code goes here
    
25
2013-09-28 12: 50: 11Z
  1. Sembra che il punto sia mantenere tutto in javascript nel front-end
    2011-09-08 18: 23: 28Z
  2. Grazie per avermelo ricordato. Puoi anche scrivere PHP < script > tag nell'intestazione HTML, in modo che i file js necessari (e solo quelli) vengano caricati.
    2013-12-18 12: 38: 45Z

La maggior parte delle soluzioni mostrate qui implica un caricamento dinamico. Stavo cercando invece un compilatore che assemblasse tutti i file dipendenti in un unico output file. Lo stesso di Meno / Sass i preprocessor si occupano della regola at-rule del CSS @import. Dal momento che non ho trovato nulla di decente di questo tipo, ho scritto un semplice strumento per risolvere il problema.

Quindi ecco il compilatore https://github.com/dsheiko/jsic , che sostituisce $import("file-path") con il file richiesto contenuto sicuro. Ecco il corrispondente Grunt plug-in: https: // github.com/dsheiko/grunt-jsic.

Nel ramo master di jQuery, concatenano semplicemente i file di origine atomici in uno singolo iniziando con intro.js e finendo con outtro.js. Questo non mi va bene in quanto non fornisce alcuna flessibilità sulla progettazione del codice sorgente. Scopri come funziona con jsic:

src /main.js

 
var foo = $import("./Form/Input/Tel");

src /Form /Input /Tel.js

 
function() {
    return {
          prop: "",
          method: function(){}
    }
}

Ora possiamo eseguire il compilatore:

 
node jsic.js src/main.js build/mail.js

E ottieni il file combinato

costruire /main.js

 
var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};
    
24
2014-10-19 18: 13: 46Z
  1. Da questo post ho trovato una soluzione molto migliore - compilatore di moduli CommonJS - github.com/dsheiko/cjsc Così puoi semplicemente scrivere moduli CommonJs o NodeJs e accedervi vicendevolmente mantenendo gli stessi in ambiti isolati. I vantaggi: non sono necessarie più richieste HTTP che influiscono sulle prestazioni Non è necessario inserire manualmente il codice del modulo - è responsabilità del compilatore (quindi una migliore leggibilità del codice sorgente) Non sono necessarie librerie esterne È compatibile con UMD- e i moduli NodeJs (ad es. puoi indirizzare jQuery, Backbone come moduli senza toccare il loro codice)
    2014-03-07 16: 07: 24Z

Se la tua intenzione di caricare il file JavaScript è utilizzando le funzioni del file importato /incluso , puoi anche definire un oggetto globale e impostare le funzioni come oggetti. Ad esempio:

global.js

 
A = {};

file1.js

 
A.func1 = function() {
  console.log("func1");
}

file2.js

 
A.func2 = function() {
  console.log("func2");
}

main.js

 
A.func1();
A.func2();

Devi solo stare attento quando includi script in un file HTML. L'ordine dovrebbe essere come in:

 
<head>
  <script type="text/javascript" src="global.js"></script>
  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>
    
20
11-12-2016 09: 42: 00Z

Questo dovrebbe fare:

 
xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
    
18
2014-11-02 13: 50: 20Z
  1. il eval è ciò che non va. Da Crockford , "eval è malvagio.La funzione eval è la funzione più abusata di JavaScript. eval ha alias. Non utilizzare il costruttore Function. Non passare le stringhe a setTimeout o setInterval. " Se non hai letto il suo "JavaScript: The Good Parts" allora esci e fallo subito. non te ne pentirai.
    2013-06-01 17: 56: 21Z
  2. @ MattDMo "Qualcuno ha detto che era cattivo" non è davvero un argomento.
    2014-09-03 19: 05: 36Z
  3. @ emodendroket Suppongo che tu non sappia chi Douglas Crockford è.
    2014-09-03 19: 24: 54Z
  4. @ MattDMo Sono pienamente consapevole di chi sia, ma è un essere umano, non un dio.
    2014-09-03 19: 52: 38Z
  5. @ tggagne: Che cosa posso fare per farlo funzionare per il dominio incrociato? (caricamento dello script da http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js)
    2014-09-14 02: 18: 24Z

O piuttosto che includere in fase di esecuzione, usa uno script per concatenare prima del caricamento.

Uso Pignoni (non so se ce ne sono altri). Si crea il codice JavaScript in file separati e si includono i commenti elaborati dal motore Sprockets come include. Per lo sviluppo è possibile includere i file in sequenza, quindi per la produzione per unirli ...

Vedi anche:

17
2014-10-19 18: 02: 51Z
  1. Browserify è molto più popolare di ruote dentate.
    2015-07-08 02: 52: 06Z

Ho avuto un problema semplice, ma sono rimasto sconcertato dalle risposte a questa domanda.

Ho dovuto usare una variabile (myVar1) definita in un file JavaScript (myvariables.js) in un altro file JavaScript (main.js).

Per questo ho fatto come segue:

Caricato il codice JavaScript nel file HTML, nell'ordine corretto, prima myvariables.js, poi main.js:

 
<html>
    <body onload="bodyReady();" >

        <script src="myvariables.js" > </script>
        <script src="main.js" > </script>

        <!-- Some other code -->
    </body>
</html>

File: myvariables.js

 
var myVar1 = "I am variable from myvariables.js";

File: main.js

 
// ...
function bodyReady() {
    // ...
    alert (myVar1);    // This shows "I am variable from myvariables.js", which I needed
    // ...
}
// ...

Come hai visto, avevo usato una variabile in un file JavaScript in un altro file JavaScript, ma non avevo bisogno di includerne uno in un altro. Avevo solo bisogno di assicurarmi che il primo file JavaScript caricato prima del secondo file JavaScript e, le prime variabili del file JavaScript fossero accessibili nel secondo file JavaScript, automaticamente.

Questo mi ha salvato la giornata. Spero che questo aiuti.

    
14
2016-12-11 09: 45: 11Z
  1. Il problema con questa risposta è che non è qualcosa come import. È necessario un file HTML per ottenere elementi da un file js a un altro.
    2017-02-02 23: 34: 27Z

Nel caso tu stia utilizzando Web Workers e vuoi includere script aggiuntivi nell'ambito del worker, le altre risposte fornite sull'aggiunta di script al tag head, ecc. non funzioneranno per te.

Fortunatamente Web Workers hanno la loro funzione importScripts che è una funzione globale nell'ambito del Web Worker, nativa del browser stesso come è parte della specifica .

In alternativa, come la seconda risposta più votata alla tua domanda evidenzia , RequireJS può anche gestire gli script inclusi in un Web Worker (probabilmente chiamando lo stesso importScripts, ma con alcune altre utili funzioni).

    
14
2017-05-23 12: 34: 59Z

La sintassi @import per ottenere l'importazione JavaScript simile a CSS è possibile utilizzando uno strumento come Mixture tramite il loro speciale tipo di file .mix (vedi qui ). Immagino che l'applicazione usi semplicemente uno dei metodi sopra menzionati, anche se non lo sow.

Dalla documentazione di Mixture sui file .mix:

  

I file mix sono semplicemente file .js o .css con .mix. nel nome del file. UN   mix file estende semplicemente le funzionalità di uno stile normale o   script e ti permette di importare e combinare.

Ecco un file .mix di esempio che combina più file .js in uno:

 
// scripts-global.mix.js
// Plugins - Global

@import "global-plugins/headroom.js";
@import "global-plugins/retina-1.1.0.js";
@import "global-plugins/isotope.js";
@import "global-plugins/jquery.fitvids.js";

La miscela emette questo come scripts-global.js e anche come versione ridotta (scripts-global.min.js).

Nota: non sono in alcun modo affiliato con Mixture, a parte il suo utilizzo come strumento di sviluppo front-end. Mi sono imbattuto in questa domanda dopo aver visto un file JavaScript .mix in azione (in uno dei piatti della miscela Mixture) ed essere un po 'confuso da esso ("puoi farlo?" Ho pensato tra me e me). Poi ho capito che si trattava di un tipo di file specifico dell'applicazione (un po 'deludente, d'accordo). Tuttavia, ha calcolato che la conoscenza potrebbe essere utile per gli altri.

UPDATE : Mixture è ora gratuito (offline).

UPDATE : la miscela è ora fuori produzione. I vecchi rilasci di miscele sono ancora disponibili

    
12
2017-12-17 11: 53: 48Z
  1. Sarebbe fantastico se fosse un modulo nodo.
    2015-04-19 19: 07: 32Z
  2. @ b01 Sembra una sfida;) Se solo avessi il tempo ... forse qualcun altro lo fa?
    2016-04-06 10: 05: 59Z
 
var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);
    
11
2012-08-22 06: 44: 32Z
  1. Questo è il codice più semplice, ma errore in alcuni casi limite quando body non esiste ancora o non può essere modificato. Inoltre, aiuta a spiegare le risposte.
    2015-07-08 02: 54: 31Z

Ho scritto un semplice modulo che automatizza il lavoro di importazione /inclusi gli script dei moduli in JavaScript. Per una spiegazione dettagliata del codice, consultare il post del blog JavaScript richiede /importa /include i moduli .

 
// ----- USAGE -----

require('ivar.util.string');
require('ivar.net.*');
require('ivar/util/array.js');
require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');

ready(function(){
    //Do something when required scripts are loaded
});

    //--------------------

var _rmod = _rmod || {}; //Require module namespace
_rmod.LOADED = false;
_rmod.on_ready_fn_stack = [];
_rmod.libpath = '';
_rmod.imported = {};
_rmod.loading = {
    scripts: {},
    length: 0
};

_rmod.findScriptPath = function(script_name) {
    var script_elems = document.getElementsByTagName('script');
    for (var i = 0; i < script_elems.length; i++) {
        if (script_elems[i].src.endsWith(script_name)) {
            var href = window.location.href;
            href = href.substring(0, href.lastIndexOf('/'));
            var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length);
            return url.substring(href.length+1, url.length);
        }
    }
    return '';
};

_rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark
                                                   //the root directory of your library, any library.


_rmod.injectScript = function(script_name, uri, callback, prepare) {

    if(!prepare)
        prepare(script_name, uri);

    var script_elem = document.createElement('script');
    script_elem.type = 'text/javascript';
    script_elem.title = script_name;
    script_elem.src = uri;
    script_elem.async = true;
    script_elem.defer = false;

    if(!callback)
        script_elem.onload = function() {
            callback(script_name, uri);
        };
    document.getElementsByTagName('head')[0].appendChild(script_elem);
};

_rmod.requirePrepare = function(script_name, uri) {
    _rmod.loading.scripts[script_name] = uri;
    _rmod.loading.length++;
};

_rmod.requireCallback = function(script_name, uri) {
    _rmod.loading.length--;
    delete _rmod.loading.scripts[script_name];
    _rmod.imported[script_name] = uri;

    if(_rmod.loading.length == 0)
        _rmod.onReady();
};

_rmod.onReady = function() {
    if (!_rmod.LOADED) {
        for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){
            _rmod.on_ready_fn_stack[i]();
        });
        _rmod.LOADED = true;
    }
};

_.rmod = namespaceToUri = function(script_name, url) {
    var np = script_name.split('.');
    if (np.getLast() === '*') {
        np.pop();
        np.push('_all');
    }

    if(!url)
        url = '';

    script_name = np.join('.');
    return  url + np.join('/')+'.js';
};

//You can rename based on your liking. I chose require, but it
//can be called include or anything else that is easy for you
//to remember or write, except "import", because it is reserved
//for future use.
var require = function(script_name) {
    var uri = '';
    if (script_name.indexOf('/') > -1) {
        uri = script_name;
        var lastSlash = uri.lastIndexOf('/');
        script_name = uri.substring(lastSlash+1, uri.length);
    } 
    else {
        uri = _rmod.namespaceToUri(script_name, ivar._private.libpath);
    }

    if (!_rmod.loading.scripts.hasOwnProperty(script_name)
     && !_rmod.imported.hasOwnProperty(script_name)) {
        _rmod.injectScript(script_name, uri,
            _rmod.requireCallback,
                _rmod.requirePrepare);
    }
};

var ready = function(fn) {
    _rmod.on_ready_fn_stack.push(fn);
};
    
11
2014-10-19 18: 26: 26Z

Il mio solito metodo è:

 
var require = function (src, cb) {
    cb = cb || function () {};

    var newScriptTag = document.createElement('script'),
        firstScriptTag = document.getElementsByTagName('script')[0];
    newScriptTag.src = src;
    newScriptTag.async = true;
    newScriptTag.onload = newScriptTag.onreadystatechange = function () {
        (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb());
    };
    firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag);
}

Funziona alla grande e non usa ricariche di pagine per me. Ho provato il metodo AJAX (una delle altre risposte) ma non sembra funzionare bene per me.

Ecco una spiegazione di come funziona il codice per coloro che sono curiosi: in sostanza, crea un nuovo tag script (dopo il primo) dell'URL. Lo imposta in modalità asincrona in modo che non blocchi il resto del codice, ma richiama una richiamata quando il readyState (lo stato del contenuto da caricare) diventa "caricato".

    
11
2017-08-26 17: 02: 15Z

Nel linguaggio moderno sarebbe

 
function loadJs( url ){
  return new Promise( resolve => {
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    document.head.appendChild( script );
  });
}
    
10
2017-07-20 15: 15: 02Z
  1. Bello. Buona soluzione.
    2017-07-20 18: 25: 32Z
  2. Conciso e richiede solo ES5 ed evita elegantemente di richiamare formalmente. Grazie Dmitry!
    2017-10-02 07: 08: 11Z
  3. Wow, funziona nel browser senza server. pi.js = semplicemente var pi = 3.14. chiama la funzione loadJS () tramite loadJs("pi.js").then(function(){ console.log(pi); });
    2017-11-07 02: 43: 48Z

Questo script aggiungerà un file JavaScript all'inizio di qualsiasi altro tag <script>:

 
(function () {
    var li = document.createElement('script'); 
    li.type = 'text/javascript'; 
    li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; 
    li.async=true; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(li, s);
})();
    
9
2014-10-19 18: 14: 07Z

C'è anche Head.js . È molto facile da gestire:

 
head.load("js/jquery.min.js",
          "js/jquery.someplugin.js",
          "js/jquery.someplugin.css", function() {
  alert("Everything is ok!");
});

Come vedi, è più facile di Require.js e conveniente come il metodo $.getScript di jQuery. Ha anche alcune funzionalità avanzate, come il caricamento condizionale, il rilevamento delle funzioni e molto di più .

    
9
2014-10-19 18: 18: 01Z

Sono giunto a questa domanda perché stavo cercando un modo semplice per mantenere una collezione di utili plugin JavaScript. Dopo aver visto alcune delle soluzioni qui, ho trovato questo:

  1. Imposta un file chiamato "plugins.js" (o extensions.js o cosa hai). Conserva i tuoi file plugin insieme a quel file master.

  2. plugins.js avrà un array chiamato "pluginNames []" che verrà ripetuto su each (), quindi aggiungi un tag alla testa per ciascun plugin

    //imposta la matrice da aggiornare quando aggiungiamo o rimuoviamo i file plugin  var pluginNames = ["lettering", "fittext", "butterjam", ecc.]; //un tag script per ogni plugin  $.each (pluginNames, function () {    $( 'Testa') aggiungere ( '');  });

  3. chiama manualmente l'unico file nella tua testa:
    <script src="js/plugins/plugins.js"></script>

Ho scoperto che anche se tutti i plug-in venivano rilasciati nel tag head come dovrebbero, non venivano sempre eseguiti dal browser quando si fa clic sulla pagina o si aggiorna.

Ho trovato più affidabile scrivere solo i tag script in un PHP include. Devi solo scriverlo una volta e questo è altrettanto utile che chiamare il plugin usando JavaScript.

    
9
2018-03-30 21: 21: 29Z
  1. @ will, la tua soluzione sembra molto più pulita della mia e sono preoccupato che potrei avere degli errori se uso il mio, visto che fa uso di .append (). Quindi per usare questo, puoi chiamare quella funzione una sola volta per ogni file plugin che desideri includere?
    2011-12-01 05: 55: 18Z

Ci sono molte potenziali risposte a questa domanda. La mia risposta è ovviamente basata su un numero di essi. Questo è quello che ho finito dopo aver letto tutte le risposte.

Il problema con $.getScript e qualsiasi altra soluzione che richiede una richiamata quando il caricamento è completo è che se si hanno più file che li usano e dipendono l'uno dall'altro non si ha più modo di sapere quando sono stati caricati tutti gli script ( una volta che sono nidificati in più file).

Esempio:

file3.js

 
var f3obj = "file3";

// Define other stuff

file2.js:

 
var f2obj = "file2";
$.getScript("file3.js", function(){

    alert(f3obj);

    // Use anything defined in file3.
});

file1.js:

 
$.getScript("file2.js", function(){
    alert(f3obj); //This will probably fail because file3 is only guaranteed to have loaded inside the callback in file2.
    alert(f2obj);

    // Use anything defined in the loaded script...
});

Hai ragione quando dici che potresti specificare Ajax per l'esecuzione in modo sincrono oppure utilizzare XMLHttpRequest , ma la tendenza attuale sembra essere la deprecazione delle richieste sincrone, quindi potresti non ottenere il supporto completo del browser ora o in futuro.

Potresti provare a usare $.when per controllare un array di oggetti posticipati, ma ora lo fai in ogni file e il file2 verrà considerato caricato non appena viene eseguito il $.when non quando viene eseguito il callback, quindi file1 continua ancora l'esecuzione prima che venga caricato il file3. Questo ha ancora lo stesso problema.

Ho deciso di andare indietro invece che in avanti. Grazie document.writeln. So che è un tabù, ma finché viene usato correttamente questo funziona bene. Si finisce con il codice che può essere debugato facilmente, mostrato nel DOM correttamente e può assicurare l'ordine in cui le dipendenze sono caricate correttamente.

Ovviamente puoi usare $("body"). append (), ma non puoi più eseguire il debug più correttamente.

NOTA: è necessario utilizzarlo solo mentre la pagina si sta caricando, altrimenti si ottiene una schermata vuota. In altre parole, posiziona sempre questo prima /all'esterno di document.ready . Non ho provato a usare questo dopo che la pagina è stata caricata in un evento click o qualcosa del genere, ma sono abbastanza sicuro che fallirà.

Mi è piaciuta l'idea di estendere jQuery, ma ovviamente non è necessario.

Prima di chiamare document.writeln, controlla che lo script non sia già stato caricato valutando tutti gli elementi dello script.

Suppongo che uno script non sia completamente eseguito fino a quando il suo evento document.ready non è stato eseguito. (So ​​che usare document.ready non è richiesto, ma molte persone lo usano, e gestirlo è una salvaguardia.)

Quando vengono caricati i file aggiuntivi, i callback document.ready verranno eseguiti nell'ordine sbagliato. Per risolvere questo problema quando uno script viene effettivamente caricato, lo script che lo ha importato viene reimportato e l'esecuzione viene interrotta. Questo fa sì che il file di origine abbia ora la sua callback document.ready eseguita dopo qualsiasi da qualsiasi script che importa.

Invece di questo approccio, puoi provare a modificare jQuery readyList, ma questa sembrava una soluzione peggiore.

Soluzione:

 
$.extend(true,
{
    import_js : function(scriptpath, reAddLast)
    {
        if (typeof reAddLast === "undefined" || reAddLast === null)
        {
            reAddLast = true; // Default this value to true. It is not used by the end user, only to facilitate recursion correctly.
        }

        var found = false;
        if (reAddLast == true) // If we are re-adding the originating script we do not care if it has already been added.
        {
            found = $('script').filter(function () {
                return ($(this).attr('src') == scriptpath);
            }).length != 0; // jQuery to check if the script already exists. (replace it with straight JavaScript if you don't like jQuery.
        }

        if (found == false) {

            var callingScriptPath = $('script').last().attr("src"); // Get the script that is currently loading. Again this creates a limitation where this should not be used in a button, and only before document.ready.

            document.writeln("<script type='text/javascript' src='" + scriptpath + "'></script>"); // Add the script to the document using writeln

            if (reAddLast)
            {
                $.import_js(callingScriptPath, false); // Call itself with the originating script to fix the order.
                throw 'Readding script to correct order: ' + scriptpath + ' < ' + callingScriptPath; // This halts execution of the originating script since it is getting reloaded. If you put a try / catch around the call to $.import_js you results will vary.
            }
            return true;
        }
        return false;
    }
});

Utilizzo:

File3:

 
var f3obj = "file3";

// Define other stuff
$(function(){
    f3obj = "file3docready";
});

File2:

 
$.import_js('js/file3.js');
var f2obj = "file2";
$(function(){
    f2obj = "file2docready";
});

File1:

 
$.import_js('js/file2.js');

// Use objects from file2 or file3
alert(f3obj); // "file3"
alert(f2obj); // "file2"

$(function(){
    // Use objects from file2 or file3 some more.
    alert(f3obj); //"file3docready"
    alert(f2obj); //"file2docready"
});
    
8
2018-03-30 21: 22: 17Z
  1. Questo è esattamente ciò che la risposta attualmente accettata afferma: semplicemente non abbastanza.
    2017-02-02 23: 31: 40Z
  2. La differenza principale è che se c'è una dipendenza mancante aggiungerà il tag script per la dipendenza, quindi aggiungerà anche il tag script per il file chiamante e genererà un errore che interrompe l'esecuzione. Ciò causa l'elaborazione degli script e l'esecuzione nell'ordine corretto e rimuove la necessità di richiamate. Quindi lo script dipendente verrà caricato ed eseguito prima dello script chiamante mentre supporta il nesting.
    2017-02-17 00: 19: 54Z
  3. Per quanto riguarda "la tendenza attuale sembra essere la deprecazione delle richieste sincrone", questo è vero solo perché molti sviluppatori li hanno abusati e hanno fatto aspettare gli utenti inutilmente. Tuttavia, se la richiesta è naturalmente sincrona, come un'istruzione Include, quindi Ajax sincrono semplice va bene. Ho creato una funzione di estensione JavaScript generica che esegue in modo sincrono funzioni come la lettura di un file che non fa parte di JavaScript eseguendo un file "server" PHP, e lo trova molto utile quando si scrivono app che usano JavaScript. Nessun server web locale è necessario per tale Ajax.
    2018-12-06 19: 38: 08Z

Ho creato una funzione che ti permetterà di usare una verbosità simile a C # /Java per includere un file JavaScript. L'ho provato un po 'anche all'interno di un altro file JavaScript e sembra funzionare. Richiede jQuery anche se per un po 'di "magia" alla fine.

Ho messo questo codice in un file alla radice della mia directory di script (l'ho chiamato global.js, ma puoi usare quello che vuoi. A meno che non mi sbagli e jQuery dovrebbe essere l'unico script richiesto su una determinata pagina. Tieni presente che questo è in gran parte non verificato oltre un utilizzo di base, quindi potrebbero esserci problemi con il modo in cui l'ho fatto, usarlo a proprio rischio yadda yadda non sono responsabile se metti a male qualcosa yadda yadda:  

/**
* @fileoverview This file stores global functions that are required by other libraries.
*/

if (typeof(jQuery) === 'undefined') {
    throw 'jQuery is required.';
}

/** Defines the base script directory that all .js files are assumed to be organized under. */
var BASE_DIR = 'js/';

/**
* Loads the specified file, outputting it to the <head> HTMLElement.
*
* This method mimics the use of using in C# or import in Java, allowing
* JavaScript files to "load" other JavaScript files that they depend on
* using a familiar syntax.
*
* This method assumes all scripts are under a directory at the root and will
* append the .js file extension automatically.
*
* @param {string} file A file path to load using C#/Java "dot" syntax.
*
* Example Usage:
* imports('core.utils.extensions');
* This will output: <script type="text/javascript" src="/js/core/utils/extensions.js"></script>
*/
function imports(file) {
    var fileName = file.substr(file.lastIndexOf('.') + 1, file.length);

    // Convert PascalCase name to underscore_separated_name
    var regex = new RegExp(/([A-Z])/g);
    if (regex.test(fileName)) {
        var separated = fileName.replace(regex, ",$1").replace(',', '');
        fileName = separated.replace(/[,]/g, '_');
    }

    // Remove the original JavaScript file name to replace with underscore version
    file = file.substr(0, file.lastIndexOf('.'));

    // Convert the dot syntax to directory syntax to actually load the file
    if (file.indexOf('.') > 0) {
        file = file.replace(/[.]/g, '/');
    }

    var src = BASE_DIR + file + '/' + fileName.toLowerCase() + '.js';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;

    $('head').find('script:last').append(script);
}
    
7
2014-10-18 21: 45: 38Z

Sebbene queste risposte siano grandi, esiste una semplice "soluzione" che esisteva da quando esisteva il caricamento degli script e coprirà il 99,999% della maggior parte dei pecasi d'uso di ople. Basta includere lo script di cui hai bisogno prima dello script che lo richiede. Per la maggior parte dei progetti non richiede molto tempo per determinare quali script sono necessari e in quale ordine.

 
<!DOCTYPE HTML>
<html>
    <head>
        <script src="script1.js"></script>
        <script src="script2.js"></script>
    </head>
    <body></body>
</html>

Se script2 richiede script1, questo è davvero il modo più semplice in assoluto per fare qualcosa di simile. Sono molto sorpreso che nessuno l'abbia presentato, poiché è la risposta più ovvia e più semplice che si possa applicare in quasi tutti i casi.

    
7
2018-04-12 19: 38: 17Z
fonte posta Qui