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