☰

使用 Split 或 replaceState 来从 URL 中删除锚标签？

tag-icon • tag-icon javascript jquery
使用 Split 或 replaceState 来从 URL 中删除锚标签？

在我们的着陆页上，我们有一个号召性用语按钮，可将用户引导至页面上的锚点。但在 URL 中添加锚点标签会扰乱我们的跟踪数据。

我想出了两个解决方案：split和replaceState。split似乎不能持续工作，这取决于锚标记。replaceState工作完美，但老板说这不是最优的。

哪一个是最好的，我该如何优化它？

分裂

$form.find('[name="source_url"]').val(location.href.split('#')[0]);

替换状态

$(window).on('hashchange', function() {
  setTimeout(function() {
    if (window.location.hash) {
      history.replaceState('', document.title, window.location.href.split('#')[0]);
    }
  }, 500);
});

答案1

split和方法replaceState都可用于从 URL 中删除锚标记。让我们比较一下这两种方法并讨论它们的优缺点。

  1. 使用split：
$form.find('[name="source_url"]').val(location.href.split('#')[0]);

此方法直接使用字符作为分隔符来拆分 URL #，并提取锚标记之前的部分。这看起来就像您使用不带锚标记的 URL 设置输入字段的值一样。

优点：

  • 实现起来简单又直接。
  • 当 URL 结构一致且锚标记始终位于末尾时效果很好。

缺点：

  • 如果 URL 结构发生变化或者锚标记不总是位于末尾，则此方法可能无法按预期工作。
  1. 使用replaceState：
$(window).on('hashchange', function() {
  setTimeout(function() {
    if (window.location.hash) {
      history.replaceState('', document.title, window.location.href.split('#')[0]);
    }
  }, 500);
});

此方法监听 URL 中哈希部分的变化（锚标记变化），并用锚标记之前的部分替换 URL 的当前状态。

优点：

  • 更加灵活，因为只要锚标记出现在 URL 中，它就会动态地删除它。
  • 适用于各种 URL 结构和锚标签位置。

缺点：

  • 它涉及设置事件监听器，这可能会增加一点开销。

如果该split方法并非在所有情况下都有效，并且replaceState效果完美，那么您可能希望采用该replaceState方法。老板可能会认为它不是最优的，因为它引入了事件监听器，但在大多数情况下，性能影响可以忽略不计。

优化replaceState方法：

  1. 减少超时值：不要使用setTimeout500 毫秒，尝试将其减少到较低的值（例如 100 毫秒），以使 URL 更新响应更快，同时避免任何潜在的跟踪问题。

  2. 事件去抖动：根据您的应用程序，您可以考虑对事件进行去抖动，以防止在短时间内hashchange过度调用。这样，您可以确保仅在一定间隔的不活动状态后才调用该函数，以避免不必要的更新。replaceState

以下是如何对事件进行去抖动的示例：

let timerId;
$(window).on('hashchange', function() {
  clearTimeout(timerId);
  timerId = setTimeout(function() {
    if (window.location.hash) {
      history.replaceState('', document.title, window.location.href.split('#')[0]);
    }
  }, 100); // Adjust the debounce interval as needed
});

请记住，最佳方法取决于应用程序的具体要求和 URL 结构的一致性。如果该split方法始终适用于您的特定用例，则它可能是更简单、更高效的选择。但是，如果您遇到问题，replaceState经过一些优化的方法是一个不错的选择。

相关内容