페이지 변경 시 decorateCookedElement를 실행해야 하나요?

개발
5

코드는 정상적으로 작동할 것입니다. 다만 Discourse의 버그에 부딪힌 것입니다.

loadScript()는 로드하는 스크립트에 async 속성을 설정하지 않습니다. 따라서 기본적으로 async="true"가 적용되어 로드 순서가 어긋나게 됩니다. 이는 브라우저의 특성입니다. JS로 로드하는 스크립트에 대해서는 async="false"로 강제해야 합니다.

플러그인은 크기가 작아서 메인 번들보다 빠르게 로드되지만, async 상태에서는 더 이상 로드 순서를 따르지 않습니다. 즉, 메인 번들이 로드되고 실행된 후에 실행되어야 합니다.

아마도 loadScript가 코어 어디에도 중첩되어 있지 않아서(제가 아는 한) 이 문제가 눈에 띄지 않았을 것입니다. 일반적으로 함께 작동해야 하는 파일들은 번들링합니다. 따라서 다른 질문에 대한 답변도 드릴게요. 아니요, 그런 일을 처리하는 Discourse 함수는 없습니다.

다른 스니펫도 정상적으로 작동할 것입니다. 가독성을 조금 높이기 위해 중첩 대신 체이닝으로 작성해 보는 것을 추천합니다.

// This goes outside the decorator
const PLUGINS = {
  speed: "https://example.com/foo.js",
  skipBack: "https://example.com/bar.js",
  jumpForward: "https://example.com/baz.js"
};

// Then do your work inside the decorator
loadScript(MEDIA_ELEMENT_SRC)
  .then(() => loadScript(PLUGINS.speed))
  .then(() => loadScript(PLUGINS.skipBack))
  .then(() => loadScript(PLUGINS.jumpForward))
  .then(() => {
    audioplayers.forEach(function (el) {
      new MediaElementPlayer(el, MEDIA_ELEMENT_CONFIG);
    });
  });