Лучшие методы локализации и глобализации строк и этикеток [закрыто]

124

Я член команды, в которой работает более 20 разработчиков. Каждый разработчик работает над отдельным модулем (что-то около 10 модулей). В каждом модуле мы могли бы иметь по крайней мере 50 CRUD форму, а это значит , что мы в настоящее время есть около 500 кнопок добавлений , сохранить кнопки , кнопки редактирования и т.д.

Однако, поскольку мы хотим глобализировать наше приложение, нам необходимо иметь возможность переводить тексты в нашем приложении. Например, повсюду слово add должно стать для французских пользователей джоутером .

Что мы сделали до сих пор, так это то, что для каждого представления в пользовательском интерфейсе или на уровне презентации у нас есть словарь пар переводов ключ / значение. Затем при рендеринге представления мы переводим требуемые тексты и строки, используя этот словарь. Однако при таком подходе мы получили около 500 добавлений к 500 словарям. Это означает, что мы нарушили принцип DRY.

С другой стороны, если мы централизуем общие строки, например, добавляем add в одном месте, и просим разработчиков использовать его везде, мы сталкиваемся с проблемой неуверенности в том, определена ли строка в централизованном словаре или нет.

Еще одним вариантом может быть отсутствие словаря перевода и использование сервисов онлайн-перевода, таких как Google Translate, Bing Translator и т. Д.

Еще одна проблема, с которой мы столкнулись, заключается в том, что некоторые разработчики, испытывающие стресс из-за своевременной сдачи проекта, не могут запомнить ключи перевода . Например, для текста кнопки добавления разработчик использовал add, а другой разработчик - new и т. Д.

Каков наилучший или наиболее известный метод глобализации и локализации строковых ресурсов приложения?

Mouneer
источник
2
Разговор по Alex Sexton на тему стороне клиента Интернационализация с конференции JS ЕС является хорошим началом.
Минко Гечев

Ответы:

51

Насколько мне известно, есть хорошая библиотека localeplanetдля локализации и интернационализации в JavaScript. Кроме того, я думаю, что он родной и не зависит от других библиотек (например, jQuery).

Вот сайт библиотеки: http://www.localeplanet.com/

Также посмотрите эту статью Mozilla, вы можете найти очень хороший метод и алгоритмы для перевода на стороне клиента: http://blog.mozilla.org/webdev/2011/10/06/i18njs-internationalize-your-javascript-with- а-мало-помощь-с-JSON-и-на-сервер /

Общей чертой всех этих статей / библиотек является то, что они используют i18nкласс и getметод (в некоторых случаях также определяя меньшее имя функции, например _) для получения / преобразования файла keyв value. В моем объяснении keyозначает, что строка, которую вы хотите перевести, и valueозначает переведенную строку.
Затем вам просто нужен документ JSON для хранения keyи value.

Например:

var _ = document.webL10n.get;
alert(_('test'));

А вот JSON:

{ test: "blah blah" }

Я считаю, что использование текущих популярных библиотечных решений - хороший подход.

Афшин Мехрабани
источник
1
Без обид, но разве Афшин уже не это пробовал? Его проблема в том, что разным разработчикам сложно запомнить, какие ключи использовать. Я согласен с тем, что описанный вами метод - это правильный путь. Не понимаю, как может быть иначе. Кстати, спасибо за отличные ссылки.
Spock
47

Когда вы сталкиваетесь с проблемой, которую нужно решить (и, честно говоря, кто не решается в наши дни?), Основная стратегия, обычно используемая нами, компьютерными людьми, называется «разделяй и властвуй». Это выглядит так:

  • Представьте себе конкретную проблему как набор более мелких подзадач.
  • Решайте каждую меньшую проблему.
  • Объедините результаты в решение конкретной проблемы.

Но «разделяй и властвуй» - не единственная возможная стратегия. Мы также можем использовать более общий подход:

  • Представьте себе конкретную проблему как частный случай более общей проблемы.
  • Как-нибудь решить общую проблему.
  • Адаптируйте решение общей проблемы к конкретной проблеме.

- Эрик Липперт

Я считаю, что для этой проблемы уже существует множество решений в серверных языках, таких как ASP.Net/C#.

Я обозначил некоторые из основных аспектов проблемы.

  • Проблема : нам нужно загружать данные только для желаемого языка

    Решение : для этого мы сохраняем данные в отдельные файлы для каждого языка.

ех. res.de.js, res.fr.js, res.en.js, res.js (для языка по умолчанию)

  • Проблема: файлы ресурсов для каждой страницы должны быть разделены, чтобы мы получали только те данные, которые нам нужны.

    Решение : мы можем использовать уже существующие инструменты, например https://github.com/rgrove/lazyload

  • Проблема: нам нужна структура пары ключ / значение для сохранения наших данных

    Решение : я предлагаю объект javascript вместо строки / строки air. Мы можем извлечь выгоду из intellisense из IDE

  • Проблема: общие члены должны храниться в общедоступном файле, и все страницы должны иметь к ним доступ

    Решение : для этой цели я создаю папку в корне веб-приложения с именем Global_Resources и папку для хранения глобального файла для каждой подпапки, которую мы назвали «Local_Resources».

  • Проблема: каждый член подсистем / подпапок / модулей должен переопределять элементы Global_Resources в своей области

    Решение : я рассмотрел файл для каждого

Структура приложения

root/
    Global_Resources/
        default.js
        default.fr.js
    UserManagementSystem/
        Local_Resources/
            default.js
            default.fr.js
            createUser.js
        Login.htm
        CreateUser.htm

Соответствующий код для файлов:

Global_Resources / default.js

var res = {
    Create : "Create",
    Update : "Save Changes",
    Delete : "Delete"
};

Global_Resources / default.fr.js

var res = {
    Create : "créer",
    Update : "Enregistrer les modifications",
    Delete : "effacer"
};

Файл ресурсов для желаемого языка должен быть загружен на страницу, выбранную из Global_Resource - это должен быть первый файл, загружаемый на всех страницах.

UserManagementSystem / Local_Resources / default.js

res.Name = "Name";
res.UserName = "UserName";
res.Password = "Password";

UserManagementSystem / Local_Resources / default.fr.js

res.Name = "nom";
res.UserName = "Nom d'utilisateur";
res.Password = "Mot de passe";

UserManagementSystem / Local_Resources / createUser.js

// Override res.Create on Global_Resources/default.js
res.Create = "Create User"; 

UserManagementSystem / Local_Resources / createUser.fr.js

// Override Global_Resources/default.fr.js
res.Create = "Créer un utilisateur";

файл manager.js (этот файл должен быть загружен последним)

res.lang = "fr";

var globalResourcePath = "Global_Resources";
var resourceFiles = [];

var currentFile = globalResourcePath + "\\default" + res.lang + ".js" ;

if(!IsFileExist(currentFile))
    currentFile = globalResourcePath + "\\default.js" ;
if(!IsFileExist(currentFile)) throw new Exception("File Not Found");

resourceFiles.push(currentFile);

// Push parent folder on folder into folder
foreach(var folder in parent folder of current page)
{
    currentFile = folder + "\\Local_Resource\\default." + res.lang + ".js";

    if(!IsExist(currentFile))
        currentFile = folder + "\\Local_Resource\\default.js";
    if(!IsExist(currentFile)) throw new Exception("File Not Found");

    resourceFiles.push(currentFile);
}

for(int i = 0; i < resourceFiles.length; i++) { Load.js(resourceFiles[i]); }

// Get current page name
var pageNameWithoutExtension = "SomePage";

currentFile = currentPageFolderPath + pageNameWithoutExtension + res.lang + ".js" ;

if(!IsExist(currentFile))
    currentFile = currentPageFolderPath + pageNameWithoutExtension + ".js" ;
if(!IsExist(currentFile)) throw new Exception("File Not Found");

Надеюсь, поможет :)

Омид Шариати
источник
7
Единственное, что мне не нравится в этом подходе, это то, что локализация и разработка тесно связаны ... Поэтому, когда добавляется строка на английском языке (независимо от значения по умолчанию), остальные языки должны быть обновлены с помощью кода. Я бы предпочел, чтобы JSON был создан с помощью инструмента из какого-либо файла переводов. Тем не менее хорошее представление!
Нейт-Уилкинс,
сделали то же самое, что и для локализации, вы можете увидеть это в этом запросе: stackoverflow.com/q/53864279/4061006 . Единственное, как перевести Global_Resources / default.js в Global_Resources / default.fr.js? Какой инструмент / набор вы используете для преобразования этих файлов на нужные языки. Поскольку мне это тоже нужно
Jayavel
Вы должны хранить удобочитаемый комментарий рядом с каждым ключом, описывающим, где идет строка и что она означает, чтобы вы могли предоставить больше контекста переводчику (или себе), когда вы собираетесь добавить новый язык, и вы забыли, что некоторые струн означают. Сделайте что-нибудь подобное, "Create" : {"message": "Create", "description": "text on the button that opens the editor with a blank Foo"}например, для локализации расширений Chrome . Или создайте отдельный файл с этими комментариями.
Борис
13

jQuery.i18n - это легкий плагин jQuery для обеспечения интернационализации ваших веб-страниц. Это позволяет вам упаковывать пользовательские строки ресурсов в файлы .properties, как в Java Resource Bundles. Он загружает и анализирует пакеты ресурсов (.properties) на основе предоставленного языка или языка, сообщаемого браузером.

чтобы узнать больше об этом, взгляните на Как интернационализировать ваши страницы с помощью JQuery?

Balakrishnan 웃
источник
Ссылка исчезла
Александр Фарбер