Próbuję dynamicznie dołączać pliki javascript do mojego pliku js. Zrobiłem kilka badań na ten temat i stwierdziłem, że metoda jQuery $ .getScript () byłaby pożądanym sposobem.

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

Ale zastanawiam się, czy ta metoda może załadować wiele skryptów jednocześnie? Dlaczego o to pytam, ponieważ czasami mój plik javascript zależy od więcej niż jednego pliku js.

Z góry dziękuję.

Odpowiedź to

Możesz używać obietnic getScript()i czekać, aż wszystkie skrypty zostaną załadowane, na przykład:

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

SKRZYPCE

KOLEJNY Fiddle

W powyższym kodzie dodanie odroczonego i rozwiązanie go w środku $()jest jak umieszczenie dowolnej innej funkcji wewnątrz wywołania jQuery, na przykład $(func)to to samo, co

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

tj. czeka, aż DOM będzie gotowy, więc w powyższym przykładzie $.whenczeka, aż wszystkie skrypty zostaną załadowane i DOM będzie gotowy z powodu $.Deferredwywołania, które jest rozwiązywane w wywołaniu zwrotnym gotowym do DOM.

Do bardziej ogólnego zastosowania przydatna funkcja

Funkcję narzędzia, która akceptuje dowolną tablicę skryptów, można utworzyć w następujący sposób:

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

które mogą być używane w ten sposób

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

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

gdzie ścieżka zostanie dołączona do wszystkich skryptów i jest również opcjonalna, co oznacza, że ​​jeśli tablica zawiera pełny adres URL, można to również zrobić i pominąć całą ścieżkę

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

Argumenty, błędy itp.

Na marginesie zwróć uwagę, że donewywołanie zwrotne będzie zawierało szereg argumentów pasujących do przekazanych w skryptach, przy czym każdy argument reprezentuje tablicę zawierającą odpowiedź

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

gdzie każda tablica będzie zawierać coś podobnego [content_of_file_loaded, status, xhr_object]. Generalnie nie musimy uzyskiwać dostępu do tych argumentów, ponieważ skrypty i tak będą ładowane automatycznie, a przez większość czasu donewywołanie zwrotne jest wszystkim, czego naprawdę potrzebujemy, aby wiedzieć, że wszystkie skrypty zostały załadowane, po prostu dodam je dla kompletności oraz w rzadkich przypadkach, gdy trzeba uzyskać dostęp do rzeczywistego tekstu z załadowanego pliku lub gdy potrzebny jest dostęp do każdego obiektu XHR lub czegoś podobnego.

Ponadto, jeśli którykolwiek ze skryptów nie zostanie załadowany, zostanie wywołana procedura obsługi błędów, a kolejne skrypty nie zostaną załadowane

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

Zaimplementowałem prostą funkcję do ładowania wielu skryptów równolegle:

Funkcjonować

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

Stosowanie

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

Załaduj następujący potrzebny skrypt w wywołaniu zwrotnym poprzedniego, na przykład:

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

Czasami konieczne jest ładowanie skryptów w określonej kolejności. Na przykład jQuery musi zostać załadowany przed interfejsem użytkownika jQuery. Większość przykładów na tej stronie ładuje skrypty równolegle (asynchronicznie), co oznacza, że ​​kolejność wykonywania nie jest gwarantowana. Bez zamawiania skrypt yzależny xmoże się zepsuć, jeśli oba zostaną pomyślnie załadowane, ale w złej kolejności.

Proponuję podejście hybrydowe, które pozwala na sekwencyjne ładowanie zależnych skryptów + opcjonalne ładowanie równoległe + odroczone obiekty :

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

Skrypty w obu kolejkach będą pobierane równolegle, jednak skrypty w każdej kolejce będą pobierane po kolei, zapewniając uporządkowane wykonanie. Wykres wodospadu:

Użyj yepnope.js lub Modernizr (co obejmuje yepnope.js jakoModernizr.load ).

AKTUALIZACJA

Aby kontynuować, oto dobry odpowiednik tego, co obecnie używasz przy użyciu yepnope, pokazujący zależności od wielu skryptów:

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

Napotkałem wiele problemów z ładowaniem wielu skryptów, w tym jeden problem z (przynajmniej w Chrome) ładowaniem na gorąco skryptów tej samej domeny, które faktycznie nie działają po pomyślnym załadowaniu przez Ajax, gdzie Cross Domain działa doskonale! :(

Wybrana odpowiedź na oryginalne pytanie nie działa rzetelnie.

Po wielu wielu iteracjach tutaj jest moja ostateczna odpowiedź na getScript (y) i ładowanie asynchronicznie wielu skryptów w określonej ścisłej kolejności z opcją wywołania zwrotnego dla każdego skryptu i ogólnym wywołaniem zwrotnym po zakończeniu, Testowane w jQuery 2.1+ i nowoczesnych wersjach Chrome, Firefox plus zapomniany Internet Explorer.

Mój przypadek testowy polegał na ładowaniu plików do renderowania THREE.JS webGL, a następnie uruchamianiu skryptu renderującego, gdy dostępne były TRZY globalne, przy użyciu sprawdzania interwału przekazanego do anonimowego wywołania funkcji onComplete.

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

Jak używać

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

Funkcja jest taka, jaka jest w przypadku, gdy używam Deferred (przestarzałe teraz?), When, Success & Complete w moich próbach NIE są w 100% niezawodne!?, Stąd ta funkcja i na przykład użycie kodu statusu.

Jeśli chcesz, możesz dodać zachowanie obsługi błędów / niepowodzeń.

Możesz skorzystać z $.when-method, próbując następującej funkcji:

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

Ta funkcja byłaby używana w następujący sposób:

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

W ten sposób można korzystać z obietnic i mieć minimum kosztów ogólnych.

Świetna odpowiedź, Adeneo.

Zajęło mi trochę czasu, zanim wymyśliłem, jak sprawić, by twoja odpowiedź była bardziej ogólna (tak, żebym mógł załadować tablicę skryptów zdefiniowanych w kodzie). Callback jest wywoływany, gdy wszystkie skrypty zostaną załadowane i wykonane. Oto moje rozwiązanie:

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

Dołącz skrypty z async = false

Oto inne, ale super proste podejście. Aby załadować wiele skryptów, możesz po prostu dołączyć je do treści.

• Ładuje je asynchronicznie, ponieważ w ten sposób przeglądarki optymalizują ładowanie strony
• Wykonuje skrypty po kolei, ponieważ w ten sposób przeglądarki analizują tagi HTML
• Nie ma potrzeby wywoływania zwrotnego, ponieważ skrypty są wykonywane w kolejności. Po prostu dodaj kolejny skrypt, a zostanie on wykonany po innych skryptach

Więcej informacji tutaj: 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);
});

To, czego szukasz, to program ładujący zgodny z AMD (np. Require.js).

http://requirejs.org/

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

Jeśli spojrzysz na to, istnieje wiele dobrych programów typu open source. Zasadniczo pozwala to na zdefiniowanie modułu kodu, a jeśli jest on zależny od innych modułów kodu, będzie czekał, aż zakończy się pobieranie tych modułów przed przystąpieniem do uruchomienia. W ten sposób możesz załadować 10 modułów asynchronicznie i nie powinno być żadnych problemów, nawet jeśli jeden zależy od kilku innych do uruchomienia.

Ta funkcja zapewni załadowanie pliku po całkowitym załadowaniu pliku zależności. Wystarczy podać pliki w sekwencji, pamiętając o zależnościach od innych plików.

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

To działa dla mnie:

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

I użyj go:

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

Oto odpowiedź wykorzystująca odpowiedź Macieja Sawickiego i implementująca Promisejako callback:

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

Posługiwać się:

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

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

Wszystkie pliki Javascript są pobierane tak szybko, jak to możliwe i wykonywane w podanej kolejności. Następnie taskNeedingParametersjest nazywany.

Krótsza wersja wyczerpującej odpowiedzi Andrew Marca Newtona powyżej. Ten nie sprawdza kodu statusu pod kątem powodzenia, co należy zrobić, aby uniknąć niezdefiniowanego zachowania interfejsu użytkownika.

Ten był dla irytującego systemu, w którym mogłem zagwarantować jQuery, ale nie zawierał innych, więc chciałem techniki na tyle krótkiej, aby nie została przeniesiona do zewnętrznego skryptu, jeśli zostanie do niego zmuszona. (Możesz to jeszcze skrócić, przekazując indeks 0 do pierwszego wywołania „rekurencyjnego”, ale siła nawyków stylowych sprawiła, że ​​dodałem cukier).

Przypisuję również listę zależności do nazwy modułu, więc ten blok może być dołączony gdziekolwiek potrzebujesz "moduł1" a skrypty i zależna inicjalizacja zostaną dołączone / uruchomione tylko raz (możesz zalogować się indexdo wywołania zwrotnego i zobaczyć jeden zamówiony zestaw uruchomionych żądań AJAX)

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

Jest tam wtyczka, która rozszerza metodę getScript jQuery. Umożliwia asynchroniczne i synchroniczne ładowanie oraz wykorzystuje mechanizm buforowania jQuery. Pełne ujawnienie, napisałem to. Jeśli znajdziesz lepszą metodę, możesz wnieść swój wkład.

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

Ładuje n skryptów jeden po drugim (przydatne, jeśli na przykład drugi plik potrzebuje pierwszego):

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

na podstawie odpowiedzi z @adeneo powyżej: Łączenie ładowania plików css i js

jakieś sugestie dotyczące ulepszeń?

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

Możesz spróbować, używając rekurencji. Spowoduje to ich zsynchronizowanie, jeden po drugim, aż do zakończenia pobierania całej listy.

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