jQuery.i18n을 기반으로 웹 프런트엔드 국제화 구현

이번에는 jQuery.i18n 기반의 웹 프런트엔드 국제화 구현 시 주의사항을 함께 살펴보겠습니다.

jQuery.i18n.properties를 소개하기 전에 먼저 국제화가 무엇인지부터 살펴보겠습니다. 국제화(Internationalization)의 영어 단어는 다음과 같습니다. 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." 
 } 
}

Englishconfiguration file적지 않겠습니다. 형식은 모듈 형태로 작성된 맵을 사용한다는 점에서는 동일합니다.

2 jsp 페이지에 i18n.js를 소개하고 i18n

<script></script> 
<script></script> 
<script> 
i18n.init({ 
 lng:&#39;${sessionScope.language }&#39;, 
 ns: { namespaces: [&#39;ns.jsp&#39;], defaultNs: &#39;ns.jsp&#39;}, 
 useLocalStorage: false 
}); 
</script>

3.js reference

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

그 사건 이 기사는 이미 마스터했습니다. 더 흥미로운 방법을 알아보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue 중첩 라우팅 및 404 리디렉션 사용에 대한 자세한 설명

Angular HttpClient 입문 튜토리얼

위 내용은 jQuery.i18n을 기반으로 웹 프런트엔드 국제화 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!