2

JavaScript の月間カレンダーを作成しました。すべての HTML はスクリプトによって動的に生成されます。
利点は、JS および CSS ファイルを含める前に、HTML に必要なのはコンテナーのみであるということです。

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

その中に、スクリプトはカレンダーを追加します。カレンダーは、thead、tbody、およびtfootセクションを持つテーブルです。

はtbody単に日のグリッドを表示するだけなので、ローカライズする必要はありません。theadおよびには、ユーザー操作用のtfootオブジェクト (前または翌月/年に移動するためのリンク、曜日名、およびカレンダーを閉じるためのリンク) が含まれています。

JavaScript マンスリー カレンダーのプレビュー

ご想像のとおり、ローカリゼーションごとに異なる場合があります。英語の平日は「Mo、Tu、We、Th、Fr、Sa、Su」ですが、スペイン語では「Lu、Ma、Mi、Ju、Vi、Sa」ですthead。tfoot、 行う"。
月の名前についても同じ問題が発生します。

これまでのところ、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 が多いほど、クライアントにとって複雑になります。ハードコード化されたアプローチやマルチファイル ソリューションを選択すればするほど、すべてを維持するのがより複雑で煩雑になる可能性があります。コンピューティング能力は一般的にはもはや問題ではありませんが、モバイル クライアントやタブレット クライアントはすべて時代遅れの OS やブラウザーを使用していることがあります。それらすべてをサポートしたい場合は、できるだけ少ない JavaScript を使用します。

カレンダーが 1 か所にしか表示されず、その場所や外観が変わらない場合は、カレンダーをハードコードしてから、ユーザーが選択した言語に応じて LOCALE のみを変更することをお勧めします。PHP を使用する場合は、JavaScript のアプローチと同様に、目的の言語ファイルを正しい構成で含めるだけでこれを行うことができ、変数を必要な場所に直接配置できます。逆の場合は、javascript ベースのモジュールのみを作成してカレンダーを生成し、php を使用してサーバー側に 1 つの 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>

...
于 2013-06-21T10:45:38.557 に答える