it-swarm.com.de

Wie füge ich eine JavaScript-Datei in einer anderen JavaScript-Datei ein?

Gibt es in JavaScript etwas Ähnliches wie @import in CSS, mit dem Sie eine JavaScript-Datei in eine andere JavaScript-Datei einfügen können?

4481
Alec Smart

Die alten Versionen von JavaScript hatten keinen Import, enthielten oder erforderten so viele verschiedene Ansätze für dieses Problem.

Seit 2015 (ES6) verfügt JavaScript jedoch über den Standard ES6-Module zum Importieren von Modulen in Node.js, der auch von den meisten modernen Browsern unterstützt wird.

Zur Kompatibilität mit älteren Browsern können die Tools build und/oder transpilation verwendet werden.

ES6-Module

ECMAScript (ES6) -Module werden in Node.js seit Version 8.5 mit dem Flag --experimental-modules unterstützt. Alle beteiligten Dateien müssen die Erweiterung .mjs haben.

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

ECMAScript-Module in Browsern

Browser unterstützen das direkte Laden von ECMAScript-Modulen (keine Tools wie Webpack erforderlich) seit ​​Safari 10.1, Chrome 61, Firefox 60 und Edge 16. Überprüfen Sie die aktuelle Unterstützung unter 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);
}

Lesen Sie mehr unter https://jakearchibald.com/2017/es-modules-in-browsers/

Dynamischer Import in Browser

Durch dynamische Importe kann das Skript bei Bedarf andere Skripte laden:

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

Weitere Informationen finden Sie unter https://developers.google.com/web/updates/2017/11/dynamic-import

Node.js erfordern

Der alte Importstil für Module, der in Node.js immer noch weit verbreitet ist, ist das module.exports/require -System.

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

Es gibt andere Möglichkeiten, mit denen JavaScript externe JavaScript-Inhalte in Browsern einbezieht, für die keine Vorverarbeitung erforderlich ist.

AJAX wird geladen

Sie können ein zusätzliches Skript mit einem AJAX -Aufruf laden und dann mit eval ausführen. Dies ist der einfachste Weg, ist jedoch aufgrund des JavaScript-Sandbox-Sicherheitsmodells auf Ihre Domain beschränkt. Die Verwendung von eval öffnet auch die Tür zu Bugs, Hacks und Sicherheitsproblemen.

Laden holen

Wie bei Dynamic Imports können Sie ein oder mehrere Skripten mit einem Aufruf von fetch laden, wobei Sie Versprechen verwenden, um die Ausführungsreihenfolge für Skriptabhängigkeiten zu steuern. Verwenden Sie dazu die Bibliothek 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)}`)
})

jQuery wird geladen

Die Bibliothek jQuery bietet Ladefunktionen in einer Zeile :

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

Dynamisches Laden von Skripten

Sie können dem HTML-Code ein Skript-Tag mit der Skript-URL hinzufügen. Dies ist eine ideale Lösung, um den Overhead von jQuery zu vermeiden.

Das Skript kann sich sogar auf einem anderen Server befinden. Darüber hinaus wertet der Browser den Code aus. Das Tag <script> kann entweder in die Webseite <head> eingefügt oder direkt vor dem schließenden Tag </body> eingefügt werden.

Hier ist ein Beispiel, wie dies funktionieren könnte:

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

Diese Funktion fügt am Ende des Kopfbereichs der Seite ein neues <script> -Tag hinzu, wobei das Attribut src auf die URL festgelegt wird, die der Funktion als erstem Parameter zugewiesen wird.

Diese beiden Lösungen werden in JavaScript Madness: Dynamic Script Loading erläutert und veranschaulicht.

Erkennen, wann das Skript ausgeführt wurde

Nun gibt es ein großes Problem, über das Sie Bescheid wissen müssen. Wenn Sie dies tun, müssen Sie den Code aus der Ferne laden . Moderne Webbrowser laden die Datei und führen Ihr aktuelles Skript weiter aus, da sie alles asynchron laden, um die Leistung zu verbessern. (Dies gilt sowohl für die jQuery-Methode als auch für die manuelle dynamische Skriptlademethode.)

Wenn Sie diese Tricks direkt anwenden , können Sie Ihren neu geladenen Code in der nächsten Zeile nicht mehr verwenden, nachdem Sie aufgefordert haben, ihn zu laden , da er immer noch vorhanden ist Wird geladen.

Zum Beispiel: my_lovely_script.js enthält 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

Dann lädst du die Seite neu auf F5. Und es funktioniert! Verwirrend...

Also, was tun?

Nun, Sie können den Hack verwenden, den der Autor in dem Link vorschlägt, den ich Ihnen gegeben habe. Zusammenfassend verwendet er für Personen in Eile ein Ereignis, um eine Rückruffunktion auszuführen, wenn das Skript geladen wird. So können Sie den gesamten Code mithilfe der Remote-Bibliothek in die Rückruffunktion einfügen. Zum Beispiel:

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);
}

Dann schreiben Sie den Code, den Sie verwenden möchten, nachdem das Skript in eine Lambda-Funktion geladen wurde:

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

Dann führen Sie all das aus:

loadScript("my_lovely_script.js", myPrettyCode);

Beachten Sie, dass das Skript möglicherweise nach oder vor dem Laden des DOM ausgeführt wird, abhängig vom Browser und davon, ob Sie die Zeile script.async = false; eingefügt haben. Es gibt einen großartiger Artikel zum Laden von Javascript im Allgemeinen , der dies bespricht.

Zusammenführung/Vorverarbeitung des Quellcodes

Wie oben in dieser Antwort erwähnt, verwenden viele Entwickler Build-/Transpilationstools wie Parcel, Webpack oder Babel in ihren Projekten, damit sie die kommende JavaScript-Syntax verwenden, ältere Browser abwärtskompatibel machen, Dateien kombinieren, minimieren, Code-Aufteilung durchführen usw.

4044
e-satis

Wenn jemand nach etwas Fortgeschrittenem sucht, probieren Sie RequireJS aus. Sie erhalten zusätzliche Vorteile wie die Verwaltung von Abhängigkeiten, eine bessere Parallelität und die Vermeidung von Duplikationen (dh das Abrufen eines Skripts mehr als einmal).

Sie können Ihre JavaScript-Dateien in "modules" schreiben und dann als Abhängigkeiten in anderen Skripten referenzieren. Oder Sie können RequireJS als einfache Lösung verwenden.

Beispiel:

Definieren Sie Abhängigkeiten als Module:

some-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 ist Ihre "wichtigste" JavaScript-Datei, die von some-dependency.js abhängt.

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

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

Auszug aus der GitHub README:

RequireJS lädt einfache JavaScript-Dateien sowie definierte Module. Es ist für die Verwendung im Browser optimiert, auch in einem Web Worker, aber es kann in anderen JavaScript-Umgebungen wie .__ verwendet werden. Nashorn und Knoten. Es implementiert die Asynchronous Module API.

RequireJS verwendet einfache Skript-Tags zum Laden von Modulen/Dateien. Es sollte also ermöglichen das einfache debuggen. Es kann einfach verwendet werden, um vorhandene .__ zu laden. JavaScript-Dateien, damit Sie es ohne .__ zu Ihrem vorhandenen Projekt hinzufügen können. Sie müssen Ihre JavaScript-Dateien erneut schreiben.

... 

533
John Strickler

Es gibt tatsächlich ist eine Möglichkeit, eine JavaScript-Datei nicht asynchron zu laden. Sie können also die in der neu geladenen Datei enthaltenen Funktionen direkt nach dem Laden verwenden. Ich denke, das funktioniert in allen Browsern.

Sie müssen jQuery.append() für das <head>-Element Ihrer Seite verwenden, das heißt:

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

Diese Methode hat jedoch auch ein Problem: Wenn in der importierten JavaScript-Datei ein Fehler auftritt, werden Firebug (und auch Firefox Error Console und Chrome Developer Tools ) ebenfalls ihren Platz falsch melden. Dies ist ein Fehler großes Problem, wenn Sie Firebug verwenden, um JavaScript-Fehler häufig aufzuspüren (ich tue dies). Firebug kennt die neu geladene Datei aus irgendeinem Grund einfach nicht. Wenn also ein Fehler in dieser Datei auftritt, wird gemeldet, dass sie in Ihrer Hauptdatei HTML aufgetreten ist, und Sie werden Schwierigkeiten haben, die tatsächliche Datei herauszufinden Grund für den Fehler.

Wenn dies jedoch kein Problem für Sie ist, sollte diese Methode funktionieren.

Ich habe ein jQuery-Plugin namens $ .import_js () geschrieben, das diese Methode verwendet:

(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);

Alles was Sie tun müssen, um JavaScript zu importieren, ist:

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

Ich habe auch einen einfachen Test bei Example gemacht.

Es enthält eine main.js-Datei im Haupt-HTML-Code, und das Skript in main.js verwendet $.import_js(), um eine zusätzliche Datei namens included.js zu importieren, die diese Funktion definiert:

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

Gleich nach dem Einfügen von included.js wird die Funktion hello() aufgerufen, und Sie erhalten die Warnung.

(Diese Antwort ist eine Antwort auf den Kommentar von e-satis).

173
Kipras

Ein anderer Weg, der meiner Meinung nach viel sauberer ist, besteht darin, eine synchrone Ajax-Anfrage zu machen, anstatt einen <script>-Tag zu verwenden. Das ist auch, wie Node.js behandelt.

Hier ist ein Beispiel mit 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);
        }
    });
}

Sie können es dann in Ihrem Code verwenden, da Sie normalerweise ein Include verwenden:

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

In der nächsten Zeile können Sie eine Funktion aus dem erforderlichen Skript aufrufen:

subscript.doSomethingCool(); 
138
Ariel

Es gibt eine gute Nachricht für Sie. Sehr bald können Sie JavaScript-Code problemlos laden. Es wird zu einer Standardmethode für das Importieren von JavaScript-Code-Modulen und wird Teil von JavaScript sein. 

Sie müssen einfach import cond from 'cond.js'; schreiben, um ein Makro mit dem Namen cond aus einer Datei cond.js zu laden.

Sie müssen sich also weder auf ein JavaScript-Framework verlassen, noch müssen Sie explizit Ajax aufrufen.

Beziehen auf:

90
Imdad

Es ist möglich, ein JavaScript-Tag dynamisch zu generieren und aus anderen JavaScript-Codes an das HTML-Dokument anzuhängen. Dadurch wird eine gezielte JavaScript-Datei geladen.

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");
79

Die Anweisung import ist in ECMAScript 6 enthalten.

Syntax

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;
62
draupnie

Vielleicht können Sie diese Funktion verwenden, die ich auf dieser Seite gefunden habe. Wie füge ich eine JavaScript-Datei in eine JavaScript-Datei ein?:

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

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

    head.appendChild(script)
}

Hier ist eine synchrone version ohne 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);
}

Beachten Sie, dass der Server allow-Origin-Header in seiner Antwort setzen muss, damit diese Domäne domänenübergreifend funktioniert.

47
heinob

Ich habe gerade diesen JavaScript-Code geschrieben (mit Prototype for DOM manipulation):

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);
        }
    });
})();

Verwendungszweck:

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

Hier ist die verallgemeinerte Version, wie Facebook es für ihren allgegenwärtigen Like-Button tut:

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

Wenn es für Facebook funktioniert, funktioniert es für Sie.

Der Grund, warum wir nach dem ersten script-Element anstelle von head oder body suchen, liegt darin, dass einige Browser keinen Browser erstellen, wenn er fehlt, aber wir haben garantiert ein script-Element - dieses. Lesen Sie mehr unter http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/ .

36
Dan Dascalescu

Wenn Sie reines JavaScript möchten, können Sie document.write verwenden.

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

Wenn Sie die jQuery-Bibliothek verwenden, können Sie die $.getScript-Methode verwenden.

$.getScript("another_script.js");
31
Venu immadi

Sie können Ihre Skripte auch mit PHP zusammenstellen:

Datei 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
24
Calmarius

Die meisten hier gezeigten Lösungen implizieren eine dynamische Belastung. Ich suchte stattdessen nach einem Compiler, der alle abhängigen Dateien in einer einzigen Ausgabedatei zusammenstellt. Das gleiche wie Less / Sass Präprozessoren behandelt den CSS @import at-rule. Da ich nichts Anständiges in dieser Art gefunden habe, habe ich ein einfaches Werkzeug zur Lösung des Problems geschrieben.

Hier ist also der Compiler https://github.com/dsheiko/jsic , der $import("file-path") sicher durch den angeforderten Dateiinhalt ersetzt. Hier ist das entsprechende Grunt plugin: https://github.com/dsheiko/grunt-jsic .

Im jQuery-Masterzweig verketten sie einfach atomare Quelldateien zu einer einzigen, die mit intro.js beginnt und mit outtro.js endet. Das passt nicht zu mir, da das Quelltextdesign nicht flexibel ist. So funktioniert es mit jsic:

src/main.js

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

src/Form/Eingabe/Tel.js

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

Jetzt können wir den Compiler ausführen:

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

Und bekomme die kombinierte Datei

build/main.js

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};
24
Dmitry Sheiko

Wenn Sie beabsichtigen, die JavaScript-Datei zu laden, ist mithilfe der Funktionen aus der importierten/enthaltenen Datei , können Sie auch ein globales Objekt definieren und die Funktionen als Objektelemente festlegen. Zum Beispiel:

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();

Sie müssen nur vorsichtig sein, wenn Sie Skripts in eine HTML-Datei einfügen. Die Reihenfolge sollte wie folgt sein:

<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
Adem İlhan

Dies sollte tun:

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
18
tggagne

Verwenden Sie ein Skript zur Verkettung vor dem Hochladen, anstatt es zur Laufzeit einzuschließen.

Ich benutze Sprockets (ich weiß nicht, ob es andere gibt). Sie erstellen Ihren JavaScript-Code in separaten Dateien und fügen Kommentare ein, die von der Sprockets-Engine als Include verarbeitet werden. Für die Entwicklung können Sie Dateien sequentiell einbinden, dann für die Produktion, um sie zusammenzuführen ...

Siehe auch:

17
JMawer

Falls Sie Web Workers verwenden und zusätzliche Skripts in den Geltungsbereich des Workers aufnehmen möchten, funktionieren die anderen Antworten, die Sie zum Hinzufügen von Skripts zum head-Tag usw. erhalten, nicht für Sie.

Glücklicherweise haben Web Worker ihre eigene importScripts-Funktion , die eine globale Funktion im Bereich des Web Worker ist, die im Browser selbst enthalten ist, da sie Teil der Spezifikation ist .

Alternativ kann als zweithöchste gewählte Antwort auf Ihre Fragenhighlights , RequireJS auch das Einschließen von Skripts in einen Web Worker (wahrscheinlich Aufruf von importScripts selbst, aber mit ein paar anderen nützlichen Funktionen) behandeln.

14
Turnerj

Ich hatte ein einfaches Problem, aber die Antworten auf diese Frage haben mich verblüfft.

Ich musste eine Variable (myVar1) verwenden, die in einer JavaScript-Datei (myvariables.js) in einer anderen JavaScript-Datei (main.js) definiert ist.

Dafür habe ich folgendes gemacht:

Laden Sie den JavaScript-Code in der HTML-Datei in der richtigen Reihenfolge zuerst myvariables.js und dann main.js:

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

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

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

Datei: myvariables.js

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

Datei: main.js

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

Wie Sie gesehen haben, hatte ich eine Variable in einer JavaScript-Datei in einer anderen JavaScript-Datei verwendet, aber ich musste keine in eine andere einbinden. Ich musste nur sicherstellen, dass die erste JavaScript-Datei, die vor der zweiten JavaScript-Datei geladen wurde, und die Variablen der ersten JavaScript-Datei automatisch in der zweiten JavaScript-Datei verfügbar sind.

Das hat meinen Tag gerettet. Ich hoffe das hilft.

13

Die @import-Syntax für CSS-ähnliche JavaScript-Importe ist mit einem Tool wie Mixture über ihren speziellen .mix-Dateityp (siehe hier ) möglich. Ich stelle mir vor, dass die Anwendung einfach eine der oben genannten Methoden interaktiv verwendet, obwohl ich es nicht weiß. 

Aus der Mixture-Dokumentation zu .mix-Dateien: 

Mix-Dateien sind einfach .js- oder .css-Dateien mit .mix. im Dateinamen EIN Mix-Datei erweitert einfach die Funktionalität eines normalen Stils oder Skriptdatei und ermöglicht das Importieren und Kombinieren.

Hier ein Beispiel für eine .mix-Datei, die mehrere .js-Dateien zu einer einzigen zusammenfasst:

// 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";

Mixture gibt dies als scripts-global.js und auch als Minified-Version (scripts-global.min.js) aus.

Hinweis: Ich bin in keiner Weise mit Mixture verbunden, es sei denn, es wird als Frontend-Entwicklungswerkzeug verwendet. Ich stieß auf diese Frage, als ich eine .mix-JavaScript-Datei in Aktion sah (in einer der Mixture Boilerplates) und etwas verwirrt war ("Sie können das?", Dachte ich bei mir). Dann wurde mir klar, dass es sich um einen anwendungsspezifischen Dateityp handelt (etwas enttäuschend, stimmte zu). Trotzdem war das Wissen für andere hilfreich.

UPDATE: Mischung ist jetzt frei (offline).

UPDATE: Die Mischung wird jetzt eingestellt. Alte Gemischfreisetzungen sind noch verfügbar

12
Isaac Gregson

Meine übliche Methode ist:

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);
}

Es funktioniert großartig und verwendet keine Seiten-Neuladungen für mich. Ich habe die Methode AJAX (eine der anderen Antworten) ausprobiert, aber es scheint für mich nicht so gut zu funktionieren.

Im Folgenden wird erläutert, wie der Code für Neugierige funktioniert: Im Wesentlichen wird ein neuer Skripttag (nach dem ersten) der URL erstellt. Es stellt den asynchronen Modus ein, sodass der Rest des Codes nicht blockiert wird, sondern ein Rückruf aufgerufen wird, wenn der Status readyState (der Status des zu ladenden Inhalts) in "Geladen" geändert wird.

11

Ich habe ein einfaches Modul geschrieben, das das Importieren/Einfügen von Modulskripts in JavaScript automatisiert. Ausführliche Erläuterungen zum Code finden Sie im Blogbeitrag JavaScript erfordert/import/include modules.

// ----- 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
stamat
var js = document.createElement("script");

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

document.body.appendChild(js);
10
Sam4Code

In der modernen Sprache wäre das so 

function loadJs( url ){
  return new Promise( resolve => {
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    document.head.appendChild( script );
  });
}
10
Dmitry Sheiko

Es gibt auch Head.js . Es ist sehr einfach, mit folgenden Themen umzugehen:

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

Wie Sie sehen, ist es einfacher als Require.js und so bequem wie die $.getScript-Methode von jQuery. Es hat auch einige erweiterte Funktionen, wie bedingtes Laden, Funktionserkennung und vieles mehr .

9
Ale

Ich kam zu dieser Frage, weil ich nach einer einfachen Möglichkeit suchte, eine Sammlung nützlicher JavaScript-Plugins zu verwalten. Nachdem ich einige der Lösungen hier gesehen hatte, kam ich dazu:

  1. Richten Sie eine Datei mit dem Namen "plugins.js" (oder extensions.js oder was Sie haben) ein. Halten Sie Ihre Plugin-Dateien mit dieser einen Master-Datei zusammen.

  2. plugins.js hat ein Array namens "pluginNames []", das wir über each (), iterieren und dann für jedes Plugin ein Tag an den Kopf anhängen

    // Setze Array, das aktualisiert werden soll, wenn Plugin-Dateien hinzugefügt oder entfernt werden var pluginNames = ["beschriftung", "fittext", "butterjam" usw.]; // ein script-tag für jedes plugin $ .each (pluginNames, function () { $ ('head'). append (''); });

  3. rufen Sie manuell nur eine Datei in Ihrem Kopf an:
    <script src="js/plugins/plugins.js"></script>

Ich habe festgestellt, dass alle Plugins zwar wie gewünscht in das Head-Tag eingefügt wurden, sie jedoch nicht immer vom Browser ausgeführt wurden, wenn Sie auf die Seite klicken oder eine Aktualisierung durchführen.

Ich fand es zuverlässiger, die Skript-Tags einfach in ein PHP Include zu schreiben. Sie müssen es nur einmal schreiben und das ist genauso viel Arbeit wie das Aufrufen des Plugins mit JavaScript.

9
rgb_life

Dieses Skript fügt eine JavaScript-Datei vor jedem anderen <script>-Tag hinzu:

(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
Vicky Gonsalves

Für diese Frage gibt es viele mögliche Antworten. Meine Antwort basiert offensichtlich auf einer Anzahl von ihnen. Dies ist, was ich mit dem Lesen aller Antworten endete.

Das Problem mit $.getScript und wirklich jeder anderen Lösung, die einen Rückruf erfordert, wenn das Laden abgeschlossen ist, besteht darin, dass Sie, wenn Sie mehrere Dateien haben, die sie verwenden und voneinander abhängig sind, nicht mehr wissen können, wann alle Skripts geladen wurden (sobald sie geladen sind) verschachtelt in mehreren Dateien).

Beispiel:

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...
});

Sie haben Recht, wenn Sie sagen, dass Sie Ajax als synchron ausführen oder XMLHttpRequest verwenden können. Der aktuelle Trend scheint jedoch zu sein, synchrone Anforderungen abzulehnen, sodass Sie jetzt oder in Zukunft keine vollständige Browserunterstützung erhalten.

Sie könnten versuchen, $.when zu verwenden, um ein Array verzögerter Objekte zu prüfen, aber jetzt tun Sie dies in jeder Datei, und file2 wird als geladen betrachtet, sobald $.when ausgeführt wird, nicht wenn der Callback ausgeführt wird. Die Ausführung von file1 wird daher vor file3 fortgesetzt wird geladen Das hat wirklich immer noch das gleiche Problem.

Ich entschied mich, rückwärts statt vorwärts zu gehen. Vielen Dank document.writeln. Ich weiß, dass es Tabu ist, aber solange es richtig verwendet wird, funktioniert es gut. Sie erhalten schließlich Code, der problemlos debuggt werden kann, im DOM korrekt angezeigt wird und die Reihenfolge der Abhängigkeiten korrekt prüfen kann.

Sie können natürlich $ ("body"). Append () verwenden, aber dann können Sie nicht mehr korrekt debuggen.

HINWEIS: Sie müssen dies nur verwenden, während die Seite geladen wird. Andernfalls wird ein leerer Bildschirm angezeigt. Mit anderen Worten, platziere dies immer vor/außerhalb von document.ready. Ich habe dies nicht getestet, nachdem die Seite in ein Klickereignis oder ähnliches geladen wurde, aber ich bin mir ziemlich sicher, dass die Seite fehlschlägt.

Ich mochte die Idee, jQuery zu erweitern, aber Sie müssen es natürlich nicht.

Vor dem Aufruf von document.writeln wird überprüft, ob das Skript noch nicht geladen wurde, indem alle Skriptelemente ausgewertet werden.

Ich gehe davon aus, dass ein Skript nicht vollständig ausgeführt wird, bis das document.ready-Ereignis ausgeführt wurde. (Ich weiß, dass document.ready nicht erforderlich ist, aber viele Leute verwenden es, und der Umgang damit ist ein Schutz.)

Wenn die zusätzlichen Dateien geladen werden, werden die document.ready-Callbacks in der falschen Reihenfolge ausgeführt. Um dies zu beheben, wenn ein Skript tatsächlich geladen wird, wird das importierte Skript selbst erneut importiert und die Ausführung angehalten. Dadurch wird die document.ready-Rückmeldung der Ursprungsdatei nach allen importierten Skripts ausgeführt.

Anstelle dieses Ansatzes könnten Sie versuchen, jQuery readyList zu ändern. Dies schien jedoch eine schlechtere Lösung.

Lösung:

$.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;
    }
});

Verwendungszweck:

File3:

var f3obj = "file3";

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

Datei2:

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

Datei1:

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

Ich habe eine Funktion erstellt, mit der Sie ähnliche Wörter wie C #/Java verwenden können, um eine JavaScript-Datei einzubinden. Ich habe es sogar aus der anderen JavaScript-Datei ein wenig getestet und es scheint zu funktionieren. Es erfordert jedoch jQuery für ein bisschen "Magie" am Ende.

Ich habe diesen Code in eine Datei im Stammverzeichnis meines Skriptverzeichnisses eingefügt (ich habe ihn global.js genannt, aber Sie können verwenden, was Sie möchten. Wenn ich mich nicht irre, sollte jQuery die einzigen erforderlichen Skripts auf einer bestimmten Seite sein Dies ist weit über die grundlegende Verwendung hinaus nicht getestet, daher kann es Probleme mit der Art und Weise geben, wie ich es gemacht habe. Verwenden Sie auf eigenes Risiko yadda yadda. Ich bin nicht dafür verantwortlich, wenn Sie etwas vermasseln.

/**
* @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
Wayne Molina

Obwohl diese Antworten großartig sind, gibt es eine einfache "Lösung", die es gibt, seit das Skript geladen wurde, und es wird 99,999% der Anwendungsfälle der meisten Menschen abdecken. Fügen Sie einfach das benötigte Skript vor dem Skript ein, das es benötigt. Bei den meisten Projekten dauert es nicht lange, um festzustellen, welche Skripts in welcher Reihenfolge benötigt werden.

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

Wenn script2 script1 erfordert, ist dies der absolut einfachste Weg, um so etwas zu tun. Ich bin sehr überrascht, dass dies niemand angesprochen hat, da dies die naheliegendste und einfachste Antwort ist, die in fast jedem Fall zutreffen wird.

6
KthProg

Es gibt mehrere Möglichkeiten, Module in Javascript zu implementieren. Hier sind die 2 beliebtesten:

ES6-Module

Browser unterstützen dieses Modulationssystem noch nicht. Um diese Syntax verwenden zu können, müssen Sie einen Bundler wie Webpack verwenden. Die Verwendung eines Bundlers ist ohnehin besser, da dies alle Ihre verschiedenen Dateien in einer einzigen (oder paarbezogenen) Datei kombinieren kann. Dadurch werden die Dateien vom Server schneller auf dem Client bereitgestellt, da jeder HTTP-Anforderung ein gewisser Overhead zugeordnet ist. Indem wir die allgemeine HTTP-Anforderung reduzieren, verbessern wir die Leistung. Hier ein Beispiel für ES6-Module: 

// main.js file

export function add (a, b) {
  return a + b;
}

export default function multiply (a, b) {
  return a * b;
}


// test.js file

import {add}, multiply from './main';   // for named exports between curly braces {export1, export2}
                                        // for default exports without {}

console.log(multiply(2, 2));  // logs 4

console.log(add(1, 2));  // logs 3

CommonJS (wird in NodeJS verwendet)

Dieses Modulationssystem wird in NodeJS verwendet. Sie fügen Ihre Exporte grundsätzlich zu einem Objekt mit dem Namen module.exports hinzu. Sie können dann über eine require('modulePath') auf dieses Objekt zugreifen. Es ist wichtig zu wissen, dass diese Module zwischengespeichert werden. Wenn Sie also ein bestimmtes Modul zweimal require() verwenden, wird das bereits erstellte Modul zurückgegeben.

// main.js file

function add (a, b) {
  return a + b;
}

module.exports = add;  // here we add our add function to the exports object


// test.js file

const add = require('./main'); 

console.log(add(1,2));  // logs 3
6

Hier ist eine Problemumgehung für Browser (nicht Node.js), die HTML-Importe verwenden.

Erstens befinden sich alle JavaScript-Klassen und -Skripts nicht in .js-Dateien, sondern in .js.html-Dateien (die .js .html ist nur zwischen HTML-Seiten und vollständigen JavaScript-Skript Klassen zu erkennen) innerhalb von <script>-Tags wie folgt:

MyClass.js.html:

<script>
   class MyClass {

      // Your code here..

   }

</script>

Wenn Sie Ihre Klasse importieren möchten, müssen Sie nur HTML-Importe verwenden:

<link rel="import" href="relative/path/to/MyClass.js.html"/>

<script>
   var myClass = new MyClass();
   // Your code here..
</script>

BEARBEITEN: HTML-Importe werden gelöscht

HTML-Importe und ES6-Module/sind in den meisten Browsern auf der ganzen Welt bereits gut implementiert . Da HTML-Importe jedoch definitiv nicht Teil der Standards sein werden, wird ihre Entwicklung im Gegensatz zu ES6-Modulen gestrichen. Dann sollten Sie unbedingt ES6-Module verwenden.

6
Yairopro

Hier ist ein Grunt Plugin, mit dem Sie die @import "path/to/file.js";-Syntax in jeder Datei einschließlich JavaScript-Dateien verwenden können. Es kann mit uglify oder watch oder einem anderen Plugin gekoppelt werden.

Es kann mit npm install installiert werden: https://npmjs.org/package/grunt-import

6
Marcin

Verwenden Sie besser die Methode jQuery . Um das Fertigereignis zu verzögern, rufen Sie zuerst $.holdReady(true). Beispiel ( source ):

$.holdReady(true);
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});
6
weageoo

Halten Sie es schön, kurz, einfach und wartbar! :]

// 3rd party plugins / script (don't forget the full path is necessary)
var FULL_PATH = '', s =
[
    FULL_PATH + 'plugins/script.js'      // Script example
    FULL_PATH + 'plugins/jquery.1.2.js', // jQuery Library 
    FULL_PATH + 'plugins/crypto-js/hmac-sha1.js',      // CryptoJS
    FULL_PATH + 'plugins/crypto-js/enc-base64-min.js'  // CryptoJS
];

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

 // initialize a single load 
load('plugins/script.js');

// initialize a full load of scripts
if (s.length > 0)
{
    for (i = 0; i < s.length; i++)
    {
        load(s[i]);
    }
}

Dieser Code ist lediglich ein kurzes Funktionsbeispiel, das könnte zusätzliche Funktionen für die vollständige Unterstützung auf jeder (oder gegebenen) Plattform erfordern.

5
tfont

Ich mache es im Grunde wie folgt, erstelle ein neues Element und befestige es an head:

var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);

In jQuery :

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // Script is now loaded and executed.
    // Put your dependent JavaScript code here.
});
5

Nur für NodeJS, das funktionierte für mich das Beste!

Ich habe die meisten Lösungen hier ausprobiert, aber keine half mir, eine andere Datei laden zu können, ohne den Umfang zu ändern. Endlich habe ich das benutzt. Was den Umfang und alles bewahrt. Es ist so gut wie Ihr Code in diesem Punkt ist.

const fs = require('fs');
eval(fs.readFileSync('file.js')+'');
5
rturkek

Es ist sehr einfach. Angenommen, Sie möchten die Datei A.js in die Datei B.js importieren.

Nun ist es sicher, dass Sie B.js in einer HTML-Datei verknüpft haben. Dann verknüpfen Sie einfach A.js vor B.js in dieser HTML-Datei. Dann sind die öffentlichen Variablen von A.js in den B.js verfügbar

Dies erfordert keine komplizierte Antwort.

4

Ich habe die Anforderung, ein Array von JavaScript-Dateien asynchron zu laden und am Schluss einen Rückruf durchzuführen. Grundsätzlich ist mein bester Ansatz folgender:

// Load a JavaScript file from other JavaScript file
function loadScript(urlPack, callback) {
    var url = urlPack.shift();
    var subCallback;

    if (urlPack.length == 0) subCallback = callback;
    else subCallback = function () {
        console.log("Log script: " + new Date().getTime());
        loadScript(urlPack, 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 = subCallback;
    script.onload = subCallback;

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

Beispiel:

loadScript(
[
    "js/DataTable/jquery.dataTables.js",
    "js/DataTable/dataTables.bootstrap.js",
    "js/DataTable/dataTables.buttons.min.js",
    "js/DataTable/dataTables.colReorder.min.js",
    "js/DataTable/dataTables.fixedHeader.min.js",
    "js/DataTable/buttons.bootstrap.min.js",
    "js/DataTable/buttons.colVis.min.js",
    "js/DataTable/buttons.html5.min.js"
], function() { gpLoad(params); });

Das zweite Skript wird erst geladen, wenn das erste vollständig geladen ist.

Ergebnisse:

 Result

4
MiBol

Wenn Sie Angular verwenden, kann Ihnen ein Plugin-Modul $ ocLazyLoad dabei helfen. 

Hier einige Zitate aus der Dokumentation:

Laden Sie ein oder mehrere Module und Komponenten mit mehreren Dateien:

$ocLazyLoad.load(['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']);

Laden Sie ein oder mehrere Module mit mehreren Dateien und geben Sie gegebenenfalls einen Typ an: Hinweis: Geben Sie bei der Formatierung von "requestJS" (z. B. mit js! Am Anfang) keine Dateierweiterung an. Verwenden Sie das eine oder das andere.

$ocLazyLoad.load([
  'testModule.js',
   {type: 'css', path: 'testModuleCtrl'},
   {type: 'html', path: 'testModuleCtrl.html'},
   {type: 'js', path: 'testModuleCtrl'},
   'js!testModuleService',
   'less!testModuleLessFile'
]);

Sie können externe Bibliotheken laden (nicht eckig):

$ocLazyLoad.load(['testModule.js', 
   'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js']);

Sie können auch CSS- und Vorlagendateien laden:

 $ocLazyLoad.load([
     'bower_components/bootstrap/dist/js/bootstrap.js',
     'bower_components/bootstrap/dist/css/bootstrap.css',
     'partials/template1.html'
 ]);
4
gm2008

Importieren und exportieren Sie Module mit ES6, die mit Node.js funktionieren

Benennen Sie Dateien mit der Erweiterung .mjs anstelle von .js.

Dateien erstellen

touch main.mjs lib.mjs

main.js

import { add } from './lib.mjs';
console.log(add(40, 2));

lib.mjs

export let add = (x,y) => {
  return x + y
}

Lauf

node --experimental-modules main.js
3
jasonleonhard

Jetzt bin ich vielleicht völlig falsch, aber hier habe ich vor kurzem angefangen ... Beginnen und beenden Sie Ihre JavaScript-Dateien mit einem Wagenrücklauf. Platzieren Sie diese in das Skript PHP, gefolgt von einem weiteren Wagenrücklauf Der JavaScript-Kommentar "//" wird von PHP ignoriert, sodass die Einbeziehung trotzdem stattfindet. Der Zweck der Wagenrückgabe besteht darin, dass die erste Zeile Ihres enthaltenen JavaScript nicht auskommentiert wird.

Technisch brauchen Sie den Kommentar nicht, aber er gibt Fehler in Dreamweaver , die mich stören. Wenn Sie in einem IDE Skript schreiben, das keine Fehler bereitstellt, sollten Sie den Kommentar oder den Wagenrücklauf nicht benötigen.

\n
//<?php require_once("path/to/javascript/dependency.js"); ?>

function myFunction(){
    // stuff
}
\n
3
Duncan
var s=["Hscript.js","checkRobert.js","Hscript.js"];
for(i=0;i<s.length;i++){
  var script=document.createElement("script");
  script.type="text/javascript";
  script.src=s[i];
  document.getElementsByTagName("head")[0].appendChild(script)
};
3
Robert A

Vergessen Sie nicht, LAB.js auszuprobieren!

<script type="text/javascript">
       $LAB
       .script("jquery-1.8.3.js").wait()
       .script("scripts/clientscript.js");      
</script>
3
emolaus

In einem früheren Projekt war ich mit ajile ziemlich erfolgreich, um wiederverwendbare JavaScript-Dateien zu importieren. Ich habe mir immer gewünscht, dass es ein Feature für JavaScript gibt.

3
jpierson

Ein anderer Ansatz ist die Verwendung von HTML-Importen. Diese können Skriptreferenzen sowie Stylesheet-Referenzen enthalten.

Sie können eine HTML-Datei einfach so verlinken

<link rel="import" href="vendorScripts.html"/>

In die vendorScripts.html-Datei können Sie Ihre Skriptreferenzen einfügen:

<script src="scripts/vendors/jquery.js"></script>
<script src="scripts/vendors/bootstrap.js"></script>
<script src="scripts/vendors/angular.js"></script>
<script src="scripts/vendors/angular-route.js"></script>

Siehe HTML-Importe für weitere Details.

Leider funktioniert das nur in Chrome.

2
gabriel211

Sie können nicht importieren, aber Sie können referenzieren.

PhpShtorm IDE. Um in einer .js-Datei auf einen anderen .js zu verweisen, fügen Sie dies einfach am Anfang der Datei ein:

<reference path="../js/file.js" />

Natürlich sollten Sie Ihren eigenen PFAD für die JavaScript-Datei verwenden.

Ich weiß nicht, ob es in anderen IDEs funktioniert. Wahrscheinlich ja, versuch es einfach. Es sollte auch in Visual Studio funktionieren.

Ja, da ist ...

Lesen Sie weiter, in ES6 können wir export und import teilweise oder ganze Javascript-Datei in eine andere einfügen ...

Aber warte, ES6 wird nicht in allen Browsern unterstützt. Du brauchst es zum Beispiel mit babel.js ...

So erstellen Sie eine Klasse wie folgt:

class Person {
  constructor(name) {
    this.name = name;
  }

  build() {
    return new Person(this);
  }
}

module.exports = Person;

führen Sie den Import in einer anderen JavaScript-Datei wie folgt aus:

import { Person } from 'Person';

Sie können die Datei auch wie folgt anfordern:

const Person = require('./Person');

Wenn Sie eine ältere JavaScript-Version verwenden, können Sie requiredjs verwenden:

requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

Wenn Sie sich an ältere Versionen von Dingen wie jQuery halten möchten, können Sie auch etwas wie getScript verwenden:

jQuery.getScript('./another-script.js', function() {
    // Call back after another-script loaded
});

Nicht zuletzt vergessen Sie nicht, dass Sie die herkömmliche Methode zum Zusammenstellen von Skripts mithilfe von <script>-Tag verwenden können.

<script src="./first-script.js"></script>
<script src="./second-script.js"></script>
<script src="./third-script.js"></script>

Es gibt auch async und defer Attribut, die ich hier erwähnen sollte ...

Hinweis: Es gibt verschiedene Möglichkeiten, ein externes Skript auszuführen:

  • Wenn async vorhanden ist: Das Skript wird asynchron ausgeführt mit dem Rest der Seite (das Skript wird ausgeführt, während die Seite die Analyse fortsetzt)
  • Wenn async nicht vorhanden ist und verzögert ist present: Das Skript wird ausgeführt, wenn die Seite fertig ist Parsing
  • Wenn weder async noch defer vorhanden ist: Das Skript lautet Wird abgerufen und sofort ausgeführt, bevor der Browser fortgesetzt wird die Seite analysieren
2
Alireza

Hier ist vielleicht ein anderer Weg! In Node.js machen Sie das wie folgt! http://requirejs.org/docs/node.html

sub.js

module.exports = {
  log: function(string) {
    if(console) console.log(string);
  }
  mylog: function(){
    console.log('just for log test!');
  }
}

main.js

var mylog =require('./sub');

mylog.log('Hurray, it works! :)');
mylog.mylog();
2
xgqfrms

Ich habe dieses Problem mit einem anderen Ansatz ausprobiert.

Die Reihenfolge beim Import von Skripten hat hier keine Auswirkung.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Trials</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="main.js"></script>
    <script src="scriptA.js"></script>
</head>

<body>
<h3>testing js in js (check console logs)</h3>
<button onclick="fnClick()">TEST</button>
</body>

</html>

main.js

function fnClick() {
  console.log('From\tAAAAA');
  var pro = myExpo.hello();
  console.log(pro);
}

scriptA.js

myExpo = {
    hello: function () {
        console.log('From\tBBBBB');
        return "Hello";
    }
}

und das Ergebnis ist

From    AAAAA
From    BBBBB
Hello
1
Milton Ain

ES6: JA, benutze type = "module" im Skript-Tag ( support )

<script type="module" src="script.js"></script>

Und in der script.js -Datei ist eine andere Datei wie diese enthalten:

import { hello } from './module.js';
...
// alert(hello());

In 'module.js' müssen Sie Exportfunktion/Klasse , dass Sie importieren

export function hello() {
    return "Hello World";
}

Arbeiten Beispiel hier .

1

Wenn Sie feststellen, dass zwei oder mehr Skripts beim Aufruf der gleichen Funktion besetzt sind, können wir sie nicht in die gleichen Zeiten einschließen. Wir müssen dies durch die Auswahl des Benutzers dynamisch tun.

Das Einfügen anderer Dateien in jQuery mit $.getScript funktioniert seit dem Skript wird standardmäßig nicht zwischengespeichert Wir brauchen also keine weiteren Skripte. Die Anrufe können wie folgt organisiert werden:

HTML

<select class="choice">
  <option value="script1" selected>Script-1</option>
  <option value="script2">Script-2</option>
</select>

JS 

  $(".choice").change(on_change);

    var url = "https://example.com";
    $.url1 = url + "/script1.js";
    $.url2 = url + "/script2.js";

  function on_change() {
    if ($(".choice").val()=="script1") {
        script1();
    } else {
        script2();
    }

    // script1
    function script1() {   
      $.getScript($.url1, function( data, textStatus, jqxhr ) {
          //excecute here
      });  
    }

    // script2
    function script2() {
       $.getScript($.url2, function( data, textStatus, jqxhr ) {
          //excecute here
      });  
    }
0
Chetabahana

Little Extend to lib von der Antwort @Dan Dascalescu von der Facebook-Idee.

(function() {   
var __ = {};
this._ = function(name, callback) {
    if(__[name]==undefined) {
        __[name] = true;
        var firstScript = document.getElementsByTagName('script')[0],
          js = document.createElement('script');
          js.src =  name;
          js.onload = callback;
          firstScript.parentNode.insertBefore(js, firstScript);
    }
}
})();

(new _('https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js', function() {
 snowStorm.snowColor = '#99ccff';
}));
0

Bitte beachten Sie, dass wir normalerweise static scripts verwenden. Wir wollen also so viel wie möglich aus dem cache genommen werden .. Dies spart Netzwerkverkehr und beschleunigt die Landung.

Verwendungszweck

$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});

cache: true Option wurde der Ajax-Methode hinzugefügt

0
Adam111p
var xxx = require("../lib/your-library.js")

oder

import xxx from "../lib/your-library.js" //get default export
import {specificPart} from '../lib/your-library.js' //get named export
import * as _name from '../lib/your-library.js'  //get full export to alias _name
0
Mesut Yiğit

Sie können mein loadScript ES-Modul zum Laden der JavaScript-Dateien verwenden.

Verwendungszweck:

Fügen Sie in Ihr Head-Tag den folgenden Code ein:

<script src="https://raw.githack.com/anhr/loadScriptNodeJS/master/build/loadScript.js"></script>

oder

<script src="https://raw.githack.com/anhr/loadScriptNodeJS/master/build/loadScript.min.js"></script>

Jetzt können Sie window.loadScript zum Laden Ihrer JavaScript-Dateien verwenden.

loadScript.async (src, [Optionen])

Asynchrones Laden der JavaScript-Datei.

src: URL einer externen Skriptdatei oder Array der Skriptdateinamen.

optionen: Folgende Optionen sind verfügbar

onload: function () The onload event occurs when a script has been loaded. Default is undefined.

onerror: function ( str, e ) The onerror event occurs when an error has been occured. Default is undefined.

    str: error details

    e: event

appendTo: The node to which the new script will be append. Default is head node.

Zum Beispiel

loadScript.async( "JavaScript.js",
        {
            onload: function () {

                var str = 'file has been loaded successfully';
                console.log( str );

            },
            onerror: function ( str, e ) {

                console.error( str );

            },

        } );

Anwendungsbeispiel

0
Andrej

Dynamisches Laden mehrerer Skripte nacheinander

Die obige Funktion funktioniert einwandfrei, wenn Sie nur ein Skript laden oder sich nicht um die Ladereihenfolge mehrerer Skripte kümmern. Wenn Sie einige Skripte haben, die von anderen abhängen, müssen Sie Promise verwenden, um die Ladereihenfolge festzulegen. Der Grund dafür ist, dass Javascript Ressourcen wie Skripte und Bilder asynchron lädt. Die Ladereihenfolge hängt nicht von der Reihenfolge der asynchronen Aufrufe ab. Das bedeutet, dass script1 nicht vor script2 geladen werden kann, auch wenn Sie dynamicallyLoadScript("scrip1") aufrufen, bevor Sie dynamicallyLoadScript("scrip2") aufrufen.

Hier ist eine andere Version von dynamicallyLoadScript, die die Ladereihenfolge garantiert:

// Based on: https://javascript.info/promise-basics#example-loadscript
function dynamicallyLoadScript(url) {
        return new Promise(function(resolve, reject) {
        var script = document.createElement("script");
        script.src = url;
        script.onload = resolve;
        script.onerror = () => reject(new Error(`Error when loading ${url}!`));
        document.body.appendChild(script);
    });

Weitere Informationen zu Versprechen finden Sie auf dieser ausgezeichneten Seite .

Die Verwendung dieses neuen dynamicallyLoadScript ist sehr einfach:

dynamicallyLoadScript("script1.js")
.then(() => dynamicallyLoadScript("script2.js"))
.then(() => dynamicallyLoadScript("script3.js"))
.then(() => dynamicallyLoadScript("script4.js"))
.then(() => dynamicallyLoadScript("script5.js"))
//...

Jetzt werden die Skripte in der Reihenfolge von script1.js, script2.js, script3.js usw. geladen.

Führen Sie abhängigen Code aus, nachdem das Skript geladen wurde

Darüber hinaus können Sie sofort Code ausführen, der die Skripte verwendet, nachdem sie geladen wurden. Fügen Sie nach dem Laden des Skripts einfach einen weiteren .then hinzu:

dynamicallyLoadScript("script1.js")
.then(() => dynamicallyLoadScript("script2.js"))
.then(() => foo()) // foo can be a function defined in either script1, script2
.then(() => dynamicallyLoadScript("script3.js"))
.then(() => {
     if (var1){ // var1 can be a global variable defined in either script1, script2, or script3
          bar(var1); // bar can be a function defined in either script1, script2, or script3
     } else {
          foo(var1);
     }
})
//more .then chains...

Ladefehler behandeln

Um nicht behandelte Ablehnungen von Versprechungen anzuzeigen (Fehler beim Laden von Skripten usw.), setzen Sie den Ereignis-Listener unhandledrejection ganz oben in Ihren Code:

// Based on: https://javascript.info/promise-error-handling#unhandled-rejections
window.addEventListener('unhandledrejection', function(event) {
     // the event object has two special properties:
     console.error(event.promise);// the promise that generated the error
     console.error(event.reason); // the unhandled error object
});

Jetzt werden Sie über Fehler beim Laden des Skripts informiert.


Verknüpfungsfunktion

Wenn Sie viele Skripte laden, ohne unmittelbar nach dem Laden Code auszuführen, kann diese Kurzfunktion nützlich sein:

function dynamicallyLoadScripts(urls){
        if (urls.length === 0){
            return;
        }
        let promise = dynamicallyLoadScript(urls[0]);
        urls.slice(1).forEach(url => {
            promise = promise.then(() => dynamicallyLoadScript(url));
        });
    }

Um es zu verwenden, übergeben Sie einfach eine Reihe von Skript-URLs wie folgt:

const scriptURLs = ["dist/script1.js", "dist/script2.js", "dist/script3.js"];
dynamicallyLoadScripts(scriptURLs);

Die Skripte werden in der Reihenfolge geladen, in der sie im Array angezeigt werden.

0
AlienKevin