javascript - 如何通过避免窗口对象在 React 应用程序中附加 JavaScript SDK

Question

我有一个用 React js 编写的 Web 应用程序，我需要在其中集成一个 javascript SDK，如 this link 中所述

示例代码为:

<script type="text/javascript">
  var _user_id = 'al_capone'; // Set to the user's ID, username, or email address, or '' if not yet known.
  var _session_id = 'unique_session_id'; // Set to a unique session ID for the visitor's current browsing session.

  var _sift = window._sift = window._sift || [];
  _sift.push(['_setAccount', 'INSERT_BEACON_KEY_HERE']);
  _sift.push(['_setUserId', _user_id]);
  _sift.push(['_setSessionId', _session_id]);
  _sift.push(['_trackPageview']);

 (function() {
   function ls() {
     var e = document.createElement('script');
     e.src = 'https://cdn.sift.com/s.js';
     document.body.appendChild(e);
   }
   if (window.attachEvent) {
     window.attachEvent('onload', ls);
   } else {
     window.addEventListener('load', ls, false);
   }
 })();
</script>

现在，我知道我不应该在 React 应用程序中使用 window 对象，但是这个示例代码要求我将一个对象附加到 window 对象。

我已经创建了一个函数来添加脚本:

function createSiftScript(sift_script_ele) {

  //attach the object array to the window
  var _sift = window._sift = window._sift || [];
  _sift.push(['_setAccount', SIFT_SCIENCE_BEACON_KEY]);
  _sift.push(['_setUserId', email]);
  _sift.push(['_setSessionId', setUniqueSessionId()]);

  //attach the external script
  sift_script_ele = document.createElement("script");
  sift_script_ele.setAttribute('id', SIFT_SCRIPT_ID);
  sift_script_ele.setAttribute('type', "text/javascript");
  sift_script_ele.setAttribute('src', "https://cdn.sift.com/s.js");
  document.head.appendChild(sift_script_ele);
}

还有一个将窗口上的对象设置为suggested for SPAs like mine build in React/Angular的函数:

export function pushEventsToSift() {
  _sift.push(['_trackPageview']);
}

我会在所有需要的页面中调用这些函数，但是，访问 window 对象对我来说看起来很脏。

我的问题是:

如果您要在 React SPA 中进行此 SDK 集成，那么您将如何采用最简洁的方法来实现它？

Answer 1

如果这不涉及 React 关心的 DOM 元素，那么就它与 React 集成而言，您是安全的。关于在页面上设置，你可以直接在index.html里扔，没有什么可以阻止你的。

如果您希望在特定页面上使用它 - 尽管这不是 SPA？ - 然后你可以将配置放入 React 元素中 as per their docs它应该返回一个空的 div 或 React 之后永远不会触及的东西；但是您仍然需要手动清理窗口对象。