28

在一次面试中，一旦我参加，我被要求创建一个基于 java 脚本的功能，据说我在其中创建一个表单（比如名字、姓氏、电子邮件、年龄）和一个列表（实际上列表是另一种存储多个条目的表单）在此表单下方。提交此表单后，列表中添加了一个新行。但是，可以删除任何先前添加的列表行。并且添加删除后，最后需要存储这个最终的listing状态。（表单发布和服务器端脚本的种类进入图片）

所以我做了什么，在提交表单时，<tr>在列表表中添加一个新行，同时我使用 jQuery 序列化序列化除提交按钮之外的所有表单数据，并将其存储在列表表单的一个隐藏元素中。

在删除列表行时，我正在删除<tr>行以及同一行的相应隐藏元素。

一切都很好，没有任何错误。但是面试官问我“我使用的方法（隐藏元素）真的合适吗？”。

我回答说，我可以使用 json 吗？但无法破解采访。所以我想知道在这种情况下我们可以用来存储数据的最佳方法是什么？

4

8 回答 8

7

客户端的另一种方法是单独保留对象列表，并且仅将对每个项目的引用存储在 DOM 元素的属性中。这种方法与 jQuery 提供的方法非常相似，$.fn.data()并且具有以下优点：

  1. 您不必序列化任何内容，数据保持其本机格式；应该说，您也可以通过添加属性来实现这一点。

  2. 您的所有数据都保存在一个地方，而不是分散在 DOM 中。

这是一个示例实现：

(function(ns) {

var entries = {},
entryId = 1;

ns.Entries = {
   addEntry: function(data) {
     entries[entryId] = data;
     return entryId++;
   },
   getEntryById: function(id) {
     return entries[id] || null;
   }
};

}(this));

调用Entries.addEntry会返回一个标识符，您可以将其存储在 DOM 元素的属性之一中：

tr.entryId = Entries.addEntry(data);

稍后您可以使用该entryId属性在条目列表中找到相应的数据并使用它。

var data = Entries.getEntryById(tr.entryId);

演示

当然，这个特定的功能也可以通过使用会话在服务器端解决。

于 2013-04-15T07:08:06.987 回答
7

感谢 HTML5，我们现在能够在所有 HTML 元素上嵌入自定义数据属性。这些新的自定义数据属性由两部分组成：

  • 属性名称 数据属性名称必须至少有一个字符长，并且必须以“data-”为前缀。它不应包含任何大写字母。
  • 属性值 属性值可以是任何字符串。

使用这种语法，我们可以将应用程序数据添加到我们的标记中，如下所示：

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

我们现在可以在我们网站的 JavaScript 中使用这些存储的数据来创建更丰富、更具吸引力的用户体验。想象一下，当用户点击蔬菜时，浏览器中会打开一个新图层，显示额外的种子间距和播种说明。由于我们添加到<li>元素中的数据属性，我们现在可以立即显示这些信息，而不必担心进行任何 Ajax 调用，也无需进行任何服务器端数据库查询。

来源：HTML5 医生

我相信还有其他方法。

于 2013-04-15T07:03:46.237 回答
2

实际上，您可以使用 jQuery 向 html 元素添加数据，而不是使用隐藏元素。这是一种更好的方法，可以使您的数据对用户不那么明显/直接。检查 jQuery 中的 data() 。

于 2013-04-15T07:06:06.180 回答
0

首先，一页上的多个表单是错误的 - 它是数据丢失反模式。正确的方法是把所有东西都放在一种形式中。这样，即使没有 JS，它也可以工作，并且您只能使用 JS 来提高可用性，而不是提供基本功能。该解决方案将优雅地降级，并且易于调试和维护。

当然，将数据保存在隐藏字段中是一种有效的技术。

于 2013-04-15T07:11:05.897 回答
0

通过将提交的数据写入表单本身并再次从中读取，您已经将这两个元素绑定在一起 - 据说它们是紧密耦合的。

如果另一个要求也出现在表格中显示先前提交的数据，会发生什么情况？还是将表格放在单独的页面上？

如果您采用更多的 MVC 方法，您可以分离出各个部分的逻辑 - 读取、写入和发送数据。例如，正如您所说，从 JSON 模型中写入和读取。这将使每个方面在未来更容易扩展。

于 2013-04-15T07:13:22.933 回答
0

如果用户可以信任它，那么在客户端存储数据并没有错，并且当他弄乱它时，您的系统也不会发生任何可怕的事情。

我可以看到使用隐藏字段（或 cookie）的唯一问题是它们会随每个请求一起发送，这可能会浪费带宽。不确定这是否适用于您的情况，可能不适用，因为您说您只在完成所有操作后提交一次。

于 2013-04-15T07:03:39.073 回答
0

“有效”的解决方案的问题在于它们不够抽象，因此往往会在未来引起问题。考虑你的例子；如果您决定将临时数据存储在本地存储中（以允许用户关闭浏览器并稍后返回），则必须重写存储数据的方式。如果将其存储在变量中，则可以像添加“提交到服务器”或“传递到任何其他函数”功能一样轻松地添加“保存到本地存储”。除了发布到服务之外，您的“隐藏元素”方法必须被重写以用于任何目的。

于 2013-04-15T07:04:37.927 回答
0

我不会直接回答你的问题，但会专注于你选择的面试和方法。

我会说您选择了错误的方式，并且您应用此解决方案的知名 IT 公司可能会遇到问题。

您选择了将所有内容存储在客户端的方式，但您不应该这样做！由于您的客户可能会以这种方式丢失大量数据，因为想象一下您的列表表单永远不会发送的情况？用户只会忘记点击发送（永远不要相信用户！）。然后你失去了一切......你工作的全部进展......假设你已经添加了 50 个列表项......

同样添加这样的项目可以很容易地使您的会话过期（对服务器没有请求）并且不会保存任何数据，因为用户必须再次登录。你也必须处理它，否则你将失去一切！

很抱歉有感叹号，但我认为数据至关重要（尤其是对您的客户而言），因此永远不要提供可能使客户以某种方式丢失数据的解决方案。

所以：

将数据存储在 HTML 元素中还不错，但您需要非常小心地应用此解决方案。

于 2013-04-15T07:29:23.667 回答