Verwendung von JavaScript-Modulen für Beacon-Plugins

Einleitung

OTT Plugins werden mit JavaScript und CSS implementiert. Wann immer Sie Code verwenden, sollten Sie die Organisation des Codes berücksichtigen. In der Lernhilfe: OTT-Plugins Dokument werden die von Ihnen erlernten Plugins implementiert, indem Sie eine JavaScript-Datei in Ihre Beacon-Web-App laden. Diese einzige Datei mit dem Namen index.js könnte den gesamten JavaScript-Code Ihres OTT-Plugins enthalten, aber das würde zu schlechten Codierungspraktiken führen. Außerdem gibt es eine Vielzahl anderer JavaScript-Frameworks, aus denen Sie wählen können. Um einen Ausgleich zwischen schlechten Praktiken und Komplexität zu schaffen, verwenden die Dokumente zu OTT-Plugins JavaScript-Module für die Codeorganisation.

Grundsätzlich fungiert die index.js als "Controller" und die eigentlichen Implementierungsdetails für jedes Plugin-Element befinden sich in einer JavaScript-Moduldatei. So wie ein "Verkehrspolizist" vorgibt, wohin die Autos fahren sollen, so gibt der Controller die Anweisungen für die Programmausführung. Im Falle von JavaScript-Modulen besteht der "Verkehrspolizist" im Wesentlichen darin, Module zu importieren und festzulegen, welche Module wann aufgerufen werden und welche Daten an die Module übergeben werden sollen. Die Idee eines Controllers ist in der Programmierpraxis sehr verbreitet, und natürlich können Sie Ihr bevorzugtes JavaScript-Framework wählen.

Code-Beispiele können vom ott-plugins-example-code GitHub Repository heruntergeladen werden.

Die Module

Es gilt als gute Kodierungspraxis:

• Kein doppelter Code
• Machen Sie Ihren Code so wiederverwendbar wie möglich

Die Verwendung von Modulen hilft bei der Erfüllung dieser beiden Aufgaben. Werfen wir zunächst einen Blick auf die grundlegende Syntax des Aufbaus von Modulen in den Beispielen, die in diesen Dokumenten gezeigt werden:

const function1 = () => { 
  code;
  code;
  code;
  code;
};
  
const function2 = () => {
  code;
  code;
  code;
  code;
};

const function3 = () => {
  code;
  code;
  code;
  code;
};
  
export { function1, function2, functions3 };

Sie sehen drei Funktionen, die als Konstanten in Pfeilschreibweise definiert sind. Diese Funktionen erfüllen Aufgaben wie:

• Eine Schaltfläche hinzufügen
• Öffnen Sie die Seitenwand
• Inhalt in einem benutzerdefinierten Div platzieren
• Enthält den Code für einen Schaltflächenklick-Handler

Die Funktionen werden in den Controller importiert, der bei OTT Plugins die Datei index.js ist, und dann nach Bedarf verwendet.

Hier ist ein einfaches Modul, das eine Funktion enthält, die eine Schaltfläche erstellt.

const addCustomButtonDetails = () => {
    
  window.postMessage({
    event: 'detailsPageAddCustomButton',
    data: {
      title: 'Test Button',
      font_awesome_icon: 'fa fa-info-circle',
      element_id: 'TEST_BTN_ID'
    }
  }, window.location.origin);
  
};
  
export { addCustomButtonDetails };

Dies funktioniert zwar, ist aber nicht wiederverwendbar. Sie benötigen für jede Schaltfläche, die Sie erstellen möchten, eine andere Funktion. Um die Funktion wiederverwendbar zu machen, werden Parameter verwendet:

const addCustomButtonDetails = (pTitle, pIcon, pID) => {
  
  window.postMessage({
    event: 'detailsPageAddCustomButton',
    data: {
      title: pTitle,
      font_awesome_icon: pIcon,
      element_id: pID
    }
  }, window.location.origin);

};

export { addCustomButtonDetails };

Wenn es Schaltflächen gibt, sollte es auch Klick-Handler geben. Dem Modul wird eine Funktion hinzugefügt, die bei einem Klick auf eine Schaltfläche aufgerufen wird und einfach eine Meldung mit dem Namen der Schaltfläche ausgibt. Die eigentliche Behandlung des Ereignisses wird dem Controller überlassen

const addCustomButtonDetails = (pTitle, pIcon, pID) => {
      
  window.postMessage({
    event: 'detailsPageAddCustomButton',
    data: {
      title: pTitle,
      font_awesome_icon: pIcon,
      element_id: pID
    }
  }, window.location.origin);

};

const handleButtonClick = (buttonString) => {

  alert('Button clicked: ' + buttonString);

};

export { addCustomButtonDetails, handleButtonClick };

Nun ist es an der Zeit zu sehen, wie die Funktionen verwendet werden können.

Der index.js-Controller

Die Datei index.js ist so eingerichtet, dass sie als zentraler Event-Handler fungiert und den Datenverkehr von dort aus "leitet". In diesem Beispiel geschieht Folgendes:

• Zeile 1: Die Funktionen des Moduls werden importiert
• Zeilen 3-8: Standard-Syntax für OTT-Plugin-Ereignishandler
• Zeile 9: Eine switch-case-Anweisung leitet die Ausführung an den richtigen Code weiter
• Zeilen 10-13: Fügt der Webanwendung zwei Schaltflächen hinzu, wenn das Ereignis onBeaconPageLoad behandelt wird
• Zeilen 15-22: Beim Ereignis detailsPageExternalButtonWasClicked wird die Funktion handleButtonClick() aufgerufen; die if-Anweisungen werden verwendet, um den richtigen Parameterwert an die Funktion zu übergeben

import { addCustomButtonDetails, handleButtonClick } from './button-demo-module.js';
    
window.addEventListener("message", (event) => {
  const originsAllowed = [
    'https://yourapplocation.com',
    'https://yourapplocation.com'
  ];
  if (originsAllowed.includes(event.origin)) {
    switch (event.data.event) {
      case 'onBeaconPageLoad':
        addCustomButtonDetails('Download', 'fa fa-info-circle', 'download-button');
        addCustomButtonDetails('Location', 'fa fa-info-circle', 'location-button');
        break;

      case 'detailsPageExternalButtonWasClicked':
        if (event.data.data.element_id == 'download-button') {
         handleButtonClick('Download');
        };
        if (event.data.data.element_id == 'location-button') {
          handleButtonClick('Location');
        };
        break;
    }

  }
},
false
);

Hier ist das Plugin in Aktion:

Zusammenfassung

Sie haben ein einfaches Beispiel für ein Modul gesehen, das zur Implementierung einer Funktion von OTT-Plugins verwendet wird: Schaltflächen. Bitte beachten Sie die folgenden Punkte, wenn Sie OTT-Plugins einsetzen:

• Die Verwendung von Modulen ist eine Möglichkeit, Plugin-Code zu implementieren, aber nicht die einzige. Obwohl Brightcove diesen Ansatz nicht empfiehlt, kann er sich für Ihre Anwendungsfälle als geeignet erweisen.
• Es gibt verschiedene Grade der Wiederverwendung von Code und Abstraktionsebenen. Möglicherweise möchten Sie mehr oder weniger als die in den Brightcove-Plugin-Beispielen angegebenen Werte verwenden.
• Die Beispielmodule decken NICHT jeden möglichen Bedarf für jeden Plugin-Implementierer ab. Die Beispiele bieten eine Grundlage, auf der Sie Code für Ihre Anwendungsfälle entwickeln können.