Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Gekonnt mit JavaScript arbeiten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
  • Beschreiben der drei Aspekte, die Sie beim Schreiben von JavaScript für Ihre Aura-Komponenten beachten müssen
  • Auflisten der drei Browser, die gut mit Aura-Komponenten funktionieren, und Nennen eines Browsers, bei dem dies nicht der Fall ist. Erläutern, warum bei diesem Browser Probleme auftreten
  • Implementieren eines unterstützten Musters für das Einbeziehen von JavaScript-Bibliothekscode in Ihre Komponenten

Tipps und Einschränkungen

Wenn die beiden vorherigen Module in diesem Trail zu abstrakt oder zu langsam für Sie waren, sind Sie hier genau richtig. Wir sagen sogar voraus, dass viele erfahrene Visualforce-Entwickler dieses Modul glatt überspringen werden.

Das ist auch völlig in Ordnung! Die anderen Module sind wichtig, wenn Sie Experte für Aura-Komponenten werden möchten. Doch dieses Modul kann eigenständig genutzt werden und ist sehr leicht verständlich. Wir hoffen, dass es für Sie hilfreich ist und Sie regelmäßig hierhin zurückkehren.

Los geht's!

Bei JavaScript wird Groß-/Kleinschreibung beachtet

Rutsche! Nichts wird Ihnen mehr Kummer bereiten als dieser wesentliche Unterschied zwischen Visualforce und Apex. Wenn der API-Name Ihres Objekts Expense__c und der eines Felds Amount__c lauten und Sie versuchen, mit expense__c.amount__c darauf zu verweisen (was in Visualforce funktioniert), tritt in JavaScript ein Fehler auf.

Noch schlimmer ist, dass Sie mitunter noch nicht einmal eine hilfreiche Fehlermeldung erhalten. Sie können eine Menge Zeit damit verbringen, das eigentliche Problem gar nicht erst zu erkennen. Vertrauen Sie einem, der das erlebt hat.

In Apex und Visualforce können Sie mit den Namen oBjEkTen, FELDERN, mETHODenAUFRUFEN usw. Schindluder treiben. In JavaScript kommen Sie damit nicht durch. Die Schreibung ist immer und überall von Bedeutung. Wir wünschten, es wäre nicht so, doch wir sind dafür nicht verantwortlich.

Leiter! Wir empfehlen, stets und überall die exakte, ordnungsgemäße Schreibung zu verwenden, selbst in Code, der Schludrigkeit durchgehen lässt, wie z. B. Apex- oder SOQL-Code. Wenn Sie strenge Disziplin wahren, werden Schreibungsfehler nicht nachts in Ihren Träumen herumspuken.

Dies bedeutet auch, dass Sie die ordnungsgemäßen Namen von Systemfeldern wie "Id" und "Name" erlernen müssen. Leiter! Denken Sie daran, dass Sie die ordnungsgemäßen Namen der Felder eines Objekts stets in Setup nachschlagen können.

Lightning Locker und die Gesetze der Physik

Das Zulassen einer sicheren, unterstützten Ausführung von JavaScript in einer komplexen, gemeinsam genutzten Umgebung wie Salesforce (in der unser Code, Ihr Code und Code aus verwalteten Paketen allesamt im selben Kontext ausgeführt werden) ist eine große Herausforderung.

Wir haben einen innovativen Isolationsmechanismus namens Lightning Locker entwickelt. (Es handelt sich um eine bahnbrechende Lösung eines schwierigen Problems, weshalb neue Browserstandards bereits auf Aspekte dieser Lösung zurückgreifen.) Wir sind dabei, Lightning Locker für alle Kunden vollständig zu aktivieren. Zuvor erfolgte dies im Rahmen eines wichtigen Updates, doch in der Version "Summer ’17" steuern Sie die Aktivierung von Lightning Locker durch Festlegen Ihrer Komponente auf die API-Version 40.0 oder höher.

Wir raten Ihnen, alle Ihre Aura-Komponenten bei aktiviertem Lightning Locker zu entwickeln (wozu Sie Ihre Komponenten auf die API-Version 40.0 oder höher festlegen müssen). Lightning Locker ändert die "Gesetze der Physik" für Ihren JavaScript-Code. Wir haben festgestellt, dass es wesentlich einfacher ist, neuen Code mit der neuen "Physik" zu schreiben, als Code anzupassen, der in einem Paralleluniversum geschrieben wurde.

Was genau tut Lightning Locker? Es folgt eine allgemeine Liste seiner Auswirkungen.
  • Lightning Locker erzwingt den Strict Mode von JavaScript ES5.
  • Lightning Locker schränkt den Zugriff auf globale Verweise ein.
  • Lightning Locker stellt die DOM-Isolation von Komponenten sicher.
  • Lightning Locker blockiert den Zugriff auf private oder nicht unterstützte Lightning Component-Framework-Methoden.
  • Lightning Locker wird mit einer strengeren Inhaltsicherheitsrichtlinie kombiniert, um Cross-Site-Scripting-Angriffe zu verhindern. Dies wird über eine Einstellung der Organisation gesteuert.

Einigen dieser wichtigen Aspekte widmen wir uns in dieser Einheit. Weitere Informationen finden Sie im Abschnitt "Ressourcen".

JavaScript ES5 Strict Mode

Bei Aktivierung von Lightning Locker wird JavaScript ES5 Strict Mode für Ihren gesamten JavaScript-Code aktiviert. Die Auswirkung entspricht dem Starten Ihres gesamten JavaScript-Codes mit use strict. Wenn Sie mit Strict Mode nicht vertraut sind, können Sie das jetzt nachholen.

Rutsche! Das Allererste, was Sie ändern müssen, ist die Deklarierung Ihrer lokalen Variablen mit var. Hier ist ein Beispiel aus einer Aktionsmethode.

myAction : function(component, event, helper) {
    ...
    counter = 1;       // NO!!!!!
    var counter = 1;   // YES!
    counter++;
    ...
}

Leiter! "Strict" mag erst beängstigend klingen, ist aber eigentlich etwas Tolles. Stellen Sie sich Strict Mode als einen Lehrer vor, der Ihnen Angst gemacht hat, als Sie jung waren, sich aber im Nachhinein als sehr hilfreich erwiesen hat. Strict Mode erzwingt viele bewährte JavaScript-Vorgehensweisen. Dieser Modus fungiert als Leiter nach oben für Ihren gesamten JavaScript-Code.

Tipp

Tipp

Leiter! Wenn Sie von den Vorzügen von Disziplin überzeugt sind, können Sie ein Überprüfungstool wie ESLint einsetzen, das Ihnen noch mehr Anleitungen als Strict Mode bietet. ESLint kann Ihnen nicht nur bei der JavaScript-Syntax helfen, sondern Sie auf eine breite Palette bewährter Vorgehensweisen verweisen und sogar genutzt werden, um für Ihr Team spezifische Programmierungsstandards sicherzustellen. Ein gutes Tool wie ESLint ist definitiv eine Leiter nach oben.

Verwenden von JavaScript-Bibliotheken von Drittanbietern

Lightning Locker wendet Einschränkungen auf globale Verweise an. Sie bemerken die Einschränkung beim "window"-Objekt, Ihrem eigenen Code und bei Bibliothekscode von Drittanbietern. Lightning Locker bietet sichere Versionen nicht intrinsischer Objekte, wie z. B. "window". Dies hat zur Folge, dass Sie kleine Anpassungen dahingehend vornehmen müssen, wie Sie JavaScript-Bibliotheken Ihren Anwendungen hinzufügen.

Leiter! Um eine wiederverwendbare Bibliothek zu erstellen, mit der Ihre Komponenten einfach arbeiten können, weisen Sie die Bibliothek explizit dem "window"-Objekt zu. Durch diese Zuweisung wird die Bibliothek allen Ihren Komponenten zur Verfügung gestellt, die die Bibliothek nutzen. Wir können diese allgemeine Technik mithilfe einiger Codezeilen veranschaulichen. Um eine Bibliothek mit Funktionen zu erstellen, die in Ihrem Code verwendet werden sollen (beispielsweise [Util.logHere('Starting download']), deklarieren Sie in einer statischen Ressource die Bibliothek mithilfe von IIFE (Immediately Invoked Function Expression, sofort ausgeführter Funktionsausdruck).
window.Util = (function() {
    return {
        logHere: function(msg){
            console.log('Got here.');
            if(msg) console.log(msg);
        }
    }
})();

Diese vielleicht nicht vertraute Konstruktion fügt unsere "Bibliothek" an das "window"-Objekt an, wodurch es allen unseren Komponenten zur Verfügung steht. Sobald die statische Ressource vorhanden ist, verwenden Sie <ltng:require>, um die Bibliothek in Ihre Komponente einzubeziehen.

Weitere Informationen, auch zum Anpassen dieser Technik an komplexe oder Drittanbieterbibliotheken, finden Sie im Salesforce Developers Blog unter Modularizing Code in Lightning Components.

Inhaltssicherheitsrichtlinie – Unterschiede zu Visualforce

Der Visualforce-Container ist von allen anderen Salesforce-Anwendungscontainern isoliert, weshalb für ihn eine relativ lockere Inhaltssicherheitsrichtlinie (Content Security Policy, CSP) gelten kann. Ihr Visualforce-Code kann JavaScript, Grafiken und andere Elemente über einen beliebigen URL laden. Und mithilfe von eval() können Sie jede Zeichenfolge als JavaScript behandeln.

Aura-Komponenten werden nicht in einem isolierten Container ausgeführt, weshalb das Programmiermodell eine strengere Inhaltssicherheitsrichtlinie aufweist. Sie können Grafiken, Formatvorlagen und andere nicht ausführbare Elemente von nicht von Salesforce stammenden Websites laden, allerdings erst nach Erstellen einer vertrauenswürdigen Site gemäß CSP für jede Domäne. Rutsche! Sie können JavaScript-Code aus allen Quellen außer einer statischen Ressource in Salesforce laden.

Durch ein Paar wichtiger Updates wird die unter Lightning Locker geltende Inhaltssicherheitsrichtlinie weiter verschärft. Diese Inhaltssicherheitsrichtlinie lässt die Schlüsselwörter unsafe-inline und unsafe-eval für Inline-Skripts (script-src) nicht zu. Diese Einschränkung gilt zusätzlich zu den allgemeinen Einschränkungen der Inhaltssicherheitsrichtlinie für Aura-Komponenten. Sie können weder Inline-JavaScript verwenden noch mit eval() eine Zeichenfolge als JavaScript auswerten. Demzufolge müssen Sie Ihren JavaScript-Code von Drittanbietern auf moderne Versionen aktualisieren, die nicht von diesen älteren, weniger sicheren Techniken abhängen.

Hinweis

Hinweis

Nicht alle Browser unterstützen die Inhaltssicherheitsrichtlinie. Insbesondere IE11 ist…problematisch. In Browsern, die die Inhaltssicherheitsrichtlinie nicht unterstützen, wie z.B. IE11, ist Lightning Locker deaktiviert. Aus Sicherheitsgründen empfehlen wird Ihnen dringend ein Update auf einen modernen Browser, z. B. auf die neuesten Versionen von Chrome, Safari, Firefox oder Microsoft Edge.

Es gibt Anwendungsfälle, bei denen die vorherigen Einschränkungen ein Hindernis darstellen. Leiter! In diesem Fällen empfehlen wir, dass Sie Code, der Zugriff auf externe Ressourcen benötigt, mithilfe von Visualforce in einem "worker iframe" ablegen. Dies sieht in etwa wie folgt aus:
<aura:component ...>
    <aura:attribute name="message" type="String"/>
    <aura:attribute name="vfHost" type="String"/>

    <!-- Input field for message "data" -->
    <lightning:input type="text" label="Message:"
        value="{!v.message}"/>

    <lightning:button label="Send to Visualforce"
        onclick="{!c.sendToVF}"/>

    <!-- The Visualforce page to send data to -->
    <iframe aura:id="vfFrame"
     src="{!'https://' + v.vfHost + '/apex/myvfpage'}"/>

</aura:component>

Die Visualforce-Seite führt die Aufgaben aus, die in Aura-Komponenten nicht zulässig sind. Sie können Nachrichten (Anforderungen und Antworten) zwischen dem "iframe" von Visualforce und Ihrer Aura-Komponente mithilfe der window.postMessage()-API in JavaScript-Code übergeben, den Sie Ihrer Visualforce-Seite und dem Steuerfeld Ihrer Komponente hinzufügen.

Weitere Informationen sowie ein vollständigeres Codebeispiel finden Sie im Salesforce Developers Blog unter Communicating Between Lightning Components and Visualforce Pages.