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

Question

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

示例代码为：

<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对象，但是此示例代码要求我将对象附加到窗口对象。

我创建了一个函数来添加脚本：

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

还有一个函数，用于在窗口上设置对象，如我在 React/Angular 中构建的 SPA：

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

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

我的问题是：

如果您要在 React SPA 中进行此 SDK 集成，那么您将如何通过遵循最干净的方法来处理它？

Answer 1

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

如果你想在特定页面上使用它 - 虽然这不是一个SPA？ - 然后你可以根据他们的文档将配置扔到一个 React 元素中，这些元素应该返回一个空的div 或 React 之后从未接触过的东西;但是您仍然需要手动清理窗口对象。