javascript で DOM Manipulating を使用する多言語 Web サイトのベスト プラクティスは何ですか? JavaScript を使用して、Web サイトの動的な部分をいくつか構築しています。私が最初に考えたのは、テキスト文字列と言語コードをインデックスとして持つ配列を使用することでした。これは良い考えですか？
98725 次
10 に答える
84
以前に多言語サイトを構築したことがある場合 (それほど大きなサイトではないため、拡張性が低い可能性があります)、一連の「言語」ファイルを保持しています。
- lang.en.js
- lang.it.js
- lang.fr.js
各ファイルは、基本的にキーワードから言語フレーズへの単なるマップであるオブジェクトを宣言します。
// lang.en.js
lang = {
greeting : "Hello"
};
// lang.fr.js
lang = {
greeting : "Bonjour"
};
これらのファイルの 1 つを動的にロードしてから、マップからキーを参照するだけです。
document.onload = function() {
alert(lang.greeting);
};
もちろん、これを行う方法は他にもたくさんありますが、このスタイルを行う方法は他にもたくさんありますが、より良い方法があります。すべてを関数にカプセル化して、「辞書」にないフレーズを適切に処理できるようにするか、すべてを実行することさえできます。 OOP を使用して、ファイルの動的インクルードを管理できるようにすると、おそらく言語セレクターを描画することさえできます。
var l = new Language('en');
l.get('greeting');
于 2008-10-23T07:46:12.390 に答える
60
多言語サポートを設計する際には、次の点に注意する必要があります。
1 - コードをデータから分離します (つまり、文字列を関数に直接ハードコーディングしないでください)。
2 - ローカリゼーションの違いに対処するための書式設定フック関数を作成します。多くの理由から、フォーマット可能な文字列 ( "{0}" ) を許可することは、連結 ( "Welcome to" + value ) よりも優れています。
- 一部の言語では、数値は 1,234,567.00 ではなく 1.234.678,00 のようにフォーマットされます。
- 複数形は、単数形の末尾に「s」を追加するほど単純ではないことがよくあります。
- 文法規則は異なり、物事の順序に影響を与える可能性があるため、翻訳フックの後に動的データを追加できるようにする必要があります。たとえば、「{0} へようこそ」は日本語で「{0}へようこそ」に変わりますほとんどすべての言語です。
3 -翻訳フックの実行後に実際に文字列をフォーマットできることを確認して、キーを再利用できるようにします。
4 -どのような状況下でも、データベース出力を変換ユーティリティにフックしないでください。多言語データがある場合は、データベースに個別のテーブル/行を作成してください。私は、人々がこの非常に簡単に間違っているのをかなり頻繁に見てきました (通常は、国や州/州のフォームで)。
5 - キーを作成するための明示的なコーディング プラクティス ルールを作成します。フォーマッタ ユーティリティ関数 ( translate("hello world"のようなもの)はキーをパラメーターとして受け取ります。キーがわずかに異なると、メンテナンスが非常に煩わしくなります。たとえば、次の例では 3 つのキーが作成される可能性があります。 「名前を入力してください」、「名前を入力してください:」、「名前を入力してください:」. 1 つの形式 (コロンなし、トリミング済みなど) を選択し、コード レビューで不一致をキャッチします。false をトリガーする可能性があるため、このフィルタリングをプログラムで実行しないでくださいポジティブ。
6 - 翻訳テーブルで HTML マークアップが必要になる可能性があることに注意してください (たとえば、文中の単語を太字にする必要がある場合や、医学的参考文献の脚注が必要な場合)。これを広範囲にテストします。
7 - 言語文字列をインポートするにはいくつかの方法があります。理想的には、language.lang.js ファイルの複数のバージョンを用意し、サーバー側のコードでそれらを切り替え、HTML ファイルの下部からファイルを参照する必要があります。AJAX 経由でファイルをプルすることも代替手段ですが、遅延が発生する可能性があります。ファイル キャッシュの利点が失われるため、language.js をメイン コード ファイルにマージすることはお勧めできません。
8 -ターゲット言語でテストします。これはばかげているように聞こえますが、プログラマーがキーに「é」が存在するかどうかをわざわざチェックしなかったため、重大なバグを見たことがあります。
于 2008-10-23T12:45:03.940 に答える
6
javascriptでi18nに関する素晴らしい記事を見つけました：http：
//24ways.org/2007/javascript-internationalisation
i18n + javascriptを使用した単純なグーグル検索では、多くの選択肢が明らかになりますが。
結局、それはあなたがそれをどれだけ深くしたいかに依存します。いくつかの言語では、1つのファイルで十分です。
Jqueryのようなフレームワークを使用し、スパンを使用して（クラスで）テキストを識別してから、各スパンのIDを使用して、選択した言語で対応するテキストを検索できます。
1行のJqueryが完了しました。
于 2008-10-23T08:15:23.657 に答える
5
nickf と Leo による優れた回答を読んだ後、次の CommonJS スタイルの language.js を作成して、すべての文字列を管理しました (オプションで、それらをフォーマットするためのMustacheも使用しました)。
var Mustache = require('mustache');
var LANGUAGE = {
general: {
welcome: "Welcome {{name}}!"
}
};
function _get_string(key) {
var parts = key.split('.');
var result = LANGUAGE, i;
for (i = 0; i < parts.length; ++i) {
result = result[parts[i]];
}
return result;
}
module.exports = function(key, params) {
var str = _get_string(key);
if (!params || _.isEmpty(params)) {
return str;
}
return Mustache.render(str, params);
};
そして、これは私が文字列を取得する方法です:
var L = require('language');
var the_string = L('general.welcome', {name='Joe'});
于 2015-05-12T12:53:32.217 に答える
3
このようにして、複数の単語で複数の言語に 1 つの js コードを使用できます。
var strings = new Object();
if(navigator.browserLanguage){
lang = navigator.browserLanguage;
}else{
lang = navigator.language;
}
lang = lang.substr(0,2).toLowerCase();
if(lang=='fa'){/////////////////////////////Persian////////////////////////////////////////////////////
strings["Contents"] = "فهرست";
strings["Index"] = "شاخص";
strings["Search"] = "جستجو";
strings["Bookmark"] = "ذخیره";
strings["Loading the data for search..."] = "در حال جسنجوی متن...";
strings["Type in the word(s) to search for:"] = "لغت مد نظر خود را اینجا تایپ کنید:";
strings["Search title only"] = "جستجو بر اساس عنوان";
strings["Search previous results"] = "جستجو در نتایج قبلی";
strings["Display"] = "نمایش";
strings["No topics found!"] = "موردی یافت نشد!";
strings["Type in the keyword to find:"] = "کلیدواژه برای یافتن تایپ کنید";
strings["Show all"] = "نمایش همه";
strings["Hide all"] = "پنهان کردن";
strings["Previous"] = "قبلی";
strings["Next"] = "بعدی";
strings["Loading table of contents..."] = "در حال بارگزاری جدول فهرست...";
strings["Topics:"] = "عنوان ها";
strings["Current topic:"] = "عنوان جاری:";
strings["Remove"] = "پاک کردن";
strings["Add"] = "افزودن";
}else{//////////////////////////////////////English///////////////////////////////////////////////////
strings["Contents"] = "Contents";
strings["Index"] = "Index";
strings["Search"] = "Search";
strings["Bookmark"] = "Bookmark";
strings["Loading the data for search..."] = "Loading the data for search...";
strings["Type in the word(s) to search for:"] = "Type in the word(s) to search for:";
strings["Search title only"] = "Search title only";
strings["Search previous results"] = "Search previous results";
strings["Display"] = "Display";
strings["No topics found!"] = "No topics found!";
strings["Type in the keyword to find:"] = "Type in the keyword to find:";
strings["Show all"] = "Show all";
strings["Hide all"] = "Hide all";
strings["Previous"] = "Previous";
strings["Next"] = "Next";
strings["Loading table of contents..."] = "Loading table of contents...";
strings["Topics:"] = "Topics:";
strings["Current topic:"] = "Current topic:";
strings["Remove"] = "Remove";
strings["Add"] = "Add";
}
このコードに別の言語を追加して、html コードにオブジェクトを設定できます。私はペルシャ語を使いました ペルシア語と英語は、If-Else ステートメントでコードのこの部分のコピーを作成するだけで、任意の型言語を使用できます。
于 2019-09-11T04:57:12.963 に答える
1
従来のJSコンポーネントで何が行われたかを調べる必要があります。Dojo、Ext、FCKEditor、TinyMCEなどを取り上げてください。優れたアイデアがたくさん見つかります。
通常、これはタグに設定したある種の属性になり、タグのコンテンツを、属性の値に基づいて、翻訳ファイルで見つかった翻訳に置き換えます。
覚えておくべきことの1つは、言語セットの進化です（コードが進化するとき、全体を再翻訳する必要があるかどうか）。翻訳はPOファイル（Gnu Gettext）に保存され、POファイルをすぐに使用できるJSファイルに変換するスクリプトがあります。
加えて：
- 常にUTF-8を使用してください-これはばかげているように聞こえますが、最初からutf-8（HTMLヘッド+ JSエンコーディング）を使用していない場合は、すぐに破産します。
- 翻訳のキーとして英語の文字列を使用します。これにより、次のような結果になることはありません。lang.Greeting ='Hello world'-but lang ['Hello world'] ='Hello world';
于 2008-10-24T11:31:40.950 に答える