将HTML放入Javascript的优点

Advantages Of Putting HTML in Javascript

本文关键字：Javascript HTML 放入      更新时间：2023-09-26

我想知道把html放在javascript中还是放在html文件中更好。

例如，让我的js文件有这个

$('<div>').addClass('test').append(
                        $('<p>').text('test1'),
                        $('<span>').text('test2'),
                        $('<span>').text('test3')
                      ).insertAfter( $('#test1') );

与

我的html文件看起来像这个

<div id="#test1"></div>
<div class="test">
    <p>test1</p>
    <span>test2</span>
    <span>test3</span>
</div>

和js文件有：

$（'.test'）.show（）；

高度主观，当然取决于上下文。

在网页中，大多数内容都是已知的。没有理由不把内容放在HTML中，并使用CSS（可能在真正需要的时候使用Javascript）进行样式化。

然而，在web应用程序中，并不是众所周知的。文档更加动态，需要使用Javascript来添加/删除元素。

顺便说一句，你的两段代码做了两件不同的事情。在第一个例子中，你给它一个test的class，在第二个例子中你给它#test1的ID。这是一个无效的ID，应该是test1。该ID的selector将是#test1，这可能导致一些混淆

这可能只适用于直接的网页，但对于web应用程序，您应该真正研究mustache.js等模板系统(https://github.com/janl/mustache.js)或Handlebars.js(http://handlebarsjs.com/)。

这样，您就可以将HTML保存在外部模板文件中，并使用Javascript对象和数组来填充数据。例如，胡子模板可能看起来像：

<div id="{{id}}"></div>
<div class="{{class}}">
    <p>{{name}}</p>
    <span>{{prop1}}</span>
    <span>{{prop2}}</span>
</div>

你会有一个像这样的物体来填充它：

var obj = {
    id: "myID",
    class: "some classes",
    name: "Martin Brennan",
    prop1: "whatever",
    prop2: 22
}

您可以将模板与这样的对象一起使用（在将模板加载到变量中之后）：

Mustache.render(template, obj)

正如Jeremy J Starcher所说，这是非常主观的，我建议你尝试一下模板系统，看看你是否能在项目中使用它们的价值。

当然，第二个选项更好更快。

如果您使用

$('<div>').addClass('test').append(
                        $('<p>').text('test1'),
                        $('<span>').text('test2'),
                        $('<span>').text('test3')
                      ).insertAfter( $('#test1') );

浏览器必须解析JavaScript。每次使用$()时，您都会创建一个对象，该对象具有许多您不使用的属性和方法（无用！）。当然，浏览器也必须解析HTML。

但是如果你使用

<div id="#test1"></div>
<div class="test">
    <p>test1</p>
    <span>test2</span>
    <span>test3</span>
</div>

浏览器只需要解析HTML，而且速度更快。

使用第二种硬编码HTML方法的最大好处之一是，它仍然可以显示给禁用JavaScript的人。很难确切核实有多少用户没有启用JS（因为大多数跟踪器都使用JS…），但我听到的最后一个猜测是大约5%的互联网用户。

故事的寓意-让你的网站在没有JavaScript的情况下工作。然后添加JavaScript，使其看起来更漂亮/添加额外的（非必要的）功能。

简单的答案是静态内容应该使用普通标记创建，而Javascript应该用于动态内容。

此外，在许多情况下，两者都可以使用。您可以使用style="display:none"进行静态HTML标记，然后使用Javascript更改样式，使其根据需要显示和消失。

相关文章：