我可以重用用 jQuery 创建的 HTML "shell"来提高效率吗？

Question

我想知道编写我需要的jQuery的最佳方式是什么。这是手头的任务;

• 新内容通过 AJAX 加载，一次加载 12 个对象。每个对象都有一个链接，一些文本和一个图像。
• 新内容将插入到 <li> 元素中，其中嵌套了各种类和 <span> 元素。HTML "shell" 都是使用 jQuery 制作的。
• 我目前正在使用 jQuery 的 $.each() 方法来循环访问对象。

所以，我想知道最快的脚本是什么。我需要在循环的每次迭代中创建所有新的 HTML，我希望我可以创建一次 HTML，然后重用它，只是每次添加不同的类和内容。我不知道这是否可能，或者这是否会提高性能，但这对我来说似乎是合乎逻辑的。其次，更好的是 - 在每次迭代时附加到父<ul>，或者一次"在最后"附加所有 12 个项目。

你可以在我整理的jSfiddle上看到这个想法的一个非常精简的版本：http://jsfiddle.net/D52EY/

Answer 1

这实际上是两个问题。

问：我应该每次从头开始创建一个表示特定对象的 HTML 元素，还是应该为此使用一些准备好的模板？后者甚至可能吗？

答：是的，这是可能的;一种可能的方法：

var $tmplLi = $('<li>', { className: someClass, someOtherAttr: someOtherValue });
// when object's retrieved:
var $li = $tmplLi.clone();
$li.attr('id', someObj.id)
   .text(someObj.description);

如您所见，我只是在每个步骤中克隆预先创建的模板元素。请注意，$tmplLi永远不会附加到 DOM 中 - 它只是浮动在内存中，等待使用。)

在某些情况下，这种方法更具可读性，但它更快吗？在我们的实验中，结果证明这是依赖于实现的;尽管如此，差异还是可以忽略不计的。

问：更好的是：在每次迭代时追加到父项，还是在"最后"一次追加所有 12 个项？

答：后者肯定更好，但在处理 12 个项目时，您可能不会看到区别。尽管如此，它的扩展性要好得多，而且相当简单。关键点是使用容器jQuery对象，该对象的内容（再次）不会附加到DOM，直到需要为止。

$container = $(); // empty jQuery object
arrOfObjects.each(function(obj) {
  var $li = createLiElementFromThatObject(obj);
  $container = $container.add($li);
});
// ...
$container.appendTo($somePlaceInDOM);