如何决定 JavaScript 必须生成多少 HTML？ [关闭]

Question

我开发了一个 JavaScript 月历，所有的 HTML 都是由脚本动态生成的。
好处是，在包含 JS 和 CSS 文件之前，HTML 只需要一个容器：

<div id="calendar-box"></div>

脚本在其中附加了日历，这是一个带有 thead、tbody 和 tfoot 部分的表格。 p>

tbody 仅显示日期网格，因此无需本地化。 thead 和 tfoot 包含用于用户交互的对象（用于移动到上一个或下一个月/年的链接、工作日名称和关闭日历的链接）。

您可以想象，thead 和 tfoot 可能因本地化而异：在英语中，工作日是“Mo, Tu, We, Th, Fr, Sa, Su”，而在西班牙语中它们会是“Lu,马、米、菊、六、萨、做”。
月份名称也会出现同样的问题。

到目前为止，我使用 config 选项解决了这个问题，该选项定义了月份、工作日和其他模板部分的数组：

config = {
    // other config stuff...  
    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    weekDayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
    closeText: 'Close' // text to display in the "close" button
};

但在我看来这不是最好的解决方案；我通常倾向于尽可能减少 JavaScript 中的 LOCALE。除此之外，thead 还包含很多 JavaScript 生成的 HTML，这也不太好。

我在similar questions 看到有人建议使用 JavaScript 模板插件：

var t = $.template('<div><img src="${url}" />${name}</div>');

但它仍然是 JS 生成的 HTML；在这种情况下，它作为template 方法的参数提供。
因此，我正在评估让脚本生成唯一的 tbody 部分，这是逻辑部分最有效的部分，并在页面中提供表格其余部分的静态 HTML 部分，如下所示：

<table class="calendar">
    <thead>
        <tr>
            <td colspan="2"><a href="#">&larr;</a></td>
            <td colspan="3">
                <div class="month">June</div><div class="year">2013</div>
            </td>
            <td colspan="2"><a href="#">&lrarr;</a></td>
        </tr>
        <tr class="weekDays">
            <td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td><td>Su</td>
        </tr>
    </thead>
    <tbody>
        <!-- only this part is filled by JavaScript -->
    </tbody>
    <tfoot>
        <tr><td colspan="7"><a href="#">Close</a></td></tr>
    </tfoot>
</table>

这是一个混合解决方案，但允许通过服务器端模板管理 LOCALE。 您对此有何看法？

Answer 1

性能和可用性之间只有一线之隔。您使用的 javascript 越多，客户端就越复杂。您选择的硬编码方法和多文件解决方案越多，维护所有内容的过程就越复杂和混乱。计算能力通常不再是问题，但是我们再次拥有所有那些带有有时过时的操作系统和浏览器的移动和平板电脑客户端。如果你想支持所有这些，我会使用尽可能少的 javascript。

如果您的日历仅显示在一个地方并且从不更改其位置或外观，我建议对其进行硬编码，然后仅根据用户选择的语言更改 LOCALE。如果您使用 php，您可以通过简单地包含所需的语言文件和正确的配置来做到这一点，就像在您的 javascript 方法中一样，然后直接将变量放在您想要的任何位置。如果情况相反，则编写一个完全基于 javascript 的模块来生成日历，并在服务器端包含一个带有 php 的 javascript LOCALE 文件，然后使用它。

语言-EN.php：

<?php
  return array(
    "monthNames" => array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
    "weekDayNames" => array('Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'),
    "closeText" => 'Close' // text to display in the "close" button
  );
?>

index.php

<?php
  $LOCALES = include("language-EN.php");
?>

...

<table class="calendar">
<thead>
    <tr>
        <td colspan="2"><a href="#">&larr;</a></td>
        <td colspan="3">
            <div class="month">June</div><div class="year">2013</div>
        </td>
        <td colspan="2"><a href="#">&lrarr;</a></td>
    </tr>
    <tr class="weekDays">
        <td><?php echo $LOCALES['weekDayNames'][0] ?></td><td><?php echo $LOCALES['weekDayNames'][1] ?></td><td><?php echo $LOCALES['weekDayNames'][2] ?></td><td><?php echo $LOCALES['weekDayNames'][3] ?></td><td><?php echo $LOCALES['weekDayNames'][4] ?></td><td><?php echo $LOCALES['weekDayNames'][5] ?></td><td><?php echo $LOCALES['weekDayNames'][6] ?></td>
    </tr>

...