最もシンプルなjQueryプラグインと、data- *属性などの新しいhtml5 bunを使用して、サイトページを翻訳するためのベストプラクティスを共有したいと思います。
したがって、目標は、開発されたWebアプリケーションに複数の言語のサポートを簡単かつ迅速に提供する能力です。
今、少しコード。 次のような単純なhtmlマークアップがあるとします。
<h1 data-translate-key="HEADING-ONE">Heading 1</h1> <p data-translate-key="SOME-TEXT">Some text in tag P</p> <p data-translate-key="ANOTHER-TEXT">another text</p>
上記のリストでわかるように、data-translate-key属性を使用して宣言された翻訳用のキーを持ついくつかのhtml要素があり、それによって辞書からテキスト自体を受け取ります。 また、タグ内には「default」というテキストがあります。
辞書の構成は、標準のJavaScriptオブジェクトを使用して実装されます。
var dict = { en: { 'SITE-TITLE': 'Site title', 'HEADING-ONE': 'Heading 1', 'SOME-TEXT': 'Some text in tag P', 'ANOTHER-TEXT': 'another text1' }, ru: { 'SITE-TITLE': ' ', 'HEADING-ONE': ' ', 'SOME-TEXT': ' P', 'ANOTHER-TEXT': ' ' } };
この例でわかるように、2つの辞書があります。 ロシア語および英語用。
今最も重要なこと。 実際にはプラグイン自体。 ほんの数行のコードがあります：
$.html5Translate = function(dict, lang){ $('[data-translate-key]').each(function(){ $(this).html( dict[ lang ][ $(this).data('translateKey') ] ); }); };
ここでは、リストからわかるように、data-translation-key属性を持つページのすべてのhtml要素を取得し、各コールバックを使用してこれらの要素の配列全体をスクロールします。 さらに、各反復で、特定の要素ごとに、どの辞書が選択されているか、およびdata-translation-key属性の値に従って、各要素にテキストを設定します。 この関数は、引数として2つの変数のみを取ります。dict-辞書オブジェクトを含み、 lang-現在使用する言語の名前を含みます。
プラグインを使用するには、次のようにします。
1. jQueryライブラリーを接続します。
2.プラグイン自体を接続します。
3.必要な要素のdata-translation-key属性を設定して、htmlドキュメントをマークアップします。
4.辞書を作成します（別のjsファイルにも接続することをお勧めします）。
5.文書のDOMの準備ができたら翻訳関数を呼び出し、関数に必要なパラメーターを指定します。
$(document).ready(function(){ $.html5Translate(dict, 'en'); });
ここでは、ご覧のとおり、翻訳関数を呼び出して、dict辞書オブジェクトを使用し、すべての要素のテキストを英語に翻訳する必要があることを示しています。
ご清聴ありがとうございました。