gpt4 book ai didi

javascript - 如何决定有多少 HTML 必须由 JavaScript 生成?

转载 作者:行者123 更新时间:2023-11-28 01:55:23 26 4
gpt4 key购买 nike

<分区>

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

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

在其中,脚本附加了日历,这是一个包含theadtbodytfoot 部分的表格。

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

JavaScript monthly calendar preview

您可以想象,theadtfoot 可能因本地化而不同:在英语中,工作日是“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。您对此有何看法?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com