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


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


4141
2018-06-04 11:59


origine


risposte:


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

Ma le versioni recenti di JavaScript hanno standard simili Moduli ES6  per importare moduli, anche se questo non è ancora supportato dalla maggior parte dei browser. Molte persone usano i moduli con le applicazioni del browser costruire  e / o transpilation  strumenti per rendere pratico l'uso della nuova sintassi con funzioni come i moduli.

Moduli ES6

Nota che attualmente il supporto del browser per i moduli ES6 non è particolarmente grande, ma è in arrivo. Secondo questa risposta StackOverflow , sono supportati in Chrome 61, Firefox 54 (dietro il dom.moduleScripts.enabled sistemarsi about:config) e MS Edge 16, con solo Safari 10.1 che fornisce supporto senza contrassegni.

Pertanto, al momento sarà ancora necessario utilizzare gli strumenti di compilazione e / o transposizione per JavaScript valido che verrà eseguito senza alcun obbligo per l'utente di utilizzare tali versioni del browser o abilitare eventuali flag.

Una volta che i moduli ES6 sono all'ordine del giorno, ecco come utilizzeresti:

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

Node.js richiede

Node.js sta attualmente utilizzando un module.exports / richiedono  sistema. Puoi usare babel traspare se vuoi il import sintassi.

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

Esistono 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 utilizzarlo eval per eseguirlo. Questo è il modo più diretto, ma è limitato al tuo dominio a causa del modello di sicurezza sandbox JavaScript. utilizzando eval apre anche la porta a bug, hack e problemi di sicurezza.

Caricamento jQuery

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

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

Caricamento di script dinamici

È 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 <script> il tag può essere iniettato nella pagina web <head>o inserito poco prima della chiusura </body> etichetta.

Ecco un esempio di come potrebbe funzionare:

function dynamicallyLoadScript(url) {
    var script = document.createElement("script"); // Make a script DOM node
    script.src = url; // Set it's 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 <script> tag alla fine della sezione di testa della pagina, dove il src l'attributo è impostato sull'URL che viene assegnato alla funzione come primo parametro.

Entrambe queste soluzioni sono discusse e illustrate in JavaScript Madness: caricamento di script dinamici .

Rilevare quando lo script è stato eseguito

Ora, c'è un grosso problema che devi conoscere. Fare questo implica questo si carica da remoto il codice . 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 sarai in grado di utilizzare il codice appena caricato la riga successiva dopo aver chiesto che venga caricato , perché verrà ancora caricato.

Per 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 colpendo F5 . E funziona! Confondere ...

Quindi cosa fare a riguardo?

Bene, puoi usare l'hack che l'autore suggerisce nel link che ti ho dato. In sintesi, 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. Per esempio:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    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 a funzione lambda :

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

Quindi esegui tutto ciò:

loadScript("my_lovely_script.js", myPrettyCode);

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

Fusione codice sorgente / preelaborazione

Come menzionato all'inizio di questa risposta, molti sviluppatori ora usano strumenti di compilazione / transpilazione come WebPack, Babel o Gulp nei loro progetti, consentendo loro di usare meglio la sintassi e i moduli di supporto, combinare file, minificare, ecc.


3578
2018-06-04 12:13



Se qualcuno sta cercando qualcosa di più avanzato, prova RequireJS . Otterrai vantaggi aggiuntivi come la gestione delle dipendenze, una maggiore concorrenza 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 "vai a prendere questo script".

Esempio:

Definisci le 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 "principale" JavaScript che dipende da alcuni-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 semplici file JavaScript e anche più definiti   moduli. È ottimizzato per l'uso nel 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.

...


513
2018-06-07 20:55



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 che funzioni in tutti i browser.

Devi usare jQuery.append() sul <head> elemento della tua pagina, cioè:

$("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  pure) segnalerà il suo posto 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 principale HTML  file, e avrai difficoltà a scoprire la vera ragione dell'errore.

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

Ho effettivamente 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 a main.js file nell'HTML principale e quindi lo script in main.js usi $.import_js() per importare un file aggiuntivo chiamato included.js, che definisce questa funzione:

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

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

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


162
2018-04-28 15:25



Un altro modo, a mio avviso molto più pulito, è quello di creare una richiesta Ajax sincrona invece di usare a <script> etichetta. Che è anche il modo Node.js  maniglie 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(); 

133
2017-09-08 18:22



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

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

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

Fare riferimento a:


86
2017-07-03 13:32



È possibile generare dinamicamente un tag JavaScript e aggiungerlo a un documento HTML all'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");

72
2018-06-04 12:02



dichiarazione import è in ECMAScript 6.

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;

58
2018-04-17 01:56



Forse puoi usare questa funzione che ho trovato su questa pagina Come posso 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)
}

47
2018-06-04 12:04