비콘 플러그인에 JavaScript 모듈 사용

서문

OTT 플러그인은 JavaScript 및 CSS로 구현됩니다. 코드를 사용할 때마다 코드 구성을 고려하고 싶습니다. 학습 가이드에서: OTT 플러그인문서에서 배운 플러그인은 하나의 JavaScript 파일을 Beacon 웹 앱에 로드하여 구현됩니다. index.js 라는 단일 파일에는 모든 OTT 플러그인 자바스크립트 코드가들어 있을 수 있지만 이는 잘못된 코딩 관행으로 이어질 수 있습니다. 또한 선택할 수 있는 다른 JavaScript 프레임워크가 무수히 많습니다. 잘못된 관행과 복잡성 사이의 균형을 위해 OTT 플러그인 관련 문서는 코드 구성에 JavaScript 모듈을 사용합니다.

기본적으로 index.js는 "컨트롤러" 역할을 하며 각 플러그인 요소에 대한 실제 구현 세부 정보는 JavaScript 모듈 파일에 있습니다. "교통 경찰"이 자동차가 가야 할 곳을 지시하는 것처럼 컨트롤러는 프로그램 실행을 지시합니다. JavaScript 모듈의 경우 "교통 경찰"은 기본적으로 모듈을 가져오고 언제 어떤 데이터를 모듈에 전달해야 하는지 어떤 모듈을 호출해야 하는지 지시합니다. 컨트롤러에 대한 아이디어는 프로그래밍 실습에서 매우 일반적이며 물론 선호하는 JavaScript 프레임워크를 선택할 수 있습니다.

예제 코드 샘플은 ott-plugins-example-code GitHub 리포지토리에서 다운로드할 수 있습니다.

모듈

다음과 같은 좋은 코딩 방법을 고려하십시오.

중복 코드 아님
코드를 최대한 재사용 가능하게 만드십시오.

모듈을 사용하면 이러한 작업을 모두 수행하는 데 도움이 됩니다. 먼저 다음 문서에 표시된 예제에서 모듈이 구성되는 방식에 대한 기본 구문을 살펴보겠습니다.

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

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

화살표 표기법을 사용하여 상수로 정의된 세 가지 함수를 볼 수 있습니다. 이러한 기능은 다음과 같은 작업을 수행합니다.

버튼 추가
측면 패널 열기
맞춤 div에 콘텐츠 배치
버튼 클릭 핸들러에 대한 코드 포함

기능은 OTT 플러그인용 index.js 파일인 컨트롤러로 가져온 다음 필요에 따라 사용됩니다.

다음은 버튼을 생성하는 함수를 포함하는 간단한 모듈입니다.

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

이제 기능을 어떻게 사용할 수 있는지 알아보러 넘어갈 차례입니다.

index.js컨트롤러

index.js파일은 중앙 집중식 이벤트 핸들러로 설정되고 여기서 오는 “직접 트래픽”이 되도록 설정됩니다. 이 예에서는 다음과 같은 일이 발생합니다.

라인 1: 모듈의 함수를 가져옵니다.
3-8번 줄: 표준 OTT 플러그인 이벤트 핸들러 구문
9호선: switch-case명령문은 올바른 코드로 실행을 지시합니다.
10-13행: OnBeaconPageLoad이벤트가 처리될 때 웹 앱에 두 개의 버튼을 추가합니다.
15-22행: 세부 정보 페이지ExternalButtonWasClickked이벤트에서 handleButtonClick ()함수가 호출됩니다. if 문은 올바른 매개 변수 값을 함수에 전달하는 데 사용됩니다.

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 플러그인 예제에서 찾은 것보다 더 많거나 적게 사용할 수 있습니다.
예제 모듈은 모든 플러그인 구현자의 가능한 모든 요구 사항을 다루지 않습니다. 예제는 사용 사례에 대한 코드를 개발할 수 있는 기반을 제공합니다.