為 Beacon 插件使用 JavaScript 模塊

在本主題中，您將了解如何在 Beacon 插件的代碼實現中使用 JavaScript 模塊。

簡介

OTT 插件使用 JavaScript 和 CSS 實現。無論何時使用代碼，您都需要考慮代碼組織。在裡面學習指南：OTT插件文檔，您了解到插件是通過將一個 JavaScript 文件加載到您的 Beacon 網絡應用程序來實現的。那個名為索引.js , 可以包含所有 OTT 插件 JavaScript 代碼，但這會導致糟糕的編碼實踐。此外，還有無數其他 JavaScript 框架可供您選擇。為了在不良做法和復雜性之間取得平衡，OTT 插件相關的文檔使用 JavaScript 模塊來組織代碼。

基本上，索引.js充當“控制器”，每個插件元素的實際實現細節都在 JavaScript 模塊文件中。就像“交通警察”指揮汽車應該去哪裡一樣，控制器指揮程序執行。在 JavaScript 模塊的情況下，“交通警察”基本上是導入模塊並指示應在何時調用哪些模塊以及應將哪些數據傳遞給模塊。控制器的想法在編程實踐中很常見，當然，您可以選擇自己喜歡的 JavaScript 框架。

示例代碼示例可以從ott-plugins-示例代碼 GitHub 回購。

模塊

考慮以下方面的良好編碼實踐：

不重複代碼
使您的代碼盡可能可重用

使用模塊有助於完成這兩項任務。首先，讓我們看一下這些文檔中顯示的示例中模塊結構的基本語法：

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

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

您會看到三個使用箭頭表示法定義為常量的函數。這些函數執行如下任務：

添加按鈕
打開側面板
將內容放在自定義 div 中
包含按鈕單擊處理程序的代碼

函數被導入到控制器中，即文件索引.js對於 OTT 插件，然後根據需要使用。

這是一個簡單的模塊，其中包含一個創建按鈕的函數。

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

此功能正常，但不可重複使用。您需要為每個要創建的按鈕提供不同的功能。要使函數可重用參數，請使用：

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

};

export { addCustomButtonDetails };

如果有按鈕，則應該有點擊處理程序。一個函數被添加到點擊按鈕時調用的模塊，並簡單地彈出一個帶有按鈕名稱的警告。實際處理事件留給控制器

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

現在是時候繼續看看如何使用這些功能了。

這索引.js控制器

這索引.js文件設置為集中式事件處理程序並從那裡“直接傳輸”。在此示例中，會發生以下情況：

第 1 行：導入模塊中的函數
第3-8行：標準 OTT 插件事件處理程序語法
第 9 行：A 開關盒語句將執行指向正確的代碼
第 10-13 行：在 Web 應用程序中添加兩個按鈕onBeaconPageLoad事件被處理
第 15-22 行：在detailsPageExternalButtonWasClicked事件， handleButtonClick()函數被調用；這如果語句用於將正確的參數值傳遞給函數

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

這是正在運行的插件：

摘要

您已經看到了一個用於實現 OTT 插件功能的模塊的簡單示例，即按鈕。實施 OTT 插件時請考慮以下事項：

使用模塊是實現插件代碼的一種方式，但不是唯一的方式。儘管 Brightcove 不推薦這種方法，但您可能會發現它適用於您的用例。
有不同程度的代碼重用和抽象級別。您可能希望使用比在 Brightcove 插件示例中找到的更多或更少的內容。
示例模塊並未涵蓋每個插件實現者的所有可能需求。這些示例提供了一個基礎，您可以在此基礎上為您的用例開發代碼。