2

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

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

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

简单地显示天的tbody网格，所以没有什么需要本地化的。theadand包含用于用户交互的tfoot对象（移动到上一个或下一个月/年的链接、工作日名称和关闭日历的链接）。

JavaScript 月历预览

正如您可以想象的那样，thead并且tfoot每个本地化可能会有所不同：在英语中，工作日是“Mo, Tu, We, Th, Fr, Sa, Su”，而在西班牙语中它们会是“Lu, Ma, Mi, Ju, Vi, Sa ， 做”。
月份名称也会出现同样的问题。

到目前为止，我使用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，这也不是很好。

我在类似的问题中看到有人建议使用 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。您对此有何看法？

4

1 回答 1

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
  );
?>

索引.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>

...
于 2013-06-21T10:45:38.557 回答