Блог

Я использую jQuery в своем веб-приложении, и мне интересно, каков наилучший способ обработки многоязычности в этом контексте.
Я думал о создании файла, подобного:

 label["login"]["fr"]="Connection"
label["login"]["en"]="Login"
  

Как только файл будет загружен, я сделаю (для каждой метки):

 $('#login').text(label["login"][selected_language]);
  

В HTML я бы тогда использовал:

 <a href="login.html"><span id="login"></span></a>
  

Это правильный способ сделать?

Я думаю, было бы лучше, если бы вы использовали class и a invented attributed вместо id для управления многоязычием, потому что, если у вас будет один и тот же текст дважды на одной и той же странице, id сломает его, потому что он уникален.

Вы можете попробовать этот подход:

 $(function() {
  $(".is_ml").each(function() {
    $(this).html(label[$(this).attr("ml_label")]["en"])
  })

});
  

Все, что представляет собой текст на нескольких языках, должно иметь class=»is_ml» и ml_label =»label», где меткой может быть, например, «login». Вы поняли мой подход?

Было бы правильно, если бы вы закрыли свой <span> тег 🙂 Вы также могли бы просто дать <a> соответствующее значение «id».

Подобная схема могла бы работать для очень маленького сайта, но когда у вас много страниц, много форм и много сообщений, отслеживать сообщения будет действительно сложно. Вероятно, вам захочется изучить решение для создания шаблонов, чтобы вы могли включать данные в интернационализированные сообщения (суммы, даты и т.д.).

Конечно, проблема в том, что пользователи, у которых отключен JavaScript, получат только язык по умолчанию, предоставляемый сервером.

salut luc.

Я думаю, что лучший способ — сделать это в каком-нибудь бэкэнде: P Но поскольку вы запрашиваете версию jQuery, я бы использовал наиболее используемый язык в HTML и заменил его другим (ами). Я бы сделал это следующим образом:

http://jsfiddle.net/mHAHz/1
Демонстрация здесь: (нажмите на fr или de, чтобы изменить язык)

 var translation, translate;

translation = { //store your translations in a object.
    "fr": {
        "div > a:eq(0)": "un lien", // this way you are flexible (don't need to use abd id for all you contents you want to translate)
        "div h1"       : "un title",
        "p"            : "du contenu"
    },
    "de": {
        "div > a:eq(0)": "ein Link",
        "div h1"       : "ein Titel",
        "p"            : "eigen Inhalt"
    }
}

translate = function( lng,translationObj ){ //check if lng is provided and if it acually exists in the object.
    if( lng amp;amp; translationObj[lng] ) {
        return $.each(translationObj[lng], function(k,v){
             $(k).text(v); 
        });
    }else{
        return $.error("make the language (lng) exists in your object");
    }
}

translate("fr", translation);
  

Я думаю, мне было бы слишком лениво поддерживать эти объекты с помощью языка, поэтому я бы просто использовал класс language для элементов, которые я хочу перевести… (как я сделал это здесь:http://alainbenoit.com /)

Мне нравится подход Бернардо Мендеса (ответ № 6), однако, поскольку подобъекты необходимо инициализировать, лучше переключить поля ml_label и language, чтобы свести к минимуму количество подобъектов, которые должны быть инициализированы только на один для каждого языка.

Javascript:

 var label = {};
label['fr'] = {};
label['en'] = {};

label["fr"]["login"]="Connection";
label["en"]["login"]="Login";
label["fr"]["firstname"]="Prénom";
label["en"]["firstname"]="First Name";
label["fr"]["lastname"]="Nom de Famille";
label["en"]["lastname"]="Last Name";

$(function() {
  $(".is_ml").each(function() {
    $(this).html(label["en"][$(this).attr("ml_label")])
  })
});
  

HTML:

 <label class="is_ml" ml_label="login">Login</label>
<label class="is_ml" ml_label="firstname">First Name</label>
<label class="is_ml" ml_label="lastname">Last Name</label>