Stockage des données dans un module séparé

Introduction

Il n'est pas rare que la programmation sépare les données de la présentation et de l'exécution du programme. Vous pouvez le faire à l'aide de modules JavaScript. Ce document montre comment créer une variable dans un module de données puis l'utiliser dans le code d'implémentation de votre plugin.

Les étapes de base de la mise en œuvre sont:

• Créez un module de données et stockez dans des variables les données que vous souhaitez utiliser dans l'implémentation de votre plugin.
• Dans un module d'élément, acceptez les données en tant que paramètre d'une fonction qui affiche ou utilise les données comme vous le souhaitez.
• Dans votre contrôleur, passez les données en tant que paramètre lorsque vous appelez la fonction qui affiche ou utilise les données.

Examen du code

Le cas d'utilisation illustré dans les exemples de code suivants consiste à créer le code HTML en tant que variable dans le module de données, puis à le transmettre à une page personnalisée pour qu'elle soit affichée. Pour obtenir des détails ligne par ligne sur le code utilisé, voir le document Création d'une page personnalisée . Dans ce document, l'accent est mis sur la manière dont les données sont créées et distribuées pour être utilisées.

Le premier bloc de code montre le contenu du module de données. Une seule variable est créée et exportée pour être utilisée par le contrôleur. Bien entendu, plusieurs variables de données peuvent être créées dans le module de données.

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

Ce code montre comment le module de l'élément de page personnalisé affichera les données. Dans ce cas, il récupère l'élément <div> désigné pour le code HTML de la page personnalisée et place ensuite ce code HTML dans la div<> .

const populateCustomPage = (pageContent) => {

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

};

export { populateCustomPage };

La dernière tâche consiste pour le contrôleur à utiliser les données en les transmettant à la fonction qui les affiche. La variable définie dans le module de données est importée, ainsi que la fonction qui affiche le contenu. Dans ce cas d'utilisation, le code vérifie si la page qui vient d'être chargée est la page personnalisée créée et, dans l'affirmative, appelle la fonction pour afficher les données tout en transmettant la variable data à la fonction.

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;