별도의 모듈에 데이터 저장

서문

프레젠테이션 및 프로그램 실행에서 데이터를 분리하는 것은 드문 프로그래밍 방식이 아닙니다. 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에 지정된 < div>요소를 가져온 다음 해당 HTML을 < div>에배치합니다.

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;