Question

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

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

在其中，脚本会附加日历，这是一个包含 thead ， tbody 和 tfoot 部分的表格。

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

JavaScript monthly calendar preview

你可以想象，thead和tfoot每个本地化可能会有所不同：英语工作日是“Mo，Tu，We，Th，Fr，Sa，Su”，而西班牙语则是是“Lu，Ma，Mi，Ju，Vi，Sa，Do” 月份名称出现同样的问题。

就目前而言，我使用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>

...

如何确定HTML必须生成多少HTML？

1 个答案: