Ich versuche, Javascript-Dateien dynamisch in meine JS-Datei aufzunehmen. Ich habe einige Nachforschungen angestellt und festgestellt, dass die Methode jQuery $ .getScript () ein gewünschter Weg wäre.

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
    // what if the JS code is dependent on multiple JS files? 
});

Aber ich frage mich, ob diese Methode mehrere Skripte gleichzeitig laden kann? Ich frage dies, weil meine Javascript-Datei manchmal von mehr als einer JS-Datei abhängt.

Vielen Dank im Voraus.

Die Antwort ist

Sie können Versprechen mit verwenden getScript()und warten, bis alle Skripte geladen sind.

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
    
    //place your code here, the scripts are all loaded
    
});

GEIGE

ANOTHER FIDDLE

In dem obigen Code, das Hinzufügen einer aufgeschobenen und Auflösen es im Inneren $()ist wie jede andere Funktion innerhalb eines jQuery Anruf tätigen, wie $(func), es ist das gleiche wie

$(function() { func(); });

Das heißt, es wartet darauf, dass das DOM bereit ist, und $.whenwartet im obigen Beispiel darauf, dass alle Skripte geladen werden und dass das DOM bereit ist, da der $.DeferredAnruf im DOM-fähigen Rückruf aufgelöst wird.

Für eine allgemeinere Verwendung eine praktische Funktion

Eine Dienstprogrammfunktion, die ein beliebiges Array von Skripten akzeptiert, kann folgendermaßen erstellt werden:

$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript( (path||"") + scr );
    });
        
    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));
        
    return $.when.apply($, _arr);
}

was so verwendet werden kann

var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];

$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

Dabei wird der Pfad allen Skripten vorangestellt und ist ebenfalls optional. Wenn das Array die vollständigen URLs enthält, kann dies auch ausgeführt werden, und der Pfad wird insgesamt weggelassen

$.getMultiScripts(script_arr).done(function() { ...

Argumente, Fehler usw.

Beachten Sie außerdem, dass der doneRückruf eine Reihe von Argumenten enthält, die mit den in Skripten übergebenen Argumenten übereinstimmen, wobei jedes Argument ein Array darstellt, das die Antwort enthält

$.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...

wo jedes Array so etwas enthält [content_of_file_loaded, status, xhr_object]. Wir müssen im Allgemeinen nicht auf diese Argumente zugreifen, da die Skripte ohnehin automatisch geladen werden. In den meisten doneFällen ist der Rückruf alles, was wir wirklich brauchen, um zu wissen, dass alle Skripte geladen wurden. Der Vollständigkeit halber füge ich ihn nur hinzu und in den seltenen Fällen, in denen auf den tatsächlichen Text aus der geladenen Datei zugegriffen werden muss oder wenn auf jedes XHR-Objekt oder ähnliches zugegriffen werden muss.

Wenn eines der Skripte nicht geladen werden kann, wird der Fail-Handler aufgerufen und nachfolgende Skripte werden nicht geladen

$.getMultiScripts(script_arr).done(function() {
     // all done
}).fail(function(error) {
     // one or more scripts failed to load
}).always(function() {
     // always called, both on success and error
});

Ich habe eine einfache Funktion implementiert, um mehrere Skripte gleichzeitig zu laden:

Funktion

function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) { 
        $.getScript(script, function () {
            if (++progress == scripts.length) callback();
        }); 
    });
}

Verwendung

getScripts(["script1.js", "script2.js"], function () {
    // do something...
});

Laden Sie das folgende benötigte Skript in den Rückruf des vorherigen wie folgt:

$.getScript('scripta.js', function()
{
   $.getScript('scriptb.js', function()
   {
       // run script that depends on scripta.js and scriptb.js
   });
});

Manchmal ist es notwendig, Skripte in einer bestimmten Reihenfolge zu laden. Beispielsweise muss jQuery vor der jQuery-Benutzeroberfläche geladen werden. Die meisten Beispiele auf dieser Seite laden Skripte parallel (asynchron), was bedeutet, dass die Ausführungsreihenfolge nicht garantiert ist. Ohne Bestellung kann ein Skript y, das davon abhängt , beschädigt werden , xwenn beide erfolgreich geladen wurden, jedoch in falscher Reihenfolge.

Ich schlage einen hybriden Ansatz vor, der das sequentielle Laden abhängiger Skripte + optionales paralleles Laden + verzögerte Objekte ermöglicht :

/*
 * loads scripts one-by-one using recursion
 * returns jQuery.Deferred
 */
function loadScripts(scripts) {
  var deferred = jQuery.Deferred();

  function loadScript(i) {
    if (i < scripts.length) {
      jQuery.ajax({
        url: scripts[i],
        dataType: "script",
        cache: true,
        success: function() {
          loadScript(i + 1);
        }
      });
    } else {
      deferred.resolve();
    }
  }
  loadScript(0);

  return deferred;
}

/*
 * example using serial and parallel download together
 */

// queue #1 - jquery ui and jquery ui i18n files
var d1 = loadScripts([
  "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js",
  "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"
]).done(function() {
  jQuery("#datepicker1").datepicker(jQuery.datepicker.regional.fr);
});

// queue #2 - jquery cycle2 plugin and tile effect plugin
var d2 = loadScripts([
  "https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/jquery.cycle2.min.js",
  "https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/plugin/jquery.cycle2.tile.min.js"

]).done(function() {
  jQuery("#slideshow1").cycle({
    fx: "tileBlind",
    log: false
  });
});

// trigger a callback when all queues are complete
jQuery.when(d1, d2).done(function() {
  console.log("All scripts loaded");
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");

#slideshow1 {
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<p><input id="datepicker1"></p>

<div id="slideshow1">
  <img src="https://dummyimage.com/300x100/FC0/000">
  <img src="https://dummyimage.com/300x100/0CF/000">
  <img src="https://dummyimage.com/300x100/CF0/000">
</div>

Die Skripte in beiden Warteschlangen werden parallel heruntergeladen. Die Skripte in jeder Warteschlange werden jedoch nacheinander heruntergeladen, um eine geordnete Ausführung sicherzustellen. Wasserfallkarte:

Verwenden Sie yepnope.js oder Modernizr (einschließlich yepnope.js als Modernizr.load).

AKTUALISIEREN

Hier ist ein gutes Äquivalent zu dem, was Sie derzeit mit yepnope verwenden. Es zeigt Abhängigkeiten von mehreren Skripten:

yepnope({
  load: ['script1.js', 'script2.js', 'script3.js'],
  complete: function () {
      // all the scripts have loaded, do whatever you want here
  }
});

Ich bin auf eine Reihe von Problemen beim Laden mehrerer Skripte gestoßen, darunter ein Problem mit (zumindest in Chrome) dem Hot-Laden von Skripten in derselben Domain, die nach dem erfolgreichen Laden durch Ajax nicht ausgeführt wurden, da Cross Domain einwandfrei funktioniert! :((

Die ausgewählte Antwort auf die ursprüngliche Frage funktioniert nicht zuverlässig.

Nach vielen, vielen Iterationen ist hier meine endgültige Antwort auf getScript (s) und das asynchrone Laden mehrerer Skripte in einer bestimmten strengen Reihenfolge mit der pro Skript geladenen Rückrufoption und dem allgemeinen Rückruf nach Abschluss. Getestet in jQuery 2.1+ und modernen Versionen von Chrome, Firefox plus verlassener Internet Explorer.

Mein Testfall bestand darin, Dateien für ein THREE.JS-WebGL-Rendering zu laden und dann das Rendering-Skript zu starten, als THREE global mithilfe einer Intervallprüfung verfügbar wurde, die an einen anonymen Funktionsaufruf an onComplete übergeben wurde.

Die Prototyp-Funktion (getScripts)

function getScripts( scripts, onScript, onComplete )
{
    this.async = true;
    this.cache = false;
    this.data = null;
    this.complete = function () { $.scriptHandler.loaded(); };
    this.scripts = scripts;
    this.onScript = onScript;
    this.onComplete = onComplete;
    this.total = scripts.length;
    this.progress = 0;
};

getScripts.prototype.fetch = function() {
    $.scriptHandler = this;
    var src = this.scripts[ this.progress ];
    console.log('%cFetching %s','color:#ffbc2e;', src);

    $.ajax({
        crossDomain:true,
        async:this.async,
        cache:this.cache,
        type:'GET',
        url: src,
        data:this.data,
        statusCode: {
            200: this.complete
        },
        dataType:'script'
    });
};

getScripts.prototype.loaded = function () {
    this.progress++;
    if( this.progress >= this.total ) {
        if(this.onComplete) this.onComplete();
    } else {
        this.fetch();
    };
    if(this.onScript) this.onScript();
};

Wie benutzt man

var scripts = new getScripts(
    ['script1.js','script2.js','script.js'],
    function() {
        /* Optional - Executed each time a script has loaded (Use for Progress updates?) */
    },
    function () {
        /* Optional - Executed when the entire list of scripts has been loaded */
    }
);
scripts.fetch();

Die Funktion ist so, wie sie für die Verwendung von Zurückgestellt (Jetzt veraltet?), Wann, Erfolg und Abschluss in meinen Versuchen als NICHT 100% zuverlässig befunden wurde !?, Daher diese Funktion und Verwendung von statusCode zum Beispiel.

Wenn Sie möchten, können Sie das Verhalten bei der Fehler- / Fehlerbehandlung hinzufügen.

Sie können die $.whenMethode verwenden, indem Sie die folgende Funktion ausprobieren:

function loadScripts(scripts) {
  scripts.forEach(function (item, i) {
    item = $.getScript(item);
  });
  return $.when.apply($, scripts);
}

Diese Funktion würde folgendermaßen verwendet:

loadScripts(['path/to/script-a.js', 'path/to/script-b.js']).done(function (respA, respB) {
    // both scripts are loaded; do something funny
});

Auf diese Weise können Sie Versprechen verwenden und ein Minimum an Overhead haben.

Tolle Antwort, Adeneo.

Ich habe eine Weile gebraucht, um herauszufinden, wie ich Ihre Antwort allgemeiner gestalten kann (damit ich eine Reihe von codedefinierten Skripten laden kann). Callback wird aufgerufen, wenn alle Skripte geladen und ausgeführt wurden. Hier ist meine Lösung:

    function loadMultipleScripts(scripts, callback){
        var array = [];

        scripts.forEach(function(script){
            array.push($.getScript( script ))
        });

        array.push($.Deferred(function( deferred ){
                    $( deferred.resolve );
                }));

        $.when.apply($, array).done(function(){
                if (callback){
                    callback();
                }
            });
    }

Fügen Sie Skripte mit async = false hinzu

Hier ist ein anderer, aber super einfacher Ansatz. Um mehrere Skripte zu laden, können Sie sie einfach an body anhängen.

• Lädt sie asynchron, da Browser so das Laden von Seiten optimieren
• Führt Skripte der Reihe nach aus, da Browser auf diese Weise die HTML-Tags analysieren
• Kein Rückruf erforderlich, da die Skripte der Reihe nach ausgeführt werden. Fügen Sie einfach ein weiteres Skript hinzu, und es wird nach den anderen Skripten ausgeführt

Weitere Informationen hier: https://www.html5rocks.com/en/tutorials/speed/script-loading/

var scriptsToLoad = [
   "script1.js", 
   "script2.js",
   "script3.js",
]; 
    
scriptsToLoad.forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.body.appendChild(script);
});

Was Sie suchen, ist ein AMD-kompatibler Loader (wie require.js).

http://requirejs.org/

http://requirejs.org/docs/whyamd.html

Es gibt viele gute Open Source, wenn Sie es nachschlagen. Grundsätzlich können Sie so ein Codemodul definieren. Wenn es von anderen Codemodulen abhängig ist, wartet es, bis diese Module heruntergeladen wurden, bevor es ausgeführt wird. Auf diese Weise können Sie 10 Module asynchron laden und es sollte keine Probleme geben, auch wenn eines von einigen anderen abhängig ist, um ausgeführt zu werden.

Diese Funktion stellt sicher, dass eine Datei geladen wird, nachdem die Abhängigkeitsdatei vollständig geladen wurde. Sie müssen die Dateien nur in einer Reihenfolge bereitstellen, wobei die Abhängigkeiten von anderen Dateien zu berücksichtigen sind.

function loadFiles(files, fn) {
    if (!files.length) {
        files = [];
    }
    var head = document.head || document.getElementsByTagName('head')[0];

    function loadFile(index) {
        if (files.length > index) {
            var fileref = document.createElement('script');
            fileref.setAttribute("type", "text/javascript");
            fileref.setAttribute("src", files[index]);
            head.appendChild(fileref);
            index = index + 1;
            // Used to call a callback function
            fileref.onload = function () {
                loadFile(index);
            }
        } else if(fn){
            fn();
        }
    }
    loadFile(0);
}

Das funktioniert bei mir:

function getScripts(scripts) {
    var prArr = [];
    scripts.forEach(function(script) { 
        (function(script){
            prArr .push(new Promise(function(resolve){
                $.getScript(script, function () {
                    resolve();
                });
            }));
        })(script);
    });
    return Promise.all(prArr, function(){
        return true;
    });
}

Und benutze es:

var jsarr = ['script1.js','script2.js'];
getScripts(jsarr).then(function(){
...
});

Hier ist die Antwort mit Maciej Sawickis und Implementierung Promiseals Rückruf:

function loadScripts(urls, path) {
    return new Promise(function(resolve) {
        urls.forEach(function(src, i) {

            let script = document.createElement('script');        
            script.type = 'text/javascript';
            script.src = (path || "") + src;
            script.async = false;

            // If last script, bind the callback event to resolve
            if(i == urls.length-1) {                    
                // Multiple binding for browser compatibility
                script.onreadystatechange = resolve;
                script.onload = resolve;
            }

            // Fire the loading
            document.body.appendChild(script);
        });
    });
}

Verwenden:

let JSDependencies = ["jquery.js",
                      "LibraryNeedingJquery.js",
                      "ParametersNeedingLibrary.js"];

loadScripts(JSDependencies,'JavaScript/').then(taskNeedingParameters);

Alle Javascript-Dateien werden so schnell wie möglich heruntergeladen und in der angegebenen Reihenfolge ausgeführt. Dann taskNeedingParametersheißt es.

Kürzere Version von Andrew Marc Newtons umfassender Antwort oben. Dieser überprüft den Statuscode nicht auf Erfolg, was Sie tun sollten, um undefiniertes Verhalten der Benutzeroberfläche zu vermeiden.

Dieses war für ein nerviges System gedacht, bei dem ich jQuery garantieren konnte, aber kein anderes enthält. Daher wollte ich eine Technik, die kurz genug ist, um nicht in ein externes Skript umgewandelt zu werden, wenn sie dazu gezwungen wird. (Sie könnten es noch kürzer machen, indem Sie den Index 0 an den ersten "rekursiven" Aufruf übergeben, aber die Kraft der Stilgewohnheiten hat mich dazu gebracht, den Zucker hinzuzufügen).

Ich weise die Abhängigkeitsliste auch einem Modulnamen zu, sodass dieser Block überall dort eingefügt werden kann, wo Sie "module1" benötigen, und die Skripte und die abhängige Initialisierung nur einmal enthalten / ausgeführt werden (Sie können sich indexbeim Rückruf anmelden und eine einzelne Bestellung anzeigen Satz laufender AJAX-Anforderungen)

if(typeof(__loaders) == 'undefined') __loaders = {};

if(typeof(__loaders.module1) == 'undefined')
{
    __loaders.module1 = false;

    var dependencies = [];

    dependencies.push('/scripts/loadmefirst.js');
    dependencies.push('/scripts/loadmenext.js');
    dependencies.push('/scripts/loadmelast.js');

    var getScriptChain  = function(chain, index)        
    {
        if(typeof(index) == 'undefined')
            index = 0;

        $.getScript(chain[index], 
            function()
            {
                if(index == chain.length - 1)
                {
                    __loaders.module1 = true;

                    /* !!!
                        Do your initialization of dependent stuff here 
                    !!! */
                }
                else 
                    getScriptChain(chain, index + 1);
            }
        );
    };

    getScriptChain(dependencies);       
}

Es gibt ein Plugin, das die getScript-Methode von jQuery erweitert. Ermöglicht asynchrones und synchrones Laden und verwendet den Caching-Mechanismus von jQuery. Vollständige Offenlegung, ich habe dies geschrieben. Bitte zögern Sie nicht, einen Beitrag zu leisten, wenn Sie eine bessere Methode finden.

https://github.com/hudsonfoo/jquery-getscripts

Lädt n Skripte nacheinander (nützlich, wenn zum Beispiel die 2. Datei die 1. benötigt):

(function self(a,cb,i){
    i = i || 0; 
    cb = cb || function(){};    
    if(i==a.length)return cb();
    $.getScript(a[i++],self.bind(0,a,cb,i));                    
})(['list','of','script','urls'],function(){console.log('done')});

basierend auf der Antwort von @adeneo oben: Kombiniert das Laden von CSS- und JS-Dateien

Verbesserungsvorschläge ??

// Usage
//$.getMultiResources(['script-1.js','style-1.css'], 'assets/somePath/')
//  .done(function () {})
//  .fail(function (error) {})
//  .always(function () {});

(function ($) {
  $.getMultiResources = function (arr, pathOptional, cache) {
    cache = (typeof cache === 'undefined') ? true : cache;
    var _arr = $.map(arr, function (src) {
      var srcpath = (pathOptional || '') + src;
      if (/.css$/i.test(srcpath)) {
        return $.ajax({
          type: 'GET',
          url: srcpath,
          dataType: 'text',
          cache: cache,
          success: function () {
            $('<link>', {
              rel: 'stylesheet',
              type: 'text/css',
              'href': srcpath
            }).appendTo('head');
          }
        });

      } else {
        return $.ajax({
          type: 'GET',
          url: srcpath,
          dataType: 'script',
          cache: cache
        });
      }
    });
    //
    _arr.push($.Deferred(function (deferred) {
      $(deferred.resolve);
    }));
    //
    return $.when.apply($, _arr);
  };
})(jQuery);

Sie können dies mit Rekursion versuchen. Dadurch werden sie nacheinander synchron heruntergeladen, bis der Download der gesamten Liste abgeschlossen ist.

var queue = ['url/links/go/here'];

ProcessScripts(function() { // All done do what ever you want

}, 0);

function ProcessScripts(cb, index) {
    getScript(queue[index], function() {
        index++;
        if (index === queue.length) { // Reached the end
            cb();
        } else {
            return ProcessScripts(cb, index);
        }
    });
}

function getScript(script, callback) {
    $.getScript(script, function() {
        callback();
    });
}