Utilisation de modules JavaScript pour les plugins Beacon

Introduction

Les plugins OTT sont mis en œuvre avec JavaScript et CSS. Chaque fois que vous utilisez du code, vous devez prendre en compte l'organisation du code. Dans le guide d'apprentissage : Document sur les plugins OTT, vous avez appris que les plugins sont implémentés en chargeant un fichier JavaScript dans votre application Web Beacon. Ce seul fichier, nommé index.js, pourrait contenir tout le code JavaScript de votre plugin OTT, mais cela conduirait à de mauvaises pratiques de codage. Il existe également une myriade d'autres frameworks JavaScript parmi lesquels vous pouvez choisir. Pour trouver un équilibre entre les mauvaises pratiques et la complexité, les documents relatifs aux plugins OTT utilisent des modules JavaScript pour l'organisation du code.

Fondamentalement, le fichier index.js joue le rôle de "contrôleur" et les détails de la mise en œuvre de chaque élément du plugin se trouvent dans un fichier de module JavaScript. À l'instar d'un "agent de la circulation" qui indique aux voitures où elles doivent aller, le contrôleur dirige l'exécution du programme. Dans le cas des modules JavaScript, le "traffic cop" consiste essentiellement à importer des modules et à déterminer quels modules doivent être appelés à quel moment et quelles données doivent être transmises aux modules. L'idée d'un contrôleur est très courante dans la pratique de la programmation et, bien sûr, vous pouvez choisir votre framework JavaScript préféré.

Des exemples de code peuvent être téléchargés à partir du dépôt GitHub ott-plugins-example-code .

Les modules

Il est considéré comme une bonne pratique de codage :

• Pas de code dupliqué
• Rendez votre code aussi réutilisable que possible

L'utilisation de modules permet d'accomplir ces deux tâches. Tout d'abord, examinons la syntaxe de base de la structure des modules dans les exemples présentés dans cette documentation :

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

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

Vous voyez trois fonctions définies comme des constantes à l'aide de la notation fléchée. Ces fonctions permettent d'effectuer des tâches telles que

• Ajouter un bouton
• Ouvrir le panneau latéral
• Placer le contenu dans une div personnalisée
• Contient le code d'un gestionnaire de clic sur un bouton

Les fonctions sont importées dans le contrôleur, qui est le fichier index.js pour les plugins OTT, puis utilisées si nécessaire.

Voici un module simple qui contient une fonction qui crée un bouton.

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 };

Il fonctionne correctement, mais n'est pas réutilisable. Vous avez besoin d'une fonction différente pour chaque bouton que vous souhaitez créer. Pour rendre la fonction réutilisable, des paramètres sont utilisés :

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

};

export { addCustomButtonDetails };

S'il y a des boutons, il doit y avoir des gestionnaires de clics. Une fonction est ajoutée au module, qui est appelée lors d'un clic sur un bouton et qui affiche simplement une alerte contenant le nom du bouton. La gestion de l'événement est laissée au contrôleur

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 };

Il est maintenant temps de voir comment les fonctions peuvent être utilisées.

Le contrôleur index.js

Le fichier index.js est configuré pour être le gestionnaire d'événements centralisé et pour "diriger le trafic" à partir de là. Dans cet exemple, il se passe ce qui suit :

• Ligne 1 : Les fonctions du module sont importées
• Lignes 3-8: Syntaxe standard du gestionnaire d'événements du plugin OTT
• Ligne 9 : Une instruction switch-case dirige l'exécution vers le code correct
• Lignes 10-13 : Ajoute deux boutons à l'application web lorsque l'événement onBeaconPageLoad est géré
• Lignes 15-22 : Lors de l'événement detailsPageExternalButtonWasClicked , la fonction handleButtonClick( ) est appelée ; les instructions if sont utilisées pour transmettre la valeur correcte du paramètre à la fonction

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
);

Voici le plugin en action :

Sommaire

Vous avez vu un exemple simple de module utilisé pour mettre en œuvre une fonctionnalité des plugins OTT, les boutons. Veuillez tenir compte des éléments suivants lorsque vous mettez en œuvre des plugins OTT :

• L'utilisation de modules est une façon de mettre en œuvre le code des plugins, mais ce n'est pas la seule. Bien que Brightcove ne recommande pas cette approche, il se peut qu'elle convienne à vos cas d'utilisation.
• Il existe des degrés de réutilisation du code et des niveaux d'abstraction. Vous pouvez utiliser plus ou moins que ce que vous trouverez dans les exemples de plugins Brightcove.
• Les modules d'exemple ne couvrent PAS tous les besoins possibles de tous les utilisateurs de plugins. Les exemples fournissent une base sur laquelle vous pouvez développer du code pour vos cas d'utilisation.