Javascript样式-专业外观的代码

Question

我一直在读JS的书，里面有这样的东西：

function onSuccess(entries) {
    document.getElementById("loading").innerHTML="";
    var ul = document.getElementById("file-listing");
    for(var index=0;index<entries.length;index++) {
        var li = document.createElement('li');
        li.innerHTML = entries[index].name;
        ul.appendChild(li);
    }
}

然而，我在多个网站上读到，在html = "“中创建整个列表，添加ul和li元素，然后添加块，在一个调用中追加所有内容会更快、更干净……所以我想知道我是否应该遵循我在许多js书中找到的风格，或者我在性能博客上读到的风格？我最担心的是，如果我使用前面的代码块，阅读我代码的人会发现它很业余。我也遇到过一些人，他们会说，哇，你用的都是jQuery……而不是使用DOM调用，如document.getElementById()等。

Answer 1

然而，我在多个网站上看到，在

=“”中创建整个列表更快更干净...

如果你的意思是，someElement.innerHTML = "HTML tags here";，那么是的，在大多数情况下它更快，因为从根本上讲，解析和呈现HTML是浏览器所做的，所以它们在这方面非常快，而如果你使用DOM调用来构建东西，那么每次都会有很多跨越不同层(JavaScript，DOM，浏览器内部)的旅行。

但：在大多数情况下，这也无关紧要。如果您正在呈现一个包含大量列的2000行的表，这可能很重要；但是如果您没有这样做，那么这大部分都无关紧要。您可以在发现问题时对其进行优化。

，所以我想知道我是否应该遵循我在许多js书籍中找到的风格，或者我在性能博客上读到的风格？

你应该做任何你认为最干净、最清晰、最简单的事情。

我最担心的是，如果我使用前面的代码块，阅读我代码的人会发现它很业余。

那是他们的问题。:-)

我也遇到过一些人，他们说，哇，你用的都是jQuery……而不是使用document.getElementById()等DOM调用。

使用jQuery进行所有或几乎所有的DOM操作都没有错；它非常擅长这一点，并且为您节省了大量的时间和麻烦。您应该熟悉DOM，以便可以在适当的时候使用它(jQuery并不能做所有的事情；特别是它不擅长处理文本节点)，但这并不意味着您不应该在适当的时候使用jQuery。

为了达到这个目的，我们来读一下：

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Web Application APIs

再说一次，这并不意味着你应该仅仅因为有人轻视使用jQuery而使用它。适当使用工具。重要的是理解您正在使用的工具(包括jQuery和DOM本身)，这样您就可以理解何时何地应用它们。