mVc 世界中的 HTML 缩进

发布于 2024-08-22 11:13:26 字数 2508 浏览 2 评论 0 原文

这是一个困扰我一段时间的问题,现在,缩进 HTML 代码被认为是一种很好的做法,但我对 MVC 模式中缩进代码有一些保留,这是一个(愚蠢的)示例:

HTML 代码:

<!DOCTYPE html>
<html>
<head>
<title>Testing MVC Indentation</title>
</head>

<body>

<?php View('h1', 'I am a Level 1 Header'); ?>

    <table>
        <tr>
            <td>
                <?php View('h1', 'I am a Level 1 Header Inside a Table'); ?>
            </td>
        </tr>
    </table>

</body>
</html>

要正确缩进,对 h1 视图(或partial)的第一次调用应返回:

\t<h1>I am a Level 1 Header</h1>

而对 < code>h1 视图应该返回:

\t\t\t\t<h1>I am a Level 1 Header Inside a Table</h1>

然而,h1 视图不知道它所在的缩进范围,那么它到底如何返回正确缩进的数据呢?此外,忽略视图中的缩进可能会泄露部分应用程序逻辑

对于现实世界的示例):

<body>

<h1>I am a Level 1 Header</h1>

    <table>
        <tr>
            <td>
<h1>I am a Level 1 Header Inside a Table</h1>
            </td>
        </tr>
    </table>

</body>

根本不缩进可以解决所有问题,但它也使阅读和维护变得更加困难:

<body>

<h1>I am a Level 1 Header</h1>

<table>
<tr>
<td>
<h1>I am a Level 1 Header Inside a Table</h1>
</td>
</tr>
</table>

</body>

我认为解决此问题的唯一可行的解​​决方案是使用Tidy输出缓冲,但我想知道这是否值得付出努力,因为它会不必要地进行处理和加载( ?) 慢。此外,这不会使 HTML 代码的维护变得更容易,因为它只缩进输出,而不是源代码。

我对“基本”问题感到抱歉,但过去几年我一直专注于业务逻辑,而且我与演示世界有点脱节——在过去的好日子里,我的 HTML 代码都是无缩进的,但后来我也再次使用表格来设计布局 - 现在只是想赶上。

关于这个主题的任何解决方案/见解?


相关问题:

Here is a question that has been bugging me for a while, nowadays it's considered a good practice to indent HTML code but I've some reservations indenting code in a MVC pattern, here is a (silly) example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Testing MVC Indentation</title>
</head>

<body>

<?php View('h1', 'I am a Level 1 Header'); ?>

    <table>
        <tr>
            <td>
                <?php View('h1', 'I am a Level 1 Header Inside a Table'); ?>
            </td>
        </tr>
    </table>

</body>
</html>

To indent correctly, the first call to the h1 view (or partial) should return:

\t<h1>I am a Level 1 Header</h1>

While the second call to the h1 view should return:

\t\t\t\t<h1>I am a Level 1 Header Inside a Table</h1>

The h1 view however, has no idea of the indentation scope it's in, so how the hell can it return the data properly indented? Also, ignoring indentation in views can disclose part of the application logic (check the HTML source code of this page after <div id="content"> for a real-world example):

<body>

<h1>I am a Level 1 Header</h1>

    <table>
        <tr>
            <td>
<h1>I am a Level 1 Header Inside a Table</h1>
            </td>
        </tr>
    </table>

</body>

Not indenting at all solves all problems, but it also makes it harder to read and maintain:

<body>

<h1>I am a Level 1 Header</h1>

<table>
<tr>
<td>
<h1>I am a Level 1 Header Inside a Table</h1>
</td>
</tr>
</table>

</body>

The only feasible solution I see to this problem is by using Tidy and output buffering, but I wonder if it's worth the effort since it will make processing and loading unnecessarily (?) slow. Also, this will not make it easier the maintain the HTML code since it only indents the output, not the source.

I'm sorry for the "basic" question, but I've been focusing on business logic for the last years and I've been kinda disconnected with the presentation world - in the good old days my HTML code was all unindented, but then again I also used tables to design the layout - just trying to catch up now.

Any solutions / insights on this subject?


Related Questions:

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

独行侠 2024-08-29 11:13:27

如前所述,源代码缩进和输出缩进之间存在差异。源代码的缩进可以与输出的缩进不同,因为输出是动态构造的。编写模板时,源代码的可读性是最重要的。你应该首先关注这一点!通常,输出的 HTML 缩进不是问题。

话虽如此,有两种实用方法可以消除输出中的缩进不匹配问题:

使用可以正确缩进输出的模板语言

第一个示例是 Haml,Ruby 的模板语言。它需要一个像这样的模板:

%body
  %h1 I am a Level 1 Header
  %table
    %tr
      %td
        %h1 I am a Level 1 Header Inside a Table

输出将是格式整齐的 HTML,类似于您的示例,并且全部正确缩进。

这种方法的一个明显缺点是,您并不是真正在模板中编写 HTML,而是使用另一种具有类似 HTML 语义的语言进行编写。这可能是一个问题,取决于谁将维护视图。

从输出中去除所有多余的空格,根本不缩进

一些模板语言具有删除所有多余空格的选项。 Smarty for PHP 有一个空白修剪插件,它可以例如,这项工作就很好。它通过故意使所有输出同样不缩进,完全解决了输出美化问题。它还节省了非常少量的带宽。

仅限 PHP 的解决方案是使用 ob_start() 及其 $output_callback 处理程序(即 记录在此处)。您可以编写一个简单的回调来去除过多的空格,类似于 Smarty 插件。与在输出回调中使用 Tidy 相反,这仍然允许您在页面结束之前刷新缓冲区,以加快长/慢页面的速度。

As mentioned there is a difference between source code indentation and output indentation. The indentation of the source code can be different from the indentation of the output, because the output is constructed dynamically. When writing templates, the readability of the source code is most important. You should focus on that first! Usually the HTML indentation of the output is a non-issue.

Having said that, two practical approaches to get rid of indentation mismatch in your output:

Use a templating language that can properly indent the output

One example of the first is Haml, a templating language for Ruby. It takes a template like this:

%body
  %h1 I am a Level 1 Header
  %table
    %tr
      %td
        %h1 I am a Level 1 Header Inside a Table

The output will be neatly formatted HTML similar to your example, all properly indented.

One obvious disadvantage of this approach is that you're not really writing HTML in your templates, you're writing in a different language with HTML-like semantics. This can be a problem, depending on who will maintain the views.

Strip all superfluous whitespace from the output, don't indent at all

Some template languages have options to remove all superfluous whitespace. Smarty for PHP has a whitespace trimming plugin that does this job nicely, for example. It completely works around the output beautification problem by purposely making all output equally non-indented. It also saves a very marginal amount of bandwidth.

A PHP-only solution would be to use ob_start() with its $output_callback handler (which is documented here). You can write a simple callback that strips the excessive whitespace, similar to the Smarty plugin. Contrary to using Tidy in the output callback, this will still allow you to flush the buffer before the end of the page to speed up long/slow pages.

梦途 2024-08-29 11:13:27

抱歉添加第三个答案!已经有一段时间了,我宁愿添加一个答案,请不要为此否决我。我只是认为应该在这里说:

这似乎有效,又名有 2 个不同的缩进“线程”,一个用于 PHP,一个用于 HTML:

<table>
<?foreach($list->sections as $sKey => $section) { ?>
    <tr><td><h4><?= $section->label ?></h4></td></tr>
<?  foreach($section->items as $iKey =>  $item) { ?>
    <tr><td><?= $item->label ?></td></tr>
<?  } ?>
<?} ?>
</table>

始终让 php 标记从行的开头开始,并在行内缩进PHP 块代码,生成的代码保持干净:

<table>
    <tr><td><h4>Books 1</h4></td></tr>
    <tr><td>Some Book</td></tr>
    <tr><td>Some Other Book</td></tr>
    <tr><td><h4>Books 2</h4></td></tr>
    <tr><td>Some Book in List 2</td></tr>
</table>

PHP 和 HTML 的缩进逻辑保留在源文件中,尽管每个都是独立的。

Sorry for adding a third answer! It's a been a while, and I'd rather add an answer, please don't down-vote me for that. I just think this should be said here:

This seems to work, aka having 2 different "threads" of indentation, one for PHP and one for HTML:

<table>
<?foreach($list->sections as $sKey => $section) { ?>
    <tr><td><h4><?= $section->label ?></h4></td></tr>
<?  foreach($section->items as $iKey =>  $item) { ?>
    <tr><td><?= $item->label ?></td></tr>
<?  } ?>
<?} ?>
</table>

By always having the php tag start at the beginning of the line, and indent inside the php block code, the resulting code stays clean:

<table>
    <tr><td><h4>Books 1</h4></td></tr>
    <tr><td>Some Book</td></tr>
    <tr><td>Some Other Book</td></tr>
    <tr><td><h4>Books 2</h4></td></tr>
    <tr><td>Some Book in List 2</td></tr>
</table>

And the indentantion logic of the PHP and of the HTML are kept in the source file, albeit each on it's own.

情话难免假 2024-08-29 11:13:27

我认为这里可以发明一些东西来跟踪缩进。

我相信,同时正确缩进 PHP 和正确缩进 HTML 是可能的,但是需要编写代码来处理这个问题,无论是作为 PHP 扩展还是库(这远不那么优雅和高效)。

我的第一个猜测是 PHP 跟踪 HTML 的缩进,当打印新行时,恢复到上一个​​缩进级别,就像大多数 IDE 在输入 Enter 时所做的那样。
PHP 程序员可以使用如下函数来控制它(我现在正在制作这些东西):

  • tab($n) :将缩进级别 $n tabs 向右移动(添加 $n tabs)
  • detab ($n) :从缩进级别删除 $n 个制表
  • 符 stop() :停止缩进。不会将任何选项卡添加到输出中。这对于 HTML PRE 标记很有用。
  • resume() :在 stop() 之后恢复上一级的缩进。

I think something can be invented here to keep track of indenting.

It is possible, I believe, to have properly indented PHP and properly indented HTML at the same time, but code needs to be written to handle that, either as a PHP extension or a library (which is much less elegant and efficient).

My first guess would be for PHP to keep track of the indentation of the HTML, and when a new line is printed, resume at the previous level of indentation, sort of what most IDE's do when you type enter.
The PHP programmer can be given control over this with the functions like these (I'm just making this stuff up right now):

  • tab($n) : move the indentation level $n tabs to the right (add $n tabs)
  • detab($n) : remove $n tabs from the level of indentation
  • stop() : stops indentation. no tabs will be added to output. this is useful for HTML PRE tags.
  • resume() : resume indentation at the previous level after a stop().
森罗 2024-08-29 11:13:27

我有时会在双引号字符串中使用 \t 来实现 HTML 的一些基本缩进。它可以帮助我调试东西。另外,我尽可能将 HTML 保留在模板中,即使这意味着用 foreach 循环来填充我的模板。在模板(MVC 中称为“视图”)中,PHP 代码缩进通常位于 HTML 代码之后。

我还可以向生成 HTML 的函数添加一个参数,以使它们“缩进感知”示例:

buildSomeHtmlList($data, $indent=0)

这会导致大部分缩进 HTML,这适合我。

顺便说一句,在您的示例中,这不是应该发生的情况,AFAIk,表内的 H1 通常应该正确缩进,因为 PHP 输出从“<?”开始,此时制表符已经被打印。

What I sometimes do is use \t in double-quoted strings for some basic indentation of HTML. It helps me debug stuff. Also, I keep the HTML inside templates as much as possible, even if it means riddling my templates with foreach loops. In the template (known as "view" in MVC), the PHP code indentation usually follows the HTML code.

I might also add an argument to functions that generate HTML, to make them "indent aware" example:

buildSomeHtmlList($data, $indent=0)

That results into mostly indented HTML, and that suits me.

BTW, in your example, this is not what is supposed to happen, AFAIk, the H1 inside the table should be properly indented, normally, since the PHP output starts at "<?", at which point the tabs have already been printed.

三五鸿雁 2024-08-29 11:13:26

我想说,HTML源代码 缩进之间存在差异。在典型的 MVC 视图中,您使用源代码,我认为应该以可读的方式缩进。

但实际的 HTML 输出是不同的。当然,混乱的缩进源看起来有点不专业(这就是为什么我有时倾向于完全删除任何缩进,但这通常涉及你所说的一些 HTML 后处理),但对于浏览器本身来说,如果根本不重要,如果我确实需要查看源代码,我将使用格式化程序或 Firebug,它以格式良好的方式显示所有 DOM 元素。

I would say, that there is a difference between HTML and Source Code Indentation. In a typical MVC View you use source code which I think should be indented in a readable fashion.

The actual HTML output though is a different thing. Of course chaoticly indented source looks kind of unprofessional (this is why I sometimes tend to just remove any indentation at all but that usually involves as you said some HTML post processing), but for the Browser itself if doesn't matter at all and if I really need to view the source I will use a formatter or Firebug which shows all DOM elements in a nicely formatted way.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文