2

在我正在进行的一个现有项目中，我注意到许多开发人员正在使用 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 文档的一部分？我认为人们会希望尽量减少 javascript html 生成，因为它更令人困惑且更难编写。此外，javascript html 生成必须损害性能（是吗？）

我是一个“较新”的 javascript 开发人员，所以也许我遗漏了一些东西。我想说点什么，但我是“新人”，所以也许我没有得到“它”

谢谢

4

3 回答 3

10

这很可能是我见过小猫被杀的最可怕的方式。现在，这不仅仅是你杀死的一只小猫：像这样的每一行都会杀死成千上万只小猫。还有小狗。

不要这样做。这是错的。这不好。这太糟糕了。它是可怕的。这是地狱。没什么好说的。

在更严重的情况下...

  1. 该代码甚至无法按预期工作。请参阅对您的问题的评论。
  2. HTML 是内容，JavaScript 是行为。您完全没有令人信服的理由将两者混合在一起。
  3. 每次调用 DOM 时，您都有时间去喝杯咖啡。你打append了这么多次电话，光是看到就刺痛了我的眼睛。
于 2013-07-31T14:46:23.410 回答
3

从哲学的角度来看，我不得不说这是一种不好的做法。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/之类的库配对

祝你好运！

于 2013-07-31T14:49:10.873 回答
2

好吧，既然你是新人，在采取行动之前先确认你的怀疑是一件好事。也就是说，我很确定这是一个惰性编码的例子。事实上，实际上还有更短的方法来编写您发布的代码，并且这些更短的方法不会极大地延迟浏览器。

一方面，我最喜欢编写大部分页面的方式是使用模板系统——你将平面 HTML 文件放在你的 web 目录中，或者放在页面的某种未显示部分中，然后在需要时将它们导入Javascript。许多图书馆可以帮助解决这个问题。

但看在上帝的份上，即使你懒得这样做，也不要使用多个附加函数来执行此操作。这意味着浏览器在每次调用函数时都会找出新的 HTML 元素和未关闭的标签，通常会重写自己的工作。至少，在调用 jQuery.append ONCE 之前一点一点地将 HTML 字符串附加在一起。

var newHtml = "<div" +
  "   <div class='info'>" + ...
$(targetDiv).append(newHtml);
于 2013-07-31T14:50:57.503 回答