jQuery.i18n に基づいて Web フロントエンドの国際化を実装する-jsチュートリアル-php.cn

jQuery.i18n に基づいて Web フロントエンドの国際化を実装する

php中世界最好的语言

リリース： 2018-05-12 15:34:05

オリジナル

2881 人が閲覧しました

今回はjQuery.i18nをベースにWebフロントエンドの国際化を実装する際の注意事項をご紹介します。

jQuery.i18n.properties を紹介する前に、まず国際化とは何かを見てみましょう。国際化を表す英語は次のとおりです。 Internationalization、i18n とも呼ばれます。「i」は単語の最初の文字、「18」は「i」と「n」の間の単語の数、「n」は最後の文字を表します。単語の一文字の。コンピューティングにおける国際化とは、さまざまな地域および言語環境に適応できるソフトウェアを設計するプロセスを指します。

jQuery.i18n.properties は、軽量の jQuery 国際化プラグインです。 Java のリソースファイルと同様に、jQuery.i18n.properties は .properties ファイルを使用して JavaScript を国際化します。 jQuery.i18n.properties プラグインは、ユーザーが指定した (またはブラウザーが提供した) 言語と国コードに従って、接尾辞「.properties」を持つ対応するリソースファイルを解析します (ISO-639 および ISO-3166 に準拠)規格）。

リソースファイルを使用して国際化を実現することは、一般的な方法です。たとえば、Android アプリケーションは、言語と国のエンコードに基づいて名前が付けられたリソースファイルを使用して、国際化を実現できます。 jQuery.i18n.properties プラグインのリソースファイルには「.properties」という接尾辞が付けられ、リージョン関連のキーと値のペアが含まれています。 Java プログラムでは、国際化を実現するために .properties サフィックスが付いたリソースファイルも使用できることがわかっているため、この方法は Java プログラムとフロントエンド JavaScript プログラム間でリソースファイルを共有する場合に特に便利です。 jQuery.i18n.properties プラグインは、最初にデフォルトのリソースファイル (例: strings.properties) をロードし、次に特定のロケールのリソースファイル (例: strings_zh.properties) をロードします。特定の言語が提供されていない場合は、デフォルト値が常に有効です。開発者は、リソースファイル内のキーを JavaScript 変数 (または関数) またはマップとして使用できます。

以下は、プロジェクトでの i18n の使用方法の紹介です。説明すると、ここでは i18n の一部のメソッドを使用したことがなく、ほんの一部しか使用していないことがわかりました。私たちのプロジェクトに適した方法。

1. まず、リソースファイルを作成します:

locales/en-us/ns.jsp.json:

{ 
 "reSendMail": { 
  "emailSendFail": "Failed to send the email", 
  "emailHasSendToYourEmail": "The email has be sent to your email address. " 
 }, 
 "login": { 
  "pleaseWriteUserName": "Please input your username", 
  "pleaseWritePassword": "Please input your password " 
 }, 
 "activeRegist": { 
  "thisUserEmailHasUsed":"Email has already been used", 
  "thisUserNameHasUsed":"User Name has already been used", 
  "4to30Char":"Please enter 4-30 characters", 
  "1to50Char":"Please enter 1-50 characters", 
  "1to16Linkman":"Please enter 1-16 characters", 
  "loginPage":"Login Page", 
  "EmailMustNotEmpty": "Email can't be blank", 
  "PWDNotEmpty": "Password can't be blank", 
  "nameNotEmpty":"Name can't be blank", 
  "conpanyNotEmpty":"Company can't be blank", 
  "qqNotEmpty":"QQ can not be blank", 
  "phoneNotEmpty":"Mobile can not be blank", 
  "least50charEmailAddress":"No more than 50 characters for email address", 
  "enterEmailAddressLikeThis":"Email address format 'abc@abc.com'", 
  "enter6To32Character":"Please enter 6-32 characters", 
  "NameMost30Character":"No more than 30 characters for name", 
  "QQTypeIsWrong":"Incorrent QQ format", 
  "phoneTypeNotCorrect":"Incorrent mobile format", 
  "thisEmailHasRegistered":"Email address has already been registered", 
  "registerFail":"Registration failed!", 
   "TwoTimesPWDIsDifferent":"The passwords you entered do not match. Please try again." 
 } 
}

ログイン後にコピー

中国語設定ファイルフォーマットは書きません。モジュールの形式で記述されたマップを使用することは同じです。

2. jsp ページに i18n.js を導入し、i18n を初期化します

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/i18next.js"></script> 
<script type="text/javascript"> 
i18n.init({ 
 lng:'${sessionScope.language }', 
 ns: { namespaces: ['ns.jsp'], defaultNs: 'ns.jsp'}, 
 useLocalStorage: false 
}); 
</script>

ログイン後にコピー

3. js リファレンス

var emailflag = false; 
function checkemail() { 
 check('email', 'emailmessage'); 
 var email = $("#email").attr("value"); 
 if(email != null && email != "") { 
  if(email.length > 50) { 
   setpInfo("emailp", i18n.t('activeRegist.least50charEmailAddress'), 1);//请输入50字符内的邮箱地址 
  } else { 
   if(isEmail(email, $("#email"))) { 
    checkemailForServer(email); 
   } else { 
    setpInfo("emailp", i18n.t('activeRegist.enterEmailAddressLikeThis'), 1);//请输入邮箱地址，格式为abc@abc.com 
   } 
  } 
 } 
}

ログイン後にコピー

4. テスト