I18n w JavaScript

Dictionary

Poziom średnio-zaawansowany

I18n czyli internacjonalizacja, a także L10n, to jest lokalizacja oprogramowania to ważne zagadnienia, zawsze wtedy, gdy tworzymy aplikacje skierowane do użytkowników z wielu krajów.

I18n w JavaScript

Rzecz jasna wiele rozwiązań, takich jak framework’i czy SDK w przypadku aplikacji mobilnych, a nawet same języki programowania, wspierają obsługę wielu języków w tworzonej aplikacji.

Takich rozwiązań dla JavaScript poszukamy w tym artykule. Przejrzymy niektóre ze sposobów obsługi wielu języków w kodzie JavaScript.

Proste rozwiązania w „czystym” JavaScript

Zacznijmy od najprostszych rozwiązań, bazujących na podstawowych konstrukcjach JavaScript. Takie rozwiązania mogą okazać się wystarczające w przypadku prostszych aplikacji WWW.

Przykład – prosta obsługa I18n w JavaScript:

// ustawiamy język aplikacji
var _lang = "de";

// definiujemy tłumaczenia
var hello_message_homepage = {
  en: "English hello", 
  fr: "French hello", 
  de: "German hello", 
  pl: "Polish hello"};

var introduction_text_homepage = {
  en: "English text...", 
  fr: "French text...", 
  de: "German text...", 
  pl: "Polish text..."};

// itd...

// pobieramy tłumaczenia dla bieżącego języka
alert(hello_message_homepage[_lang]);
alert(introduction_text_homepage[_lang]);

W przykładzie po prostu wyświetlamy alert z uzyskanym tłumaczeniem. W praktyce może to być na przykład podmiana tekstu elementu HTML o danym ID na docelowy łańcuch.

Użyliśmy symboli języków (en, de, itd…) jako kluczy w tablicy z tłumaczeniami dla poszczególnych komunikatów. Rozwiązanie proste i skuteczne.

Kolejny sposób

W tym przypadku wprowadzimy trochę uporządkowania i będziemy trzymać tłumaczenia w osobnych plikach.


var _lang = "de";

document.write("<scr"+"ipt type='text/javascript' 
  src='lang/"+lang+"/messages.js'></scr"+"ipt>");

Mając zdefiniowane pliki w katalogu lang/, skrypt dołączy nam odpowiedni plik dla bieżącego języka.

Przykładowo:

// plik lang/en/messages.js
var hello_message_homepage = "English hello";
var introduction_text_homepage = "English text...";
// plik lang/de/messages.js
var hello_message_homepage = "German hello";
var introduction_text_homepage = "German text...";

… i inne języki, jakie chcemy wspierać. Po dołączeniu przez skrypt pliku do dokumentu HTML, możemy odwołać się do naszych zmiennych, na przykład alert(hello_message_homepage), otrzymując poprawne tłumaczenie.

Oczywiście są to podstawowe rozwiązania, bez obsługi błędów itp. Stanowią jedynie trop, którym można podążać w celu opracowania najbardziej odpowiedniego rozwiązania dla naszej aplikacji.

Zróbmy krok dalej w stronę bibliotek.

Biblioteka R.js

R.js to niewielka biblioteka na licencji MIT, wspierająca I18n w JavaScript. Nie posiada zależności i nie koliduje z innymi bibliotekami.

Użycie jest dosyć proste:


<script type="text/javascript" src="R.js"></script>
<script type="text/javascript">
    R.registerLocale('en-GB', {
        // English (Source)    // Translated String
        'A Translated String': 'A Translated String',
    });

    R.registerLocale('pl', {
        // English (Source)    // Translated String
        'A Translated String': 'Przetłumaczony łańcuch',
    });

</script>

<script type="text/javascript">
    var h1 = document.createElement('h1');
    h1.innerHTML = R('A Translated String'); 
</script>

Jest to dość ciekawa alternatywa dla wsparcia tłumaczeń w JavaScript.

Strona WWW biblioteki:
http://keithcirkel.co.uk/R.js/

Dostępna także na Github’ie:
https://github.com/keithamus/R.js

I18n a framework’i JavaScript

Na początek można polecić zerknięcie na mały tutorial na script-tutorials.com, przedstawiający w sumie proste rozwiązanie bazujące na jQuery:

http://www.script-tutorials.com/how-to-translate-your-site-in-runtime-using-jquery/

Inny ciekawy artykuł zwięźle opisuje I18n z użyciem jQuery (Ajax) i XML:

http://www.webgeekly.com/tutorials/jquery/how-to-make-your-site-multilingual-using-xml-and-jquery/

A skoro jesteśmy już przy jQuery, warto wspomnieć bibliotekę o dość rozbudowanych możliwościach – jQuery Globalize:

https://github.com/jquery/globalize

Do całkiem szerokiej już gamy rozwiązań dodać możemy jeszcze Dojo Toolkit.

Moduł dojo/i18n

http://dojotoolkit.org/reference-guide/1.9/dojo/i18n.html

Tutorial – I18n z użyciem Dojo Toolkit

http://dojotoolkit.org/documentation/tutorials/1.9/i18n/

Podsumowanie

Przedstawiliśmy znane nam metody wsparcia I18n w JavaScript. W praktyce można ograniczyć się do tych najprostszych.

Jeśli tworzymy coś bardziej zaawansowanego pod szersze grono użytkowników, wtedy sięgniemy po bardziej wyrafinowane i jednolite metody. Przykładem mogą być edytory WYSIWYG, które dostarczane są razem w tłumaczeniami dla wielu różnych języków. Taki projekt zwykle posiada standardową obsługę tłumaczeń, aby dodanie kolejnych języków było bezbolesne.

Jest jeszcze metoda prostsza od opisanych do tej pory. Mianowicie jeśli nasza aplikacja WWW jest tworzona również z użyciem backend’u (np. PHP), to obsługę I18n możemy zdjąć całkowicie z JavaScript, jeśli tylko nie ma przeciwwskazań. W takim przypadku zmienne JavaScript będą generowane w kodzie języka takiego jak PHP, gdzie już jest zaimplementowana obsługa I18n. W projektach nad którymi pracowałem, stosowano właśnie takie podejście.

Jako że możliwości są różne, każdy za pewne znajdzie coś odpowiedniego dla potrzeb swojej aplikacji.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+2Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.