집 >웹 프론트엔드 >JS 튜토리얼 >jQuery.i18n을 사용하여 프런트엔드 국제화를 구현하는 방법은 무엇입니까?

jQuery.i18n을 사용하여 프런트엔드 국제화를 구현하는 방법은 무엇입니까?

php中世界最好的语言원래의: 2018-06-01 11:09:582995검색

이번에는 프론트엔드 국제화를 달성하기 위한 jQuery.i18n 방법과 프론트엔드 국제화를 구현하기 위한 jQuery.i18n notes을 소개합니다. 실제 사례를 살펴보겠습니다.

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 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 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!