Almacenamiento de datos en un módulo separado

Introducción

No es una práctica de programación poco común separar los datos de la presentación y ejecución del programa. Puede hacer esto usando módulos de JavaScript. Este documento mostrará cómo crear una variable en un módulo de datos y luego usarla en el código de implementación de su complemento.

Los pasos básicos de implementación son:

• Cree un módulo de datos y almacene en variables los datos que desea usar en la implementación de su complemento.
• En un módulo de elementos, acepte los datos como parámetro para una función que muestre o utilice los datos como desee.
• En su controlador, pase los datos como un parámetro cuando llame a la función que muestra o utiliza los datos.

Examinando el código

El caso de uso que se muestra en los siguientes ejemplos de código es crear el HTML como una variable en el módulo de datos y luego pasarlo a una página personalizada para que se muestre. Para obtener detalles línea por línea sobre el código real utilizado, consulte el documento Creación de una página personalizada . El énfasis en este documento es ver cómo se crean y distribuyen los datos para su uso.

El primer bloque de código muestra el contenido del módulo de datos. Se crea y exporta una única variable para que la utilice el controlador. Por supuesto, se pueden crear múltiples variables de datos en el módulo de datos.

var pageContent = '<h2> This is content in the <em>custom page</em> passed as a parameter from a data file</h2><br>'
  + '<p>You can build your HTML in many ways and the page can contain the content you choose. You are NOT limited to the page types shown in the page layout UI.</p><br>'
  + '<p>Even use images!</p>'
  + '<img src="https://solutions.brightcove.com/bcls/beacon-plugins/yachats-far.png">';
  
export { pageContent };

Este código muestra cómo el módulo del elemento de la página personalizada mostrará los datos. En este caso obtiene la <división> elemento designado para el HTML de la página personalizada y luego coloca ese HTML en el <división> .

const populateCustomPage = (pageContent) => {

  var customPageArea = document.getElementById('custom_page_area');
  customPageArea.insertAdjacentHTML('afterbegin', pageContent);

};

export { populateCustomPage };

La última tarea es que el controlador utilice los datos pasándolos a la función para mostrar los datos. Se importa la variable definida en el módulo de datos, junto con la función que muestra el contenido. En este caso de uso, el código verifica si la página recién cargada es la página personalizada creada y, en caso afirmativo, llama a la función para mostrar los datos mientras pasa la variable de datos a la función.

import { pageContent } from './data.js';
import { populateCustomPage } from './custom-page-module.js';
...
case 'onBeaconPageLoad':
  if (event.data.data.slug == '24849-custom-for-plugin') {
    populateCustomPage(pageContent);
  }
break;