Einschließen einer .js-Datei in eine .js-Datei [duplicate]

Lesezeit: 3 Minuten

Benutzer-Avatar
Yo Mama

Ich würde gerne wissen, ob es möglich ist, a .js Datei in einer anderen .js Datei?

Der Grund für mich, dies zu tun, ist, Client-Includes auf ein Minimum zu beschränken. Ich habe mehrere .js Dateien, die bereits mit Funktionen geschrieben wurden, die vom Client benötigt werden. Der Client hätte eine HTML-Datei, die er mit a verwaltet .js Datei enthalten (meine .js Datei).

Ich könnte neu schreiben .js Datei mit allen darin enthaltenen Funktionen oder, um Doppelarbeit zu vermeiden, einen Weg finden, eine .js Datei, die andere enthält .js Dateien.

  • Ich habe gerade ein Grunt-Plugin für so ziemlich die gleiche Anforderung erstellt – es enthält nur die Funktionen, die in Ihrer Hauptanwendung verwendet werden: github.com/mr-moon/grunt-contrib-resolve

    – Aleksandr Makov

    27. Februar 2014 um 17:47 Uhr

Benutzer-Avatar
SIE

Ich mache das grundsätzlich so, erstelle ein neues Element und hänge es an <head>

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

Sie können auch verwenden onload event an jedes Skript, das Sie anhängen, aber testen Sie es bitte, ich bin mir nicht sicher, ob es browserübergreifend funktioniert oder nicht.

x.onload=callback_function;

  • Da es asynchron ist, bin ich mir nicht sicher, ob sie in der erwarteten Reihenfolge ankommen werden

    – Mikrofon

    27. Januar 2010 um 10:24 Uhr

Benutzer-Avatar
gnarf

Die beste Lösung für die Ladezeit Ihres Browsers wäre die Verwendung eines serverseitigen Skripts, um sie alle in einer großen .js-Datei zusammenzufügen. Stellen Sie sicher, dass Sie die endgültige Version gzip/minimieren. Einzelanfrage – schön kompakt.

Alternativ können Sie DOM verwenden, um eine zu erstellen <script> -Tag und legen Sie die src-Eigenschaft darauf fest, und hängen Sie sie dann an die an <head>. Wenn Sie warten müssen, bis diese Funktionalität geladen ist, können Sie den Rest Ihrer Javascript-Datei von der aufrufen load Ereignis auf diesem Skript-Tag.

Diese Funktion basiert auf der Funktionalität von jQuery $.getScript()

function loadScript(src, f) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.src = src;
  var done = false;
  script.onload = script.onreadystatechange = function() { 
    // attach to both events for cross browser finish detection:
    if ( !done && (!this.readyState ||
      this.readyState == "loaded" || this.readyState == "complete") ) {
      done = true;
      if (typeof f == 'function') f();
      // cleans up a little memory:
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
    }
  };
  head.appendChild(script);
}

// example:
loadScript('/some-other-script.js', function() { 
   alert('finished loading');
   finishSetup();
 });

Es gibt keinen direkten Weg, dies zu tun.

Sie können das Skript bei Bedarf laden. (Verwendet wieder etwas Ähnliches wie das, was Ignacio erwähnt hat, aber viel sauberer).

Unter diesem Link finden Sie mehrere Möglichkeiten, dies zu tun:
http://ajaxpatterns.org/On-Demand_Javascript

Mein Favorit ist (nicht immer zutreffend):

<script src="https://stackoverflow.com/questions/2145914/dojo.js" type="text/javascript">
dojo.require("dojo.aDojoPackage");

Die Schließung von Google bietet auch ähnliche Funktionen.

  • Der Link ist mittlerweile tot.

    – Gerold Broser

    3. August 2019 um 17:01 Uhr

Benutzer-Avatar
Daniel Wassallo

Eine beliebte Methode, um das Problem der Reduzierung von JavaScript-Referenzen aus HTML-Dateien anzugehen, ist die Verwendung eines Verkettungstools wie Kettenräderdas JavaScript-Quelldateien vorverarbeitet und miteinander verkettet.

Neben der Reduzierung der Verweise aus den HTML-Dateien wird dadurch auch die Anzahl der Zugriffe auf den Server reduziert.

Möglicherweise möchten Sie die resultierende Verkettung dann durch ein Minimierungstool wie z jsmin es verkleinern zu lassen.

Benutzer-Avatar
Peter Jordan

Ich verwende die Methode von @gnarf, obwohl ich darauf zurückgreife document.writelnein <script> Tag für IE<7, da ich die DOM-Erstellung nicht dazu bringen konnte, zuverlässig in IE6 zu arbeiten (und TBH kümmerte sich nicht genug darum, viel Mühe darauf zu verwenden). Der Kern meines Codes ist:

if (horus.script.broken) {
    document.writeln('<script type="text/javascript" src="'+script+'"></script>');   
    horus.script.loaded(script);
} else {
    var s=document.createElement('script');
    s.type="text/javascript";
    s.src=script;
    s.async=true;

    if (horus.brokenDOM){
        s.onreadystatechange=
            function () {
                if (this.readyState=='loaded' || this.readyState=='complete'){
                    horus.script.loaded(script);
                }
        }
    }else{
        s.onload=function () { horus.script.loaded(script) };
    }

    document.head.appendChild(s);
}

wo horus.script.loaded() stellt fest, dass die Javascript-Datei geladen wird, und ruft alle ausstehenden nicht aufgerufenen Routinen auf (gespeichert durch Autoloader-Code).

1204850cookie-checkEinschließen einer .js-Datei in eine .js-Datei [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy