모범 사례 자바 스크립트 및 다국어
자바 스크립트로 DOM 조작을 사용하는 다국어 웹 사이트의 모범 사례는 무엇입니까? 자바 스크립트를 사용하여 웹 사이트의 일부 동적 부분을 구축합니다. 내 첫 번째 생각은 텍스트 문자열과 언어 코드를 인덱스로 사용하는 배열을 사용하는 것입니다. 이것이 좋은 생각입니까?
이전에 다국어 사이트를 만들었을 때 (그다지 큰 사이트는 아니므로 확장이 잘되지 않을 수 있음) 일련의 "언어"파일을 유지합니다.
- lang.en.js
- lang.it.js
- lang.fr.js
각 파일은 기본적으로 키워드에서 언어 구문으로의 맵인 객체를 선언합니다.
// lang.en.js
lang = {
greeting : "Hello"
};
// lang.fr.js
lang = {
greeting : "Bonjour"
};
이러한 파일 중 하나를 동적으로로드 한 다음지도에서 키를 참조하기 만하면됩니다.
document.onload = function() {
alert(lang.greeting);
};
물론이 작업을 수행하는 다른 많은 방법과이 스타일을 수행하는 여러 가지 방법이 있지만 더 나은 방법이 있습니다. "사전"에서 누락 된 구문을 우아하게 처리하거나 전체 작업을 수행 할 수 있도록 모든 것을 함수로 캡슐화합니다. OOP를 사용하고 파일의 동적 포함을 관리하도록하여 언어 선택기를 그릴 수도 있습니다.
var l = new Language('en');
l.get('greeting');
다국어 지원을 설계 할 때 염두에 두어야 할 몇 가지 사항이 있습니다.
1-데이터에서 코드를 분리합니다 (즉, 문자열을 함수에 바로 하드 코딩하지 마십시오)
2-현지화 차이를 처리하기 위해 서식 지정 후크 함수를 만듭니다. 다음 과 같은 이유로 형식화 가능한 문자열 ( "{0}" )을 허용하는 것이 연결 ( "Welcome to"+ value ) 보다 낫습니다 .
- 일부 언어에서 숫자는 1,234,567.00 대신 1.234.678,00과 같은 형식으로 지정됩니다.
- 복수형은 종종 단수 끝에 "s"를 추가하는 것만 큼 간단하지 않습니다.
- 문법 규칙은 다르며 순서에 영향을 줄 수 있으므로 번역 후크 뒤에 동적 데이터가 추가되도록해야합니다. 예를 들어 "Welcome to {0}" 은 (는) 일본어에서 "{0} he youkoso" 로 바뀝니다 . 거의 모든 언어, 염두에 두십시오).
3- 번역 후크가 실행 된 후 실제로 문자열 형식을 지정할 수 있는지 확인 하여 키를 재사용 할 수 있습니다.
4- 어떤 상황에서도 데이터베이스 출력을 변환기 유틸리티에 연결하지 마십시오 . 다국어 데이터가있는 경우 데이터베이스에 별도의 테이블 / 행을 만듭니다. 나는 사람들이 꽤 자주 (일반적으로 국가와 주 / 지방의 형태로) 잘못 이해하는 것을 보았다.
5-키 생성을위한 명시적인 코딩 관행 규칙을 만듭니다. 포매터 유틸리티 함수 ( translate ( "hello world" 와 유사 함 ) 는 키를 매개 변수로 사용하고 약간의 변형이있는 키는 유지 보수를 매우 성가 시게합니다. 예를 들어 다음 예제에서 세 개의 키로 끝날 수 있습니다. "enter you name", "enter your name :", "enter your name :". 하나의 형식 (예 : 콜론 없음, 잘림)을 선택하고 코드 검토에서 불일치를 포착합니다. 프로그래밍 방식으로 필터링하면 false를 트리거 할 수 있습니다. 긍정적.
6-번역 테이블에 HTML 마크 업이 잠재적으로 필요할 수 있다는 점에 유의하십시오 (예 : 문장에서 단어를 굵게 표시해야하거나 각주 의학 참조가 필요한 경우). 이것을 광범위하게 테스트하십시오.
7-언어 문자열을 가져 오는 방법에는 여러 가지가 있습니다. 이상적으로는 language.lang.js 파일의 여러 버전이 있어야하며 서버 측 코드로 전환하고 HTML 파일 하단에서 파일을 참조해야합니다. AJAX를 통해 파일을 가져 오는 것도 대안이지만 지연이 발생할 수 있습니다. language.js를 기본 코드 파일에 병합하는 것은 파일 캐싱의 이점을 잃기 때문에 권장되지 않습니다.
8- 대상 언어로 테스트합니다. 이것은 어리석게 들리지만 프로그래머가 키에 "é"가 있는지 확인하지 않았기 때문에 심각한 버그를 한 번 본 적이 있습니다.
function Language(lang)
{
var __construct = function() {
if (eval('typeof ' + lang) == 'undefined')
{
lang = "en";
}
return;
}()
this.getStr = function(str, defaultStr) {
var retStr = eval('eval(lang).' + str);
if (typeof retStr != 'undefined')
{
return retStr;
} else {
if (typeof defaultStr != 'undefined')
{
return defaultStr;
} else {
return eval('en.' + str);
}
}
}
}
이것을 페이지에 추가 한 후 다음과 같이 작업 할 수 있습니다.
var en = {
SelPlace:"Select this place?",
Save:"Saved."
};
var tr = {
SelPlace:"Burayı seçmek istiyor musunuz?"
};
var translator = new Language("en");
alert(translator.getStr("SelPlace")); // result: Select this place?
alert(translator.getStr("Save")); // result: Saved.
alert(translator.getStr("DFKASFASDFJK", "Default string for non-existent string")); // result: Default string for non-existent string
var translator = new Language("tr");
alert(translator.getStr("SelPlace")); // result: Burayı seçmek istiyor musunuz?
alert(translator.getStr("Save")); // result: Saved. (because it doesn't exist in this language, borrowed from english as default)
alert(translator.getStr("DFKASFASDFJK", "Default string for non-existent string")); // result: Default string for non-existent string
정의하지 않은 언어로 클래스를 호출하면 영어 ( en )가 선택됩니다.
자바 스크립트에서 i18n에 대한 멋진 기사를 찾았습니다 :
http://24ways.org/2007/javascript-internationalisation
i18n + javascript를 사용한 간단한 Google 검색은 많은 대안을 보여줍니다.
결국 그것은 당신이 원하는 깊이에 달려 있습니다. 두 가지 언어의 경우 단일 파일이면 충분합니다.
Jquery 와 같은 프레임 워크를 사용하고 스팬을 사용하여 텍스트 (클래스 포함)를 식별 한 다음 각 스팬의 ID를 사용하여 선택한 언어의 해당 텍스트를 찾을 수 있습니다.
Jquery 1 줄 완료.
nickf와 Leo의 훌륭한 답변을 읽은 후 모든 문자열을 관리하기 위해 다음 CommonJS 스타일 language.js를 만들었습니다 (선택적 으로 형식을 지정하는 Mustache ).
var Mustache = require('mustache');
var LANGUAGE = {
general: {
welcome: "Welcome {{name}}!"
}
};
function _get_string(key) {
var parts = key.split('.');
var result = LANGUAGE, i;
for (i = 0; i < parts.length; ++i) {
result = result[parts[i]];
}
return result;
}
module.exports = function(key, params) {
var str = _get_string(key);
if (!params || _.isEmpty(params)) {
return str;
}
return Mustache.render(str, params);
};
그리고 이것이 내가 문자열을 얻는 방법입니다.
var L = require('language');
var the_string = L('general.welcome', {name='Joe'});
Dojo, Ext, FCKEditor, TinyMCE 등과 같은 고전적인 JS 구성 요소에서 수행 된 작업을 살펴보아야합니다. 좋은 아이디어를 많이 찾을 수 있습니다.
일반적으로 태그에 설정 한 일종의 속성으로 끝나고 속성 값에 따라 태그의 내용을 번역 파일에서 찾은 번역으로 바꿉니다.
명심해야 할 한 가지는 언어 세트의 진화입니다 (코드가 발전 할 때 전체를 다시 번역해야 할 것인지 말 것인지). 번역을 PO 파일 (Gnu Gettext)에 보관하고, PO 파일을 JS 파일을 사용할 준비가 된 상태로 변환하는 스크립트가 있습니다.
게다가:
- 항상 UTF-8을 사용하십시오-이것은 어리석은 것처럼 들리지만 처음부터 utf-8 (HTML 헤드 + JS 인코딩)을 사용하지 않는다면 빠르게 파산 될 것입니다.
- Use the english string as a key to your translations - this way you won't end up with things like: lang.Greeting = 'Hello world' - but lang['Hello world'] = 'Hello world';
For Spring bundles and JavaScript there are simple solution: generate i18n array in template (e.g. JSP) and use it in JavaScript:
JSP:
<html>
<script type="text/javascript">
var i18n = [];
<c:forEach var='key' items='<%=new String[]{"common.deleted","common.saved","common.enabled","common.disabled","...}%>'>
i18n['${key}'] = '<spring:message code="${key}"/>';
</c:forEach>
</script>
</html>
And in JS:
alert(i18n["common.deleted"]);
See also Resolving spring:messages in javascript for i18n internationalization
This way you can use one js code for multi language by multi word :
var strings = new Object();
if(navigator.browserLanguage){
lang = navigator.browserLanguage;
}else{
lang = navigator.language;
}
lang = lang.substr(0,2).toLowerCase();
if(lang=='fa'){/////////////////////////////Persian////////////////////////////////////////////////////
strings["Contents"] = "فهرست";
strings["Index"] = "شاخص";
strings["Search"] = "جستجو";
strings["Bookmark"] = "ذخیره";
strings["Loading the data for search..."] = "در حال جسنجوی متن...";
strings["Type in the word(s) to search for:"] = "لغت مد نظر خود را اینجا تایپ کنید:";
strings["Search title only"] = "جستجو بر اساس عنوان";
strings["Search previous results"] = "جستجو در نتایج قبلی";
strings["Display"] = "نمایش";
strings["No topics found!"] = "موردی یافت نشد!";
strings["Type in the keyword to find:"] = "کلیدواژه برای یافتن تایپ کنید";
strings["Show all"] = "نمایش همه";
strings["Hide all"] = "پنهان کردن";
strings["Previous"] = "قبلی";
strings["Next"] = "بعدی";
strings["Loading table of contents..."] = "در حال بارگزاری جدول فهرست...";
strings["Topics:"] = "عنوان ها";
strings["Current topic:"] = "عنوان جاری:";
strings["Remove"] = "پاک کردن";
strings["Add"] = "افزودن";
}else{//////////////////////////////////////English///////////////////////////////////////////////////
strings["Contents"] = "Contents";
strings["Index"] = "Index";
strings["Search"] = "Search";
strings["Bookmark"] = "Bookmark";
strings["Loading the data for search..."] = "Loading the data for search...";
strings["Type in the word(s) to search for:"] = "Type in the word(s) to search for:";
strings["Search title only"] = "Search title only";
strings["Search previous results"] = "Search previous results";
strings["Display"] = "Display";
strings["No topics found!"] = "No topics found!";
strings["Type in the keyword to find:"] = "Type in the keyword to find:";
strings["Show all"] = "Show all";
strings["Hide all"] = "Hide all";
strings["Previous"] = "Previous";
strings["Next"] = "Next";
strings["Loading table of contents..."] = "Loading table of contents...";
strings["Topics:"] = "Topics:";
strings["Current topic:"] = "Current topic:";
strings["Remove"] = "Remove";
strings["Add"] = "Add";
}
you can add another lang in this code and set objects on your html code.
참고URL : https://stackoverflow.com/questions/228835/best-practice-javascript-and-multilanguage
'UFO ET IT' 카테고리의 다른 글
| Xcode-Xcode 6.1에서 대상을 삭제하는 방법은 무엇입니까? (0) | 2020.11.26 |
|---|---|
| GitHub 웹 사이트에서 디렉토리 / 폴더의 이름을 바꾸는 방법은 무엇입니까? (0) | 2020.11.26 |
| 기록에 추가하지 않고 IFRAME 다시로드 (0) | 2020.11.26 |
| UIPageViewController, 데이터 소스에서 지정한 순서를 엉망으로 만들지 않고 특정 페이지로 올바르게 점프하려면 어떻게해야합니까? (0) | 2020.11.26 |
| phpMyAdmin에 대한 사용자 'root'@ 'localhost'에 대한 액세스 거부 수정 (0) | 2020.11.26 |