Uso de módulos de JavaScript para complementos de Beacon

En este tema, aprenderá cómo se pueden usar los módulos de JavaScript en la implementación de código de Beacon Plugins.

Introducción

Los complementos OTT se implementan con JavaScript y CSS. Siempre que esté utilizando código, querrá considerar la organización del código. En la Guía de aprendizaje: Complementos OTT documento, aprendió que los complementos se implementan cargando un archivo JavaScript en su aplicación web Beacon. Ese archivo único, llamado index.js , podría contener todo el código JavaScript de su complemento OTT, pero esto conduciría a prácticas de codificación deficientes. Además, hay una miríada de otros marcos de JavaScript entre los que puede elegir. Para lograr un equilibrio entre las malas prácticas y la complejidad, los documentos sobre complementos OTT utilizan módulos de JavaScript para la organización del código.

Básicamente, index.js actúa como un "controlador" y los detalles de implementación reales para cada elemento del complemento se encuentran en un archivo de módulo de JavaScript. Al igual que un "oficial de policía de tránsito" indica a dónde deben ir los automóviles, el controlador dirige la ejecución del programa. En el caso de los módulos de JavaScript, el "policía de tráfico" básicamente está importando módulos y dirigiendo qué módulos deben llamarse, cuándo y qué datos deben pasarse a los módulos. La idea de un controlador es muy común en la práctica de la programación y, por supuesto, puede elegir su marco de JavaScript favorito.

Las muestras de código de ejemplo se pueden descargar desde el repositorio de GitHub de ott-plugins-example-code .

Los módulos

Se consideran buenas prácticas de codificación:

  • No código duplicado
  • Haz que tu código sea lo más reutilizable posible

El uso de módulos ayuda a realizar ambas tareas. Primero, echemos un vistazo a la sintaxis básica de cómo se estructuran los módulos en los ejemplos que se muestran en estos documentos:

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

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

Verá tres funciones definidas como constantes usando la notación de flecha. Estas funciones realizan tareas como:

  • Agregar un botón
  • Abre el panel lateral
  • Colocar contenido en un div personalizado
  • Contener el código para un controlador de clic de botón

Las funciones se importan al controlador, que es el archivo index.js para OTT Plugins, y luego se usan según sea necesario.

Aquí hay un módulo simple que contiene una función que crea un botón.

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

Esto funciona correctamente, pero no es reutilizable. Necesita una función diferente para cada botón que desee crear. Para hacer que la función sea reutilizable se utilizan parámetros:

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

};

export { addCustomButtonDetails };

Si hay botones, debe haber controladores de clic. Se agrega una función al módulo que se llama al hacer clic en un botón y simplemente muestra una alerta con el nombre del botón. En realidad, el manejo del evento se deja al controlador.

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

Ahora es el momento de pasar a ver cómo se pueden utilizar las funciones.

El controlador index.js

El archivo index.js está configurado para ser el controlador de eventos centralizado y el "tráfico directo" desde allí. En este ejemplo sucede lo siguiente:

  • Línea 1: Las funciones del módulo se importan
  • Líneas 3-8: Sintaxis estándar del controlador de eventos del complemento OTT
  • Línea 9: Una instrucción switch-case dirige la ejecución al código correcto
  • Líneas 10-13: Agrega dos botones a la aplicación web cuando se maneja el evento onBeaconPageLoad
  • Líneas 15-22: En el evento detailsPageExternalButtonWasClicked , se llama a la función handleButtonClick() ; las sentencias if se utilizan para pasar el valor del parámetro correcto a la función
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
);

Aquí está el complemento en acción:

Resumen

Ha visto un ejemplo simple de un módulo utilizado para implementar una característica de los complementos OTT, los botones. Tenga en cuenta lo siguiente cuando implemente complementos OTT:

  • El uso de módulos es una forma de implementar el código del complemento, pero no es la única forma. Aunque Brightcove no recomienda este enfoque, es posible que descubra que funciona para sus casos de uso.
  • Hay grados de reutilización de código y niveles de abstracción. Es posible que desee utilizar más o menos de lo que encuentra en los ejemplos de complementos de Brightcove.
  • Los módulos de ejemplo NO cubren todas las necesidades posibles de todos los implementadores de complementos. Los ejemplos proporcionan una base sobre la cual puede desarrollar código para sus casos de uso.