我有一些服务器端代码，用于输出用户可以编辑的<ul>项，并将更改发回服务器。我现在正在开发一个“添加新”功能，该功能会向<ul>添加一个新项目，并在点击“保存更改”按钮时将其发回服务器。
当用户单击“添加新”按钮时，我执行附加<li>标记的客户端代码（由我的服务器端代码生成的相同标记）。
困扰我的是冗余。这意味着如果我应该更改<li>标记，我将不得不打开php和js文件来进行更改。
为了消除冗余，我应该只从服务器输出<ul> 数据并让客户端代码生成标记吗？这样一个概念的性能命中是什么？
答案 0 :(得分：1)
理论上，您可以添加新的<li>而不会出现任何问题。但是，对于大多数用途，您需要服务器保留主副本，从而为每次更新重新提供整个<ul>。
如果你使用的是.ajax()，这在加载时间上会有一个几乎无法估量的差异。
答案 1 :(得分：1)
您可以使用JQuery .clone()方法进行混合。
您的后端代码在创建初始代码时可以生成<li>元素的结构，然后，如果用户想要添加新的<li>，您可以抓住现有的用作模板的.clone()，用来自用户的新数据更新克隆的值，然后将其附加到<ul>。
唯一的问题是，如果页面加载时可能没有任何<li>个元素，那么.clone()调用将无法引用。如果这是一个问题（例如，您想要使用的string格式的JS <li>模板），可以使用这样的方法：var newLI = $(liTemplateString);。再次，这个模板可以通过后端的相同代码创建，这些代码会在页面加载时创建实际的<li>元素......它也只是创建一个JS变量。
除此之外，这将允许您立即将<li>更新到页面，然后使用Ajax将更新发送到后端，以更新“主”版本，而无需让用户等待那个过程。
最后，我个人的偏好是让后端做尽可能多的处理，只有你的客户端代码来处理后端无法做的事情，所以我会害羞远离转储数据并让前端句柄构建列表，如果后端可以在创建页面时执行此操作。
答案 2 :(得分：0)
让我建议第三种方式：复制现有元素并根据需要更改其属性和/或内容。
jQuery有.clone()，但也可以使用普通DOM或任何其他库来完成。
这样，您就不会添加不必要的延迟，并且保持客户端代码相对独立于您可能必须执行的任何标记更改。这意味着如果您添加或更改与JS需要做的事情无关的任何标记（例如添加class=""或内部<span>）并且您的JS足够通用（例如，将元素添加到克隆和从属性编辑其文本的那个）然后你不需要更新它。