このソリューションは、HTML をほとんど使用しない ajax アプリケーションで使用するものです (すべてデータ クライアント側から生成されます)。
最初の部分は、URL で言語を指定できるようにし (&lang=it
たとえば、追加することにより)、それがローカル ストレージに保存されることを保証します (ブラウザーの永続的なユーザー設定)。
myapp.available_langs = ['en', 'fr', 'it']; // the first one is the default language
// Exemples :
// {en:'hi', fr:'Bonjour'}
// {fr:'Bonjour'}
myapp.loc = function(map) {
if (map[myapp.lang]) return map[myapp.lang];
for (var i=0; i<myapp.available_langs.length; i++) {
if (map[myapp.available_langs[i]]) return map[myapp.available_langs[i]];
}
return "-label not found-";
};
myapp.getUrlParameter = function(name, defaultValue) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var results = new RegExp( "[\\?&]"+name+"=([^&#]*)" )
.exec( document.location.href );
if( results == null ) return defaultValue;
else return decodeURIComponent(results[1]);
};
myapp = {};
myapp.lang = localStorage['lang'] = myapp.getUrlParameter('lang', localStorage['lang']||myapp.available_langs[0]);
そして、他の場所では次のように使用されます。
$('body').append('<div product id=product_header>\
...
<tr>\
<td> '+myapp.loc({en:'cut',fr:'date'})+': <span id=product_cutdate>?</span></td>\
<td> '+myapp.loc({en:'grade',fr:'qualité'})+': <span id=product_grade>?</span></td>\
<td> '+myapp.loc({en:'length',fr:'longueur'})+': <span id=product_length>?</span> m</td>\
<td> '+myapp.loc({en:'thickness',fr:'épaisseur'})+': <span id=product_thickness>?</span> mm</td>\
<td> '+myapp.loc({en:'width',fr:'largeur'})+': <span id=product_width>?</span> m</td>\
</tr>\
ユーザーエージェントも使用することを選択するかもしれませんが、実際の企業での使用ではほとんど役に立たないと思います。i18n ソリューションは非常に多様であることに注意してください。私はこれを使用することを主張していません。これは単に私が好きなパターンです。多くの人は、外部プロパティ ファイルで文字列を抽出することを好みますが、私の経験では、翻訳がより悪くなり、管理が難しくなります (1 つのチームだけが関係するすべての言語を話し、10 言語を持っていない限り)。