Auswählen eines JavaScript-Asynch-Loaders [geschlossen]

9

Ich habe mir verschiedene asynchrone Ressourcenlader angesehen und bin mir noch nicht sicher, welche ich verwenden soll. Wo ich arbeite, haben wir unterschiedliche Gruppenbemühungen, deren Klassenmodule unterschiedliche Versionen von jQuery (usw.) verwenden können. Daher können sich auch verschachtelte Abhängigkeiten unterscheiden. Ich habe keine Kontrolle darüber, daher muss ich Ressourcen dynamisch laden, die möglicherweise alternative Versionen derselben Bibliothek verwenden.

Als solche sind hier meine Anforderungen:

  1. Laden Sie JavaScript- und CSS-Ressourcendateien asynchron.
  2. Verwalten der Abhängigkeitsreihenfolge und der verschachtelten Abhängigkeiten über Versionen hinweg.
  3. Ermitteln Sie, ob eine Ressource bereits geladen ist.
  4. Muss domänenübergreifendes Laden (CDNs) zulassen
  5. (optional) Erlauben Sie uns, eine Ressource zu entladen.

Ich habe gesucht:

Ich kann diese Anforderungen möglicherweise selbst vortäuschen, indem ich Versionen in Variablen mit richtigem Namensraum lade und mithilfe eines Arrays verfolge, was bereits geladen ist ... aber (hoffentlich) hat dies bereits jemand erfunden.

Meine Fragen sind also:

  • Welche benutzt du? Und warum?
  • Gibt es andere, die meine Anforderungen vollständig erfüllen?
  • Mit welchen ist es am beredtesten und am einfachsten zu arbeiten? Und warum?

UPDATE:
Für Interessierte habe ich alle oben genannten AMD-Bibliotheken (und mehr) ausprobiert. Am Ende habe ich mich für RequireJS entschieden . Insgesamt ist es einfach sauberer und einfacher ... und ich bin froh, es zu verwenden.

learning javascript resources async Gefangener NULL
quelle
Für JavaScript denke ich nicht, dass # 5 überhaupt möglich ist. Es könnte theoretisch für CSS möglich sein, aber ich bin mir nicht sicher, ob Browser dies unterstützen.
Mike Baranczak
@ Mike Danke für den Kommentar! Wenn der Asynch-Loader Ressourcen mithilfe von Objektvariablen verfolgt und gefüllt hat ... ist dies vollständig möglich.
Gefangener NULL
Richtig, aber der NEW-Konstruktor dupliziert das Objekt. Wenn Sie also ein neues Objekt erstellen, das Sie aufgerufen haben, ist es dort noch vorhanden. Warum sollten Sie es überhaupt entladen?
Inkognito
@ user1525 Danke für den Kommentar! Das Entladen von Ressourcen spart Speicher. Ich werde meine Frage oben mit einigen Gedanken zu Ihrem Kommentar bearbeiten (in ein paar Minuten). Danke noch einmal!
Gefangener NULL
jQuery verfügt bereits über eine getScriptFunktion zur Skriptinjektion.
zzzzBov

Antworten:

7

Ich habe RequireJS für ernsthafte Projekte verwendet und ich liebe es, aber es ist nicht wirklich als asynchroner Loader gedacht. Es soll wirklich ein Modulsystem sein. Zu diesem Zweck wird im Dienst ein asynchrones Laden bereitgestellt. Es kann gepusht werden, um alle Ihre Anforderungen zu erfüllen, aber seine Ladedienste dienen zum Laden von Modulen, nicht von beliebigen Dateien.

Laden von JavaScript- und CSS-Ressourcendateien asynchron : Requirejs lädt alle Module, die Sie benötigen, mithilfe der Skript-Tag-Injection, also asynchron.

Verwalten der Abhängigkeitsreihenfolge und der verschachtelten Abhängigkeiten über Versionen hinweg : Hier scheint RequireJS zu glänzen. Module können Abhängigkeiten von anderen Modulen deklarieren, und die Ladereihenfolge wird aus dieser Abhängigkeitsdeklaration extrapoliert. Es gibt auch ein Auftrags-Plugin, das die Reihenfolge von Abhängigkeiten erzwingen kann.

Erkennen, ob eine Ressource bereits geladen ist : Requirejs lädt ein Modul nur einmal.

Domänenübergreifendes Laden (CDNs) muss berücksichtigt werden : Dies ist möglich, erfordert jedoch eine gewisse Konfiguration. Sie können für jedes Modul eine bestimmte URL festlegen, die den Standardspeicherort überschreibt, sodass Sie ihn auf ein CDN festlegen können.

RequireJS eignet sich am besten, wenn Sie Module im Format schreiben, und ist am wenigsten effektiv, wenn Sie es zum Laden von Roh-Javascript verwenden.

Es bietet auch einen Erstellungsprozess, der Ihre Module für die Produktion zu einer einzigen Datei zusammenführt.

Sean McMillan
quelle
3

Theoretisch könnten Sie einfach eine Liste der bereits geladenen Skripte behalten und eine Funktion erstellen, die noch nicht geladene Skripte lädt.

http://jsfiddle.net/BDG/Dhdu7/2/

Inkognito
quelle
2
Oder verwenden Sie Curl / RequireJS, sie haben diese und weitere Funktionen. Und Sie müssen es nicht selbst warten;)
Raynos
Sie haben vergessen, eine klare Struktur und nicht relative Einschlüsse zu erwähnen.
Inkognito
2

Wenn Sie sich RequireJS ansehen und von CSS-Dateien abhängig sein möchten, können Sie das CSSP RequireJS-Plugin auschecken :

CSS mit Polsterung. Dieses Projekt implementiert ein Plugin für das RequireJS- Projekt, mit dem Module CSS-Dateien als Abhängigkeiten auflisten können. Auf diese Weise kann RequireJS warten, bis bekannt ist, dass bestimmte Stilregeln wirksam sind, bevor das auszuwertende JavaScript-Modul freigegeben wird. Dies ist nützlich, wenn Ihr JavaScript-Modul beispielsweise bestimmte CSS-Regeln, die in einer separaten Datei definiert sind, auf das DOM anwenden muss, bevor es initialisiert werden kann.

Pete O.
quelle