0

我想知道将您的 html 放在 javascript 或 html 文件中是否更好。

例如让我的 js 文件有这个

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

VS

我的 html 文件看起来像这样

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

并且 js 文件有：

$('.test').show();

4

5 回答 5

1

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

在网页中，大部分内容都是已知的。没有理由不将内容放在 HTML 中并使用 CSS（如果真的需要，可能还有 Javascript）来设置样式。

然而，在 Web 应用程序中，事情并不是那么为人所知。该文档更加动态，并且需要使用 Javascript 添加/删除元素。

顺便说一句，你的两段代码做了两件不同的事情。在第一个示例中，您给它一个classof test，而在第二个示例中，您给它一个IDof #test1。这是无效的ID，应该是test1. 该selectorID#test1可能会导致一些混乱。

于 2012-09-09T21:35:08.027 回答
1

这对于直接的网页可能没问题，但对于 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 所说的那样，这是非常主观的，我建议您尝试使用模板系统，看看您是否可以看到在您的项目中使用它们的价值。

于 2012-09-09T22:44:34.520 回答
0

当然，第二种选择更好更快。

如果你使用

$('<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，而且速度要快得多。

于 2012-09-09T21:14:57.127 回答
0

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

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

于 2012-09-09T21:19:44.287 回答
0

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

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

于 2012-09-09T22:35:55.430 回答