將數據存儲在單獨的模塊中

簡介

將數據與表示和程序執行分開是一種常見的編程實踐。您可以使用 JavaScript 模塊來執行此操作。本文檔將展示如何在數據模塊然後在您的插件實現代碼中使用它。

基本的實現步驟是：

• 創建一個數據模塊並將您希望在插件實現中使用的數據存儲在變量中。
• 在元素模塊中，接受數據作為函數的參數，以按您的意願顯示或使用數據。
• 在您的控制器中，在調用顯示或使用數據的函數時將數據作為參數傳遞。

檢查代碼

以下代碼示例中顯示的用例是將 HTML 創建為數據模塊中的變量，然後將其傳遞到要顯示的自定義頁面。有關實際使用的代碼的逐行詳細信息，請參閱創建自定義頁面文檔。本文檔的重點是查看數據是如何創建和分發以供使用的。

第一個代碼塊顯示數據模塊的內容。創建並導出單個變量以供控制器使用。當然可以在數據模塊中創建多個數據變量。

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

此代碼顯示自定義頁面元素的模塊將如何顯示數據。在這種情況下，它得到<分區>為自定義頁面的 HTML 指定的元素，然後將該 HTML 放入<分區> .

const populateCustomPage = (pageContent) => {

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

};

export { populateCustomPage };

最後一個任務是控制器通過將數據傳遞給函數來使用數據來顯示數據。導入數據模塊中定義的變量，以及顯示內容的函數。在這個用例中，代碼檢查剛剛加載的頁面是否是創建的自定義頁面，如果是，則調用函數來顯示數據，同時將數據變量傳遞給函數。

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;