Implementieren Sie die Web-Frontend-Internationalisierung basierend auf jQuery.i18n

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Implementierung der Web-Frontend-Internationalisierung basierend auf jQuery.i18n vorstellen. Schauen wir uns die tatsächlichen Fälle an.

Bevor wir jQuery.i18n.properties vorstellen, werfen wir zunächst einen Blick darauf, was Internationalisierung ist. Das englische Wort für Internationalisierung lautet: Internationalisierung, auch bekannt als i18n, „i“ ist der erste Buchstabe des Wortes, „18“ ist die Anzahl der Wörter zwischen „i“ und „n“ und „n“ steht für den letzten Buchstaben des Wortes ein Buchstabe. In der Informatik bezieht sich Internationalisierung auf den Prozess des Entwurfs von Software, die sich an verschiedene regionale und sprachliche Umgebungen anpassen kann.

jQuery.i18n.properties ist ein leichtes jQuery-Internationalisierungs-Plug-in. Ähnlich wie Ressourcendateien in Java verwendet jQuery.i18n.properties .properties-Dateien, um JavaScript zu internationalisieren. Das jQuery.i18n.properties-Plugin analysiert die entsprechenden Ressourcendateien mit dem Suffix „.properties“ entsprechend der vom Benutzer angegebenen (oder vom Browser bereitgestellten) Sprache und dem Ländercode (gemäß ISO-639 und ISO-3166). Normen).

Die Verwendung von Ressourcendateien zur Internationalisierung ist eine beliebte Methode. Beispielsweise können Android-Anwendungen Ressourcendateien verwenden, die nach Sprache und Länderkodierung benannt sind, um die Internationalisierung zu erreichen. Die Ressourcendateien im jQuery.i18n.properties-Plug-in haben das Suffix „.properties“ und enthalten regionsbezogene Schlüssel-Wert-Paare. Wir wissen, dass Java-Programme auch Ressourcendateien mit dem Suffix .properties verwenden können, um eine Internationalisierung zu erreichen. Daher ist diese Methode besonders nützlich, wenn wir Ressourcendateien zwischen Java-Programmen und Front-End-JavaScript-Programmen gemeinsam nutzen möchten. Das jQuery.i18n.properties-Plug-in lädt zunächst die Standardressourcendatei (z. B. strings.properties) und dann die Ressourcendatei für ein bestimmtes Gebietsschema (z. B. strings_zh.properties), wodurch sichergestellt wird, dass bei einer Übersetzung für Wenn eine bestimmte Sprache nicht bereitgestellt wird, ist der Standardwert immer gültig. Entwickler können Schlüssel in Ressourcendateien als JavaScript-Variablen (oder -Funktionen) oder Maps verwenden.

Im Folgenden wird die Verwendung von i18n im Projekt vorgestellt. Zur Erläuterung: Ich habe einige Methoden von i18n nicht verwendet, sondern nur einen kleinen Teil davon Der Vergleich passt zu unserem Projekt.

1. Erstellen Sie zunächst die Ressourcendatei:

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

ChinesischKonfigurationsdatei wird nicht geschrieben, das Format ist das gleiche und es wird in verschiedenen Modulen in Form einer Karte geschrieben.

2. Stellen Sie i18n.js auf der JSP-Seite vor und initialisieren Sie 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-Referenz

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

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Dinge, bitte achten Sie auf PHP-Chinesisch. Andere verwandte Artikel online!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Vue Nested Routing und 404-Umleitung

Angular HttpClient Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Web-Frontend-Internationalisierung basierend auf jQuery.i18n. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!