javascript - 使用 javascript 存储(和检索!)特定于 dom 元素的数据的最佳方式

Question

我有一个下拉列表矩阵，我希望能够在用户以可视方式编辑设置时向用户显示(例如通过将表格单元格的背景设置为红色)。如果他们将其切换回原始值，它将恢复为默认背景颜色。这样一来，系统的状态就会一目了然。

为此，我想出了设置一个 onchange <select> 上的处理程序像这样的元素:select.setAttribute('onchange','chSel(this,'+select.selectedIndex+');');其中 select是 <select>元素。

它将调用函数 chSel引用自身和当前设置，因此它将能够设置将通过 CSS 确定显示属性的类:

function chSel(node, origSelIndex) {
    if (node.selectedIndex == origSelIndex) // switching back to the set state
    node.parentNode.removeAttribute('class');
    else node.parentNode.setAttribute('class','cell_changed');
}

尽管保存了 selectedIndex，但不需要检索动态数据onchange 中的值处理程序用作特定于元素的静态数据。

我想通过在我的表格周围制作一个边框来扩展我描述的这个功能，我打算在它的任何内容被修改时将其涂成红色，这样即使表格很大，仍然可以一目了然如果它的任何条目被修改。

实现这个有一个不好的方法和一个更好的方法。我确实知道如何在兼容的 HTML/XHTML 中实现的坏方法是 chSel (每当用户与下拉菜单交互时执行)在整个表格中运行完整搜索以计算编辑次数，并相应地标记表格边框。这实际上可能不是性能问题，但我预计它会是。我认为它不会很好地扩展。

更好的方法是记录被编辑元素的数量。当该数字回落到零时(用户将他的所有编辑更改回原始值)，我可以将表格重新标记为未编辑。

但是，这需要我有一些方法来确定选择菜单是否已从新值更改为不同的新值，而不是从原始值更改为新值，即现在相关的是什么值(value)被改变是。似乎没有办法做到这一点。 This discussion似乎表明我无法在保持文档有效的同时创建和检索自定义属性。当我尝试分配任意属性时，我很难检索到它们的值。

还剩下什么？我可以构建一个对象，用作从元素到整数的散列吗？ javascript 甚至会让我这样做吗？

Answer 1

我不确定我是否完全理解您要执行的操作，但您可以在 javascript 变量或自定义 DOM 属性中跟踪状态。 Javascript 变量稍微容易一些，但是你必须给它们一个合适的范围，这样它们才能在你的操作期间存活下来。自定义 DOM 属性有时更容易实现面向对象并避免任何全局 javascript 变量。 jQuery 的 .data() 能力实际上介于两者之间。它使用一个自定义数据属性来标记具有唯一标记的 DOM 对象，然后将所有实际数据存储在 javascript 映射中。

一旦你适本地存储状态，任何时候你得到一个变化事件，你可以与以前的值进行比较，看看从以前的状态实际改变了什么，更新你的新状态并将新值保存为以前的值或做任何事情否则你需要做。

例如，通过这种方式，您可以记录有多少已编辑的项目，并且只要该值从 0 变为非零或从非零变为 0，您就可以根据需要更改整个表格的外观。同样，只要单个单元格发生变化，您就可以更新它的外观。

如果您的 DOM 元素是您唯一的数据结构，那么最简单的方法可能是只创建自定义属性并在其中保留其他数据。这样做的 HTML5 方法是在属性名称前添加“data-”，如 obj.setAttribute("data-origSelectIndex", x) 或 obj["data-origSelectIndex"] = x 以防止它们与标准属性发生任何名称冲突。

如果出于任何原因您不想使用自定义属性，那么您需要制作一个并行的 javascript 数据结构(可能是一个数组，其中数组中的每个项目都以某种方式对应于一个 DOM 元素，您可以映射两者之间)保存数据。