Question

在我正在处理的现有项目中，我注意到许多开发人员正在使用javascript构建大部分页面。例如：

$( targetdiv ).append("<div>");
$( targetdiv ).append("   <div class='info'>");      
$( targetdiv ).append("        <div id='modes'>");
$( targetdiv ).append("          <table cellspacing='0'>");
$( targetdiv ).append("            <tbody>");
// much more...

我理解使用javascript在页面上构建某些元素。有时内容是动态的，现在知道页面首次加载时（ajax的东西）。

但是，大多数代码（并非所有代码都显示）不是动态的，每次都会以相同的方式构建。没有'if'语句或循环

有没有理由为什么人们会使用javascript来构建大部分页面而只是让html成为html doc的一部分？我认为人们会想要最小化javascript html生成因为它更多令人困惑，更难写。此外，javascript html生成必须损害性能（是吗？）

我是一个“较新的”javascript开发者，所以也许我错过了一些东西。我想说点什么，但我是“更新”所以也许我不会得到“它”

由于

Answer 1

这很有可能the most horrible way我曾见过一只小猫被杀。现在，这不仅仅是你杀死的一只小猫：这样的每条线杀死了成千上万的小猫。和小狗。

不要这样做。这是不对的。这不好。这太糟糕了。它是可怕的。真是太棒了。这不是什么好事。

更严肃的说明......

代码甚至没有按预期工作。查看有关您问题的评论。
HTML是内容，JavaScript是行为。你完全没有令人信服的理由混合两者。
每次打电话给DOM，你都有时间去喝咖啡。你打电话append很多次，只是看到它伤害了我的眼睛。

Answer 2

从哲学的角度来看，我不得不说这是一种不好的做法。 html属于html，就是它。

也就是说有几种不同的方法可以通过javascript将html添加到页面中。

<div id="template">
   <div class="mycontent">
      <!-- stuff -->
   </div>
</div>

然后

$('#target').append($('#template').html());

如果你的javascript中没有html代码，

会给你相同的结果。

但是如果你必须（有时你也这样做），最有效的方法是在原生js中创建dom元素并对它们进行操作：

var template = document.createElement('div');
template.className = "mycontent";
// do more stuff to template
document.getElementById('target').appendChild(template);

作为开发人员，提供最佳性能的本机js方法很难。因此，如果您希望将其作为html字符串使用，那么执行一次附加将是最好的：

var template  = "<div class='mycontent'>";
    template +=    // add more string to build the template
    template += "</div>";

$('#target').append(template);

虽然ajax有性能损失，但有些人认为它也是管理html代码的绝佳方式，允许你将模板放在自己的文件中。 jQuery还有一个完成此任务的快捷方式：

$('#target').load('/template.html');

或者如果您希望在模板上操作：

$.get('/template.html', function(template){
    //do stuff to html
    $('#target').append(template);
}, 'html');

多个附加语句毫无疑问是最糟糕的可能方式，而不是很好的方法。就个人而言，我提供的第一个选项是我的偏好，可以很容易地与像http://handlebarsjs.com/

这样的库配对祝你好运！

Answer 3

好吧，既然你是新人，那么你在采取行动之前确认你的怀疑是件好事。也就是说，我很确定这是一个懒惰的编码案例。实际上，实际上编写您发布的代码的方式甚至更短，而这些更短的方法不会极大地延迟浏览器。

首先，我喜欢编写页面大部分内容的方法是使用模板系统 - 将平面HTML文件放在网页目录中，或放在页面的某种未显示部分中，然后在导入时将其导入需要他们Javascript。许多图书馆可以为此提供帮助。

但是为了善良，即使你懒得这样做，也不要用多个附加功能来做这件事。这意味着浏览器在每次调用函数时都会计算出新的HTML元素和未关闭的标记，通常会重写自己的工作。至少，在调用jQuery.append ONCE之前，将HTML字符串一点一点地附加在一起。

var newHtml = "<div" +
  "   <div class='info'>" + ...
$(targetDiv).append(newHtml);

在javascript中构建大部分页面是不是很糟糕？

3 个答案: