Implémenter l'internationalisation web front-end basée sur jQuery.i18n

Cette fois, je vais vous apporter les précautions pour implémenter l'internationalisation front-end web basée sur jQuery.i18n Voici les cas réels, jetons un coup d'oeil.

Avant de présenter jQuery.i18n.properties, examinons d'abord ce qu'est l'internationalisation. Le mot anglais pour internationalisation est : Internationalisation, également connu sous le nom de i18n, "i" est la première lettre du mot, "18" est le nombre de mots entre "i" et "n", et "n" représente la dernière lettre. du mot une lettre. En informatique, l'internationalisation fait référence au processus de conception de logiciels capables de s'adapter à divers environnements régionaux et linguistiques.

jQuery.i18n.properties est un plug-in d'internationalisation jQuery léger. Semblable aux fichiers de ressources en Java, jQuery.i18n.properties utilise des fichiers .properties pour internationaliser JavaScript. Le plug-in jQuery.i18n.properties analyse les fichiers de ressources correspondants avec le suffixe ".properties" en fonction de la langue et du code pays spécifiés par l'utilisateur (ou fournis par le navigateur) (conformément aux normes ISO-639 et ISO-3166 normes).

L'utilisation de fichiers de ressources pour réaliser l'internationalisation est un moyen populaire. Par exemple, les applications Android peuvent utiliser des fichiers de ressources nommés d'après l'encodage de la langue et du pays pour réaliser l'internationalisation. Les fichiers de ressources du plug-in jQuery.i18n.properties portent le suffixe « .properties » et contiennent des paires clé-valeur liées à la région. Nous savons que les programmes Java peuvent également utiliser des fichiers de ressources avec le suffixe .properties pour réaliser l'internationalisation. Cette méthode est donc particulièrement utile lorsque nous souhaitons partager des fichiers de ressources entre des programmes Java et des programmes JavaScript frontaux. Le plug-in jQuery.i18n.properties charge d'abord le fichier de ressources par défaut (par exemple : strings.properties), puis charge le fichier de ressources pour une langue spécifique (par exemple : strings_zh.properties), ce qui garantit que lors d'une traduction pour une certaine langue n'est pas fournie, la valeur par défaut est toujours valide. Les développeurs peuvent utiliser les clés des fichiers de ressources sous forme de variables (ou fonctions) JavaScript ou de cartes.

Ce qui suit présente comment utiliser i18n dans le projet. Pour expliquer, ma place ici est différente de celle du site officiel, je n'ai pas utilisé certaines méthodes d'i18n, mais j'en ai utilisé seulement une petite partie et j'ai découvert. la comparaison. Adapté à notre projet.

1. Tout d'abord, créez le fichier de ressources :

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." 
 } 
}

ChinoisLe fichier de configuration n'est pas écrit, le format est le même, et il est écrit dans différents modules sous forme de carte.

2. Introduisez i18n.js sur la page jsp et initialisez 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>

Référence 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. Test

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article , plus excitant Veuillez prêter attention aux autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Explication détaillée de l'utilisation du routage imbriqué vue et de la redirection 404

Tutoriel d'introduction à Angular HttpClient

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!