JavaScript laden #

Diese Seite ist für Designer, die einem Design Verhalten hinzufügen: einen Menüschalter, einen Slider, ein Cookie-Banner. Sie beantwortet: welcher Operator Skripte ausgibt, wie Sie sie verzögern, wie ein Template ein Skript nur bei Bedarf anfordert und wie Sie einem Skript Einstellungen ohne Inline-Code übergeben.

Inhalt #

1. Die Operatoren
2. Im Pagelayout
3. Verzögerte Skripte
4. Ein Skript für eine Art von Seite
5. Skriptlisten in design.ini
6. Einem Skript Einstellungen übergeben
7. Regeln

Die Operatoren #

Aus extension/ezjscore/autoloads/ezjscpackertemplatefunctions.php:

Dateien sind relativ zu javascript/ und werden über die Design-Kaskade gefunden. Die Standard-Packstufe ist 2 (zusammengeführt und Leerraum entfernt). Ein Name mit :: ist ein Generator, keine Datei: ezjsc::jquery gibt jQuery aus der lokalen Kopie aus, die in ezjscore.ini [eZJSCore] LocalScripts[] konfiguriert ist (jQuery 4.0.0 mit jQuery Migrate 4.0.2 in dieser Version).

Im Pagelayout #

Am Ende des Body, damit die Seite gezeichnet wird, bevor Skripte laufen:

    {ezscript_load( array( 'ezjsc::jquery', 'mytheme.js' ) )}
</body>

Skripte, die vor dem ersten Zeichnen laufen müssen (zum Beispiel ein Theme-Umschalter, der eine Klasse am <html> setzt), gehören als kleine eigene Dateien in den Kopf.

Verzögerte Skripte #

ezscript_load schreibt einfache <script src>-Tags. Für defer fragen Sie nach den URLs und schreiben das Tag selbst:

{foreach ezscriptfiles( array( 'gallery.js', 'consent.js' ), 2, true() ) as $script_url}
<script defer src="{$script_url}"></script>
{/foreach}

true() als dritter Parameter (ignore_loaded) hält dieses Bündel unabhängig von schon ausgegebenen Dateien. Das Design media macht genau das für seine nicht kritischen Skripte (pagelayout/head/script.tpl).

Ein Skript für eine Art von Seite #

{* override/templates/full/gallery.tpl *}
{ezscript_require( array( 'gallery.js' ) )}

Das ezscript_load des Pagelayouts gibt es aus. Seiten ohne Galerie laden es nie.

Skriptlisten in design.ini #

settings/design.ini [JavaScriptSettings]:

Ein admin4-Template, dessen Skript jQuery oder ein Exponential-UI-Modul braucht, fordert es selbst an, außerhalb jedes cache-block: {ezscript_require( array( 'ezjsc::jquery', 'myadmin.js' ) )} (siehe admin4 und admin4l ohne jQuery).

Wie bei Stylesheets zählt eine Liste nur, wenn Ihr Pagelayout sie liest:

{ezscript_load( array( 'mytheme.js', ezini( 'JavaScriptSettings', 'FrontendJavaScriptList', 'design.ini' ) ) )}

Einem Skript Einstellungen übergeben #

Geben Sie keine Werte in ein Inline-Skript aus. Verwenden Sie einen JSON-Datenblock, den der Browser nicht ausführt und eine Content Security Policy nicht blockiert, oder data-*-Attribute:

<script type="application/json" id="mytheme-config">{json_encode( hash(
    'searchUrl', '/content/search'|ezurl( 'no' ),
    'closeLabel', 'Close'|i18n( 'design/mytheme' ) ) )}</script>

// javascript/mytheme.js
const config = JSON.parse(document.getElementById('mytheme-config').textContent);

json_encode ist ein Operator von ezjscore. Das Design media übergibt so seine Texte zur Video-Einwilligung.

Regeln #

• Kein Inline-<script> mit Code und keine onclick=""-Attribute (Kein Inline-JavaScript).
• Kein ?v= an Skript-URLs; die Dateinamen des Packers ändern sich mit dem Inhalt.
• Ziehen Sie kleine, seitenspezifische Dateien mit ezscript_require einem großen Bündel auf jeder Seite vor.
• Testen Sie mit offener Konsole des Browsers: Ein Fehler stoppt ein ganzes gepacktes Bündel.

Verwandte Seiten #

• Stylesheets laden
• jQuery in Designs
• Der Packer
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.