JavaScript Id Handling

JavaScript Id Handling

本文关键字：Handling Id JavaScript      更新时间：2023-09-26

我正在开发一个网站，允许用户通过内联"窗口"在同一浏览器窗口中打开相同内容的多个页面。

由于内容可以重复多次，因此id可能是相同的，因此我必须"处理"它们，以便区分这些页面。

我目前通过在加载时为脚本分配一个唯一的id来实现这一点，如下所示：

var id_key;
 function load_page() {
     id_key++;
     load_script("test.js") //load javascript file
 }
 //test.js:
 $(function () {
     var unique_id = id_key;
     //adds the `unique id ` to the end of all elements  with an id attribute set. ie `mycontainer` becomes `mycontainer_1`
     update_ids(unique_id);
     $("#mybtn_ " + unique_id).click(function () {
         //do stuff
     });
 }

这在大多数情况下都很好，但如果多个页面加载得太快，则Id往往会被覆盖，从而导致混乱和错误。

我想知道是否有更好的技术来做到这一点。我听说过backbone.js，但我不确定这在这种情况下是否有帮助。

有几种通用方法可以解决这类问题：

  1. 在iframes中加载子页面。每个iframe都有自己的ID空间。只要所有文档都是从同一域加载的，所有帧中的脚本都可以通过parent变量相互通信。

  2. 不要使用任何id。相反；窗口"；ID，然后通过类和父子关系在窗口中定位元素。请注意，一个元素可以有多个类。

    然后可以使用$(selector, win)在某个窗口win上查找元素。窗口变成"；选择器上下文"；这意味着jQuery将只搜索窗口的子窗口，而不搜索其他窗口。

  3. 在脚本开始时，按ID定位所有重要元素，并将它们保存在JavaScript对象中。这样，您就可以在不使用jQuery选择器的情况下访问它们。

    例如，您可以选择任何具有ID的内容，并将其保存为window元素中的.data（）。在此设置之后，所有元素都可以通过$(win).data('id') 访问

您可以通过连接日期和随机数来生成非常好的唯一id：

new Date().getTime() + Math.random()

虽然这并不完美，但我认为在您的用例中它就足够了。

正如Jack在评论中提到的，您可以将此id作为get参数传递到新窗口。我曾经用这个方法做过一个完整的类似操作系统的接口，它完美地工作了。

相关文章：