imported>PerfektesChaos: k

2026-04-13T12:20:40Z

Neue Seite

{{../../../!header
|Text=ResourceLoader}}
Der '''ResourceLoader''' (RL) ist ein Bestandteil von [[MediaWiki]], über den sich dynamisch [[JavaScript|JS]]- und [[Cascading Style Sheets|CSS]]-Definitionen in das [[Hypertext Markup Language|HTML]]-Dokument einer Wiki-Seite einbinden lassen.

Die Funktionalität stand mit der Version MW 1.17 im Februar 2011 zur Verfügung und wird weiter ausgebaut.

Ausschlaggebend für die Entwicklung waren folgende Gesichtspunkte:
* Die Anzahl der verfügbaren unabhängigen Skriptpakete lag 2015 über 200 – künftig ist noch mit weiterer Zunahme zu rechnen. Das ist irgendwann nicht mehr ohne Hilfsmittel zu überschauen und zu pflegen.
* Nicht alle Funktionen werden immer, von jedem Benutzer, für jeden Seiteninhalt, für jede individuelle Konfiguration benötigt. Es ist nicht mehr möglich, wie früher einfach immer zu jeder Seite alle Skripte mitzuliefern.
* Die Ressourcen erwiesen sich oft als veraltet bei den Lesern und in deren Browser. Der [[Browser-Cache]] und vor allem die [[Proxy-Server]] setzen die mitgelieferten [[Browser-Cache#HTTP-Caching|Angaben zum Cache-Management]] nicht richtig um. Nunmehr wird die Aktualität dadurch sichergestellt, dass eine neue [[Uniform Resource Locator|URL]] generiert wird, wenn sich etwas am Inhalt ändert. Dadurch muss zwangsweise eine neue Version beim Server abgerufen werden.
* Ab Frühjahr/Mitte 2011 begann zunächst [[Google Chrome]], danach [[Mozilla Firefox|Firefox]] mit dem „asynchronen Laden“ von Ressourcen. Damit funktionieren alte Skripte nicht mehr, die davon ausgehen, dass ein Skript nach dem anderen in einer festen und bekannten Reihenfolge ausgeführt wird.

== Anwendungsbereich ==

=== Zentrale MediaWiki-Software ===
Alle {{Anker|Grundausstattung}} Standardsoftware von MediaWiki wird inzwischen mit Methoden des RL eingebunden: {{Phab|dir=resources|title=/resources/*}}

=== {{Anker|site}} Projektweite Standardressourcen ===
Dies sind:
* [[MediaWiki:Common.js]] und die zur aktuellen Skin gehörende Seite, etwa [[MediaWiki:Vector.js]]
* Analog [[MediaWiki:Common.css]] und die zur aktuellen Skin gehörende Seite, etwa [[MediaWiki:Vector.css]]
Modulname: <code>site</code>

=== {{Anker|gadget}} Projektweite Helferlein ===
Die [[Spezial:Helferlein|Helferlein]] können auch mittels RL geladen werden, dafür wird auf [[MediaWiki:Gadgets-definition]] dies mit eventuellen Abhängigkeiten angegeben; damit werden auch für jede [[#Browser-Cache|Version spezifische URL]] generiert und es wird [[#Debug|komprimiert]].
* Siehe dazu auch: [[mw:Extension:Gadgets]]
* Zukünftig soll es irgendwann mal vielleicht die Möglichkeit geben, weltweit verfügbare Module an einer zentralen Stelle vollständig vorzuhalten ([[mw:RL2|Version 2]]).

=== {{Anker|user}} Standardressourcen des momentanen Benutzers ===
Dies sind die [[../../Einstellungen|Einstellungen]]:
* [[Special:Mypage/common.js|common.js]] und die zur aktuellen Skin gehörende Seite, etwa [[Special:Mypage/vector.js|vector.js]]
* Analog [[Special:Mypage/common.css|common.css]] und die zur aktuellen Skin gehörende Seite, etwa [[Special:Mypage/vector.css|vector.css]]
Modulname: <code>user</code> (auch bei nicht angemeldeten Benutzern „geladen“, aber leer)

Damit gleichzeitig schon geladen sind (bei angemeldeten Benutzern) [[../../Einstellungen#global|globale Einstellungen]], falls vorhanden; Modulname: <code>ext.globalCssJs.user</code>

=== Benutzerskripte ===
Auf eigenständige Ressourcen der Benutzer ist der ResourceLoader 2012 nicht besonders zugeschnitten; er lässt sich aber trotzdem einsetzen: [[../../JS#ResourceLoader|Anwendungsbeispiel]].

=== PHP auf dem Server ===
Diese Seite beschreibt schwerpunktmäßig den ResourceLoader auf der Browser-Seite in JavaScript; als Gegenstück gibt es einen analogen in [[PHP]] geschriebenen ResourceLoader auf den Servern, namentlich unter <code>/w/load.php</code> (oder früher auf bits.wikimedia.org) zur Zusammenstellung.
* {{Phab|file=resources/Resources.php}} – Zusammenstellung der Module (möglicherweise bereits zukünftige Version)
* {{Phab|file=load.php}} – ResourceLoader

== Das Modul ==
Ein Modul ist die Zusammenfassung folgender Komponenten, die einen inhaltlichen Bezug haben sollten:
# Modul-Name (unentbehrlich)
# JavaScript (praktisch immer)
# CSS (optional)
# [[Special:Prefixindex/MediaWiki:|Systemnachrichten]] (optional)
Die Quellen können von einer oder mehreren statischen Seiten stammen oder spontan generiert worden sein.

Mit Vollzugsmeldung für einen Modul-Namen bestätigt die Software, dass eine bestimmte Funktionalität (JS-Funktionen, CSS-Deklarationen) einsatzbereit ist. Es wird keine Aussage darüber getroffen, woher diese Funktionalität stammt und welche von mehreren Varianten vorliegt.

=== Name ===
* Jedes Modul wird durch einen Modul-Namen (eigentlich: -Identifikator, -Bezeichner) angesprochen.
* Grundsätzlich ist es egal, wie dieser Name lautet; es könnte auch „Rumpelstilzchen“ heißen, solange es nicht zu Namenskonflikten kommt.
* Es haben sich aber einige Regeln herausgebildet:
** Es werden ASCII-Zeichen (ohne Leerzeichen) verwendet.
** Überwiegend werden Kleinbuchstaben benutzt.
** Gliederung durch Punkte.
* Für individuelle Benutzer hat sich noch kein Schema herauskristallisiert. Das Präfix <code>user.</code> wird bereits verwendet für <code>user.groups</code>, <code>user.options</code> und <code>user.tokens</code> – sollte für weltweite Systemdefinitionen reserviert bleiben.

Gebräuchliche Namen sind beispielsweise:
: <code>mediawiki.util</code>
:: Ein Modul mit verschiedenen [[../mw#.util|Hilfsfunktionen]] ({{Phab|file=resources/src/mediawiki/mediawiki.util.js|title=Quelle}})
: <code>jquery.colorUtil</code>
:: Ein Modul mit Hilfsfunktionen zu Farben ({{Phab|file=resources/src/jquery/jquery.colorUtil.js|title=Quelle}})
: <code>site</code>
:: Projektweite [[#site|Standardressourcen]] (für das momentane Projekt)
: <code>user</code>
:: [[#user|Standardressourcen]] des momentanen Benutzers
: <code>user.groups</code>
:: Ressourcen, die spezifisch für Benutzergruppen sind
::* [[MediaWiki:Group-editor.css]]
::** <syntaxhighlight lang="css" inline>span.editoronly { display:inline !important }</syntaxhighlight>
::** <syntaxhighlight lang="css" inline>div.editoronly { display:block !important }</syntaxhighlight>
::* [[MediaWiki:Group-sysop.css]]
: <code>user.defaults</code>
:: [[../Variablen#Benutzerkonfiguration|Konfiguration]] für alle Benutzer, einschließlich der nicht angemeldeten
: <code>user.options</code>
:: Spezifische [[../Variablen#Benutzerkonfiguration|Konfiguration]] des momentan angemeldeten Benutzers; überschreibt ggf. Komponenten von <code>user.defaults</code>
: <code>ext.gadget.Zeitzonenkonverter</code>
:: [[../../Gadgets|Projektweites Helferlein]]; hier: [[MediaWiki:Gadget-Zeitzonenkonverter]]
: <code>ext.irgendein-name</code>
:: Erweiterungen; Extensions auf dem Server oder in JavaScript.
: <code>ext.gadget.irgendein-helferlein</code>
:: Erweiterung oder Gadget in JavaScript.

Siehe auch: [[mw:ResourceLoader/Default modules|mw: Default modules]] (englisch)

=== Speicherort ===
Aus dem Modulnamen lässt sich durch Menschen erraten, auf welcher Seite eine Quelle gespeichert sein könnte; aber dies lässt sich nicht durchgängig automatisch generieren. Es besteht der gleiche feine Unterschied wie zwischen [[Uniform Resource Locator|URL]] und [[Uniform Resource Name|URN]].
* Das Modul kann on-the-fly generiert worden sein; dann gibt es keine Seite.
* Das gleiche Modul kann in verschiedenen Projekten gespeichert sein; es kann in unterschiedlichen Entwicklungsständen verfügbar sein.
* Von welcher URL das Modul geladen wurde, spielt letztlich keine Rolle. Entscheidend ist, dass die zugesicherte Funktionalität unterstützt wird.

== Pakete ==
Die Skriptquellen und CSS-Stile werden nicht einzeln vom Server abgerufen, sondern gebündelt. Dies beschleunigt den Ablauf und senkt den Ressourcenverbrauch; siehe „[[Skalierbarkeit#DNS-Webpackaging|Webpackaging]]“.

Es werden in den folgenden Situationen Pakete von Modulen gebildet:
# Wenn die welt- und projektweite [[#Grundausstattung|Grundausstattung]] einer Seite bereitgestellt wird („Startup“) – spezifisch für jede Skin.
# Wenn die [[../../Gadgets|Gadgets]] anhand der Benutzerkonfiguration ausgeliefert werden.
# Wenn eine [[#.loader.using()|.loader.using()]]-Anforderung abgearbeitet wurde und dabei fehlende Module festgestellt wurden.
Es werden auf einen Schlag einerseits alle Skripte, andererseits alle angeforderten CSS-Definitionen geladen. Jede URL erhält eine [[#Browser-Cache|Versionsidentifikation]] (Zeitstempel).

Im Standardmodus (<code>[[#Debug|debug=false]]</code>) werden dabei außerdem:
* alle Skripte bzw. Stile hintereinander kopiert und unter jeweils einer einzigen URL bereitgestellt.
** Die URL erhält einen Zeitstempel gemäß der jüngsten (numerisch größten) Komponente.
* Die Ressource wird minimiert.
** Das gepackte Ergebnis wird in einem Cache zur Wiederverwendung eingelagert.
** Weil gerade im allgemeinen Bereich der Seite immer dieselben Kombinationen von Ressourcen auftreten, kann der Server (und auch Proxy-Server) diese fertigen Pakete für alle Benutzer vorhalten.
* Weil nur eine URL abgefragt wird, ist der Verkehr zwischen Benutzern und Server geringer.

== {{Anker|Debug}} Debug-Modus und Komprimierung ==
Jede Ressource lässt sich in zwei Varianten vom Server laden:
# <code>debug=false</code>   (Standardvorgabe)
#* Für alle gleichzeitig benötigten Skripte oder CSS-Definitionen wird eine einzige URL gebildet und darunter auch hintereinander weg geschrieben als eine kompakte Ressource vom Server geliefert.
#* Der Code jedes einzelnen Skriptes und CSS wird komprimiert:
#** Alle Kommentare werden gelöscht.
#** Alle entbehrlichen [[Leerraum|Whitespace-Zeichen]] werden entfernt.
#** Es wird eine Zeilenlänge von etwa 1000 Zeichen durch Verkettung einzelner Statements hergestellt; die (korrekte) Syntax von JavaScript und CSS erlaubt das.
#* Bei erkannten groben Syntaxfehlern in den Quellen wird die Ressource nicht ausgeliefert, statt dessen eine Fehlermeldung gesendet.
#* Die Komprimierung ist allerdings nicht ganz unproblematisch; bei syntaktisch falscher Programmierung kann es zu falschen Konstruktionen kommen, und es werden Syntaxkonstrukte nicht erkannt, die aber auch nicht von jedem Browser richtig interpretiert werden.
#* In den Zeilen von 1000 Zeichen Länge ist bei auftretenden Folgefehlern keine unmittelbare Analyse möglich.
# <code>debug=true</code>
#* Es erfolgt keine Komprimierung.
#* Jede Ressource wird einzeln geliefert, so wie sie auch im Quellprogramm definiert ist. Damit sind Zeilennummern identisch.
#* Standardmäßig wird ein Hilfsmittel geladen, das die Auswertung in der [[../../JS#Fehlermeldungen|Fehlerkonsole]] unterstützen soll.

== Browser-Cache ==
An die mittels <code>load.php</code> gebildete URL wird die jeweils jüngste Änderungszeit auf dem Server mit einer Genauigkeit von zehn Sekunden angefügt. Damit hat jedes Paket eine eindeutige URL, die sich von veralteten Versionen im [[Browser-Cache]] unterscheidet. Somit bleibt Browsern und Proxy-Servern nichts anderes übrig, als die aktuelle Version herunterzuladen.

Für die Standardressourcen des Projekts und Benutzers sowie Gadgets wird vom Server dieser Zeitschlüssel an die URL angefügt.

Betreffend der weltweit einheitlichen zentralen MediaWiki-Software wird ein Verzeichnis aller erhältlichen Module mit den jeweiligen Zeitschlüsseln in jede HTML-Seite eingeschrieben. Diese Liste hat selbst aber zurzeit (MW 1.18/1.20) keinen Versionscode; eine Veränderung eines Zeitschlüssels eines Moduls hätte somit keine neue URL zur Folge. Allerdings gelten die Module der zentralen Software als stabil und werden normalerweise zur Laufzeit einer Version nicht verändert.

== mw.loader ==
Im [[../mw|mw-Objekt]] steht der ResourceLoader als Komponente <code>.loader</code> zur Verfügung.
* [[mw:ResourceLoader/Default modules#mediaWiki.loader|mw:mediaWiki.loader]] – Beschreibung (englisch)
* {{Phab|file=resources/src/startup/mediawiki.js}} – Quellcode
* [https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.loader Kurzdokumentation]

; mw.loader.addSource(modules, props) {{Anker|.loader.addSource()}}
: Registrierung einer URL (für load.php gedacht) zu einem Quellcode. 
; mw.loader.getModuleNames() {{Anker|.loader.getModuleNames()}}
: Array mit allen bekannten Modulnamen. 
; mw.loader.getState(module) {{Anker|.loader.getState()}}
: Status einer Ressource abfragen.
:* <code>module</code>: String mit Modulname.
: Rückgabewert ist eine Zeichenkette, wenn das Modul bislang irgendwie bekannt geworden war.
:* "<code>registered</code>" – Modulname ist bekannt – definiert in [[#.loader.register()|.loader.register()]].
:* "<code>loading</code>" – Modul wird zurzeit geladen.
:* "<code>loaded</code>" – Dieses Modul wurde erfolgreich einzeln geladen.
:* "<code>ready</code>" – Dieses Modul und alle seine Abhängigkeiten wurden geladen.
:* "<code>error</code>" – Dieses Modul hat möglicherweise einen Syntaxfehler.
:* "<code>missing</code>" – Zugriff auf die URL dieses Moduls gescheitert.
:* <code>null</code> – Modulname ist nicht bekannt.
: Wenn eine Wiki-Seite geladen wurde, sind die Registrierungsinformationen aller nutzbaren Module (einschließlich Versionsinfo) definiert; zunächst als <code>registered</code>, ggf. auch schon als <code>ready</code>.
; mw.loader.getVersion(module) {{Anker|.loader.getVersion()}}
: Versionsinformation einer Ressource abfragen – definiert in .loader.register().
:* <code>module</code>: String mit Modulname.
: Rückgabewert ist eine Zeichenkette, wenn das Modul bekannt ist.
:* String – ISO8601 ''YYYYMMDD''T''hhmmss''Z, oder "<code>19700101T000000Z</code>" wenn nicht vereinbart.
:* <code>null</code> – Modulname ist nicht bekannt
; <s>mw.loader.implement(module, script, style, msgs, templates) {{Anker|.loader.implement()}}</s>
: Deklaration eines neuen Modulnamens, Verbindung mit der zugehörigen Implementierung und Laden.
: Alle Parameter bis auf den Modulnamen sind optional; gleichwohl muss sinnvollerweise mindestens einer die Implementierung enthalten.
:* <code>module</code>: String mit Modulname. Darf noch nicht mit <code>implement()</code> vereinbart gewesen sein.
:* <code>script</code>: Auszuführende Funktion (Code) oder Array von URL mit JS-Code
:* <code>style</code>: Objekt; entweder aus direkten CSS-Deklarationen oder Liste der URL von CSS-Deklarationen – nicht <code>null</code>.
:* <code>msgs</code>: Objekt; benötigte Systemnachrichten, die den [[../mw#.messages|.messages]] hinzuzufügen sind, als key:value – nicht <code>null</code>.
: ''Wirkung:'' Die Funktion wird ausgeführt oder die Skript-Quellen werden von den angegebenen URL abgerufen, indem <script src=> in das Dokument eingefügt wird. War das Laden erfolgreich, wird der Status <code>loaded</code> gesetzt; <code>missing</code> oder <code>error</code> wenn ein Fehler detektiert wurde. Über die Registrierung hinaus erfolgt zurzeit auch immer das tatsächliche Laden. Im Erfolgsfall wird nach aufgelaufenen unbefriedigten Abhängigkeiten gesucht; sind keine mehr vorhanden, wird <code>ready</code> für das Modul ausgewiesen. Schließlich werden eventuelle Funktionen aus der .loader.using()-Warteschlange ausgeführt.
; <s>mw.loader.inspect(reports)</s> {{Anker|.loader.inspect()}}
: Analysierte die bekannten und geladenen Module zu Testzwecken.
: Gab auf Debugging-Konsolen (Firebug, zurzeit nicht aber Dragonfly) eine Liste der geladenen Modul-IDs aus; dazu die Code-Größe statischer Module und Angaben zum CSS. Die Tabelle war ggf. sortierbar, falls <code>console.table()</code> unterstützt wird.
: Nicht mehr verfügbar; siehe jedoch: [[../mw#.inspect|mw.inspect]]
; mw.loader.load() {{Anker|.loader.load()}}
:* '''.loader.load(URL, MIME, async)'''
:*: Siehe [[../../JS#loader.load()|Laden anderer Skripte]] für JavaScript und CSS, etwa Benutzerskripte.
:*:* <code>URL</code>: ''string''; nur <code>//</code> oder <code>http://</code> oder <code>https://</code>
:*:* <code>MIME</code>: ''string''; Vorgabe <code>application/javascript</code> – sonst nur <code>text/css</code> (momentan ist noch <code>text/javascript</code> Vorgabe)
:*:* <code>async</code>: ''boolean'' 
:*:** <code>true</code> (Vorgabe) – URL asynchron laden, auch wenn ''document.ready'' noch nicht eingetreten war.
:*:** <code>false</code> – abwarten, bis ''document.ready'' und dann erst mit dem Laden beginnen.
:* '''.loader.load( modules )'''
:*: Laden eines Moduls (oder mehrerer Module) einschließlich aller weiteren Module, von denen diese abhängen.
:*:* <code>modules</code>: String mit Modulname, oder Array mit Modulnamen.
:*: War das Modul bereits geladen gewesen, sollte nichts weiter passieren.
:*: Soll anschließend eine Funktion ausgeführt werden, wäre [[#.loader.using()|.loader.using()]] zu verwenden. Wenn das Skript selbst eine Art AutoRun-Funktion enthält, kann .loader.load() benutzt werden.
; mw.loader.register( module, version, dependencies, group, source ) {{Anker|.loader.register()}}
: Registrierung eines Moduls zum Abruf über <code>load.php</code> <s>(von //bits.wikimedia.org)</s>
: Für Benutzerskripte nicht nutzbar.
:* <code>module</code>: String mit Modulnamen, oder Array.
:* <code>version</code>: Versionsnummer; erlaubt Unterscheidung im Browser-Cache.<br /> Erwartet wird die Anzahl der Sekunden seit dem 1. Januar 1970, 00:00:00.<br />Es handelt sich nur um den Zeitpunkt, zu dem die Ressource im Dateisystem ankam – nicht um eine inhaltliche Versionsnummer im Sinne einer Weiterentwicklung. Eine jüngere Version kann einen älteren Inhalt beschreiben, beispielsweise nach einem Revert.
:* <code>dependencies</code>: Abhängigkeiten; Array→String oder einzelner String oder Function→Array.
:* <code>group</code>: Übergeordneter Modulname, wenn <code>module</code> ein Untermodul ist.
:* <code>source</code>: aktuelles Wikiprojekt (wgLoadScript; Vorgabe), oder anderes Wiki; Pfad vor <code>load.php</code>
: Erster Parameter Pflicht, Rest optional.
; mw.loader.require( module ) {{Anker|.loader.require()}}
: Status einer Ressource sichern: Wenn noch nicht bereit, dann Fehler auslösen.
: Ermöglicht das Aufspüren vergessener Abhängigkeiten aus tieferen Schichten.
:* <code>module</code>: String mit Modulname
: Gleichgesetzt mit <code>window.require()</code> – nur in dieser Form soll es in produktivem Code verwendet werden.
: Bei über [[#.loader.using()|.using()]] angeforderten Modulen wird die Funktionsdefinition zurückgegeben.
; mw.loader.state(modules) {{Anker|.loader.state()}}
: Setze den Status von Ressourcen.
: Dabei ist ''modules'' ein <code>object</code> mit Zuweisungen ID→state.
: Siehe [[#.loader.getState()|.loader.getState()]]
; mw.loader.store {{Anker|.loader.store}}
: Abspeicherung im persistenten [[WebStorage]] verwalten (Objekt).
:* '''.loader.store.clear()'''
:*: Lösche im Browser hinterlegten MediaWiki-Code.
:* '''.loader.store.enabled''' = false;
:*: Verhindere Abspeicherung im <code>localStorage</code> des Browsers.
; mw.loader.using( dependencies, ready, error ) {{Anker|.loader.using()}}
: Starte eine Funktion, nachdem ein Modul geladen wurde, oder wenn dies fehlschlug; lade fehlende weitere Module nach.
: Rückgabewert ist ein Objekt vom Typ <code>[http://api.jquery.com/jQuery.Deferred/ jQuery.Promise]</code>, auf das weitere [[Wikipedia:Technik/Skin/JS/API#Callback|Callback-Vereinbarungen]] angewendet werden können. Die reguläre ''done''-Funktion ist bereits der zweite Parameter.
:* <code>dependencies</code>: String oder Array – Name/n der Module, die vor der Ausführung von <code>ready</code> geladen sein müssen. Schließt automatisch diejenigen Module ein, von denen sie intern abhängen.
:* <code>ready</code>: Funktion, die ausgeführt wird, nachdem alle Module geladen worden sind.
:* <code>error</code>: (optional) Funktion, die ausgeführt wird, falls das zusätzliche Laden fehlschlug.
: [[../../JS#Module auf dem Server|Anwendungsbeispiel]]

Die restlichen Funktionen sind zurzeit für lokale Projekte und Benutzer kaum einsetzbar oder nicht empfehlenswert: addStyleTag(), resolveIndexedDependencies(), work().

Es gibt für den Fehlerfall auch ein Event <code style="white-space:nowrap">resourceloader_exception(e, [module], source)</code>.

== Benutzer-Skript ==
Um ein bibliotheksartiges Benutzer-Skript (übergangsweise) für bedarfsweises Laden durch den ResourceLoader auszustatten, ist wie folgt vorzugehen:
# Eindeutigen und langfristig haltbaren [[#Name|Modul-Namen]] vergeben.
# Am Ende des Skriptes mit [[#.loader.state()|<code>.loader.state(</code>''name''<code>, "ready")</code>]] das abgeschlossene Laden deklarieren. Falls das Skript zuvor auf eine andere Weise geladen würde, wird ein unnötiger und möglicherweise zu Fehlfunktionen führender mehrfacher Abruf vermieden.
# Auf sorgfältige und syntaktisch einwandfreie Programmierung achten.
# Den Anwendern den Modul-Namen bekanntgeben sowie mögliche URL mit den Quellen.
# Für den weiteren Einsatz siehe [[../../JS#ResourceLoader|Anwendungsbeispiel]].
# [[#Debug|Komprimierung]] und [[#Browser-Cache|Versionsaktualisierung]] erfolgen dabei jedoch nicht.

== Gadgets ==
Bei einem [{{fullurl:Special:Prefixindex|namespace=8&prefix=Gadget-}} MediaWiki:Gadget-''Name''.js] sind Besonderheiten betreffend Ladereihenfolge und Ausführung zu beachten.

Bisher war es so, dass ''zuerst'' die [[Wikipedia:Helferlein|Helferlein]] (Gadgets) geladen und ausgeführt wurden, danach die [[#user|Standardressourcen des Benutzers]].

Das änderte sich 2011/2012:
# Schnelle Browser mit asynchronem Laden von Ressourcen halten sich nicht mehr unbedingt an eine Reihenfolge im Ablauf.
# Der ResourceLoader stellt alle vom Benutzer angeforderten (und bereits als dazu geeignet markierten) Gadgets zu einem [[#Pakete|Paket]] zusammen.
#* Dieses wird standardmäßig ''nach'' dem Benutzerskript-Paket <code>user</code> geladen. Darauf kann man sich jedoch auch nicht verlassen; ein Browser könnte beide Pakete gleichzeitig abfordern und es kann von Netzwerkbedingungen abhängen, welches zuerst bereit ist.
Man darf bei Neuprogrammierungen oder grundlegenden Überarbeitungen grundsätzlich keine Reihenfolgen mehr unterstellen, sondern muss explizit eine erforderliche Synchronisation durch Deklaration von Abhängigkeiten herstellen.

=== Definition und Abhängigkeiten ===
Beim Speichern im Namensraum für Gadgets müssen in jedem Fall die benötigten ''dependencies'' in einem Kommentar am Beginn des Skriptes angegeben werden, damit sie richtig in [[MediaWiki:Gadgets-definition]] eingepflegt werden können.

Es würde auch nicht viel schaden, die Funktion in eine [[#.loader.using()|.using]]-Klausel einzubetten, wenn zu erwarten ist, dass das Skript auch öfters außerhalb der automatischen Helferlein geladen werden soll. Das wäre bei aufwändigen Skripten etwa mit API-Abfragen anzunehmen.

Die auf [[MediaWiki:Gadgets-definition]] dafür vereinbarten Skripte können allerdings spontan über [[#.loader.load()|<code>.loader.load("ext.gadget.</code>''name''<code>").</code>]] statt [[../../JS#Laden anderer Skripte|.loader.load(URL)]] bedarfsweise geladen werden: Im ersten Fall versorgen sie sich dann selbsttätig mit ihren aktuell benötigten dependencies, und wenn sie bereits geladen waren, passiert nichts Überflüssiges oder Selbstzerstörendes – und die aktuellste Version wird abgerufen. Genauso mit .loader.using().

Mit .loader.load(URL) kann es hingegen zum Überschreiben von Initialisierungs- und Konfigurationsdaten kommen, wenn das Skript auf anderem Weg bereits geladen war; auch werden die dependencies ggf. nicht befriedigt und es kann eine veraltete Version im Browser-Cache liegen.

=== Benutzerkonfiguration ===
Im Benutzerskript kann nicht mehr stehen:
<syntaxhighlight lang="javascript" style="border: none; padding: 0; margin-left: 2em;">
if (window.thisGadget) {
window.thisGadget.thatOption = true;
}
</syntaxhighlight>
Dies muss künftig bei den Anwendern geschrieben werden als:
<syntaxhighlight lang="javascript" style="border: none; padding: 0; margin-left: 2em;">
if (! mw.libs.thisGadget) {
mw.libs.thisGadget = { };
}
mw.libs.thisGadget.thatOption = true;
</syntaxhighlight>
Auf der Seite [[MediaWiki:Gadgets-definition]] muss es bei konfigurierbaren Skripten heißen:
<syntaxhighlight lang="text" style="border: none; padding: 0; margin-left: 2em;">
thisGadget[ResourceLoader|dependencies=user]|thisGadget.js
</syntaxhighlight>
Im Gadget muss eingangs geprüft werden, ob vom Anwender das [[../Datenelemente#Anwendungsobjekt|Anwendungsobjekt]] schon definiert wurde:
<syntaxhighlight lang="javascript" style="border: none; padding: 0; margin-left: 2em;">
if (! mw.libs.thisGadget) {
mw.libs.thisGadget = { };
}
mw.libs.thisGadget.init = function () { .................
</syntaxhighlight>
Grundsätzlich sollte kein Anwendungsobjekt einfach überschrieben und ungeprüft definiert werden; es könnte im Lauf vorangegangener Prozeduren bereits mit Inhalten und Funktionalität gefüllt worden sein.

In einem mittels <code>mw.loader.load()</code> geladenen Skript hat man im Unterschied zum Gadget die Kontrolle über die Ladereihenfolge. Wenn Benutzer ein Skript selbst laden, können sie vorher die Optionen setzen.

=== Status ===
Wenn Benutzer über die Gadget-Option das Helferlein automatisch geladen haben, wird auch der Gadget-Status auf <code>ready</code> gesetzt.

Da es aber ein normales Skript ist, könnte die Seite auch später dynamisch mit .loader.load() geladen werden. Um für diesen Fall den korrekten Status zu verdeutlichen und Interaktion mit anderen Skripten sicherzustellen, sollte zusätzlich am Ende vereinbart werden:
<syntaxhighlight lang="javascript" style="border: none; padding: 0; margin-left: 2em;">
mw.loader.state( { "ext.gadget.meinHelferlein": "ready" } );
</syntaxhighlight>

== Weitere Informationen ==
(alle englisch)
{{MediaWiki|ResourceLoader|suffix=Projektseite}}
* [[mw:ResourceLoader/Developing with ResourceLoader|Developing]]
* [[mw:ResourceLoader/Migration guide (users)|Migration guide (users)]]
* [[mw:ResourceLoader/Version 2 Design Specification|Version 2 Design Specification]]
* [https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.loader Dokumentation] der Bibliotheksfunktionen
* Phabricator-Diffusion mit allen {{Phab|dir=resources/src|title=Quellcodes}}

[[Kategorie:Wikipedia:Technik/Skin|ResourceLoader]]

Wikipedia:Technik/Skin/JS/ResourceLoader - Versionsgeschichte

imported>PerfektesChaos: k