с примерами и интересной информацией о глобализации
В прошлом месяце я рассказывал в блоге о том, как Microsoft начала поставлять код в jQuery и о нашем первом проекте, над которым мы работали – шаблоны и связывание данных в jQuery (о связывании на Хабре).
Сегодня, мы выпустили прототип нового плагина под названием jQuery Globalization, который позволяет добавить поддержку глобализации в ваши JavaScript-приложения. Этот плагин включает информацию о глобализации для свыше 350 культур от шотландской кельтской, фризской, венгерской, японской до канадского английского. Мы выпустим этот плагин для сообщества с открытым исходным кодом.
Вы можете загрузить наш прототип плагина jQuery Globalization из репозитория на Github:http://github.com/nje/jquery-glob
Кроме того, отсюда вы можете загрузить набор примеров, которые демонстрируют некоторые простые юзкейсы.
Плагин jQuery Globalization упрощает для вас парсинг и форматирование чисел, валют и дат для разнообразных культур в JavaScript. Например, вы можете использовать плагин для отображения правильного символа валют для разных культур:
Мы так же можете использовать плагин для форматирования дат, так чтобы день и месяц отображались в правильном порядке и правильно переводились:
Обратите внимание на то, как отображается год на арабском – 1431. Это потому, что значение года конвертировано согласно арабскому календарю.
Нам привычны некоторые культурные различия, такие как разные валюты или разные наименование месяцев. Другие могут стать сюрпризом и удивить. Например, в некоторых культурах группировка чисел представлена необычно. В культуре «te-IN» (Телугу, Индия) группы содержат сначала три числа, затем по два. Значение 1000000 (один миллион) должно быть написано как «10,00,000». Некоторые культуры вообще не группируют числа. Все эти присущие культуры различия поддерживаются плагином jQuery Globalization автоматически.
Получение правильного представления дат может особенно изощренным. В разных культурах представлены разные календари, такие как грегорианский или календарь UmAlQura. Некоторые культуры могут иметь даже несколько календарей. Например, японская культура использует грегорианский и японский календари, которые содержат эпохи названные в честь Японских императоров. Плагин jQuery Globalization включает методы для конвертирования дат между разнообразными календарями.
Плагин jQuery Globalization использует языковые теги определенные в стандартах RFC 4646 и RFC 5646 для идентификации культур (http://tools.ietf.org/html/rfc5646). Языковой тег состоит из одного или более субтегов разделенных дефисом. Например:
Обратите внимание, что один язык, такой как английский, может иметь несколько языковых тегов. Англоязычные в Канаде используют отличные от англоязычных в Австралии или в США соглашения по написанию чисел, валюты и форматов дат. Вы можете найти языковой тег для определенной культуры с помощью утилиты Language Subtag Lookup, которая расположена здесь: http://rishida.net/utils/subtags/.
В пакете загрузки плагина jQuery Globalization содержится папка globinfo, в которой находится информация по каждой из 350 культур. На самом деле, в папке более 700 файлов, поскольку она содержит и минимизированные версии.
Например, в папке globinfo есть файлы с наименованием jQuery.glob.en-AU.js (Австралийский Английский), jQuery.glob.id.js (Индонезия), and jQuery.glob.zh-CHS (Упрощенный Китайский).
Представьте себе ситуацию, когда вам требуется создать немецкий сайт и вы хотите отформатировать все даты, валюту и числа с использованием немецкий соглашений о формате прямо в JavaScript на клиенте. HTML-разметка для этой страницы может выглядеть так:
Обратите внимание на теги span. Они определяют области на странице, которые нам требуется отформатировать с помощью плагина jQuery Globalization. Мы хотим отформатировать цену продукта, дату изготовления продукта и количество единиц на складе.
Чтобы применить плагин jQuery Globalization мы должны добавить три JavaScript-файла на страницу: библиотеку jQuery, сам плагин jQuery Globalization и файл с информацией о конкретной культуре:
Тут я статически добавил JavaScript-файл jQuery.glob.de-DE.js, который содержит информацию о культуре для Германии. Языковой тег “de-DE” используется для немецкого языка в Германии.
Теперь, когда у меня есть все необходимые скрипты, я могу использовать плагин jQuery Globalization для форматирования значений цены продукта, даты производства и количества единиц товара на складе с использованием следующего JavaScript-кода на стороне клиента:
Плагин jQuery Globalization расширяет библиотеку jQuery, добавляя новые методы, которые называются preferCulture() и format(). Метод preferCulture() позволяет вам установить текущую культуру, которая будет использоваться другими методами плагина jQuery Globalization по умолчанию. Обратите внимание, метод preferCulture() принимает параметр со значением языкового тега. Метод определить ближайшую подходящую культуру, которая соответствует переданному языковому тегу (параметр может содержать перечисление языковых тегов – прим. перев.).
Метод $.format() используется для форматирования значений валют, дат и чисел. Второй параметр переданный в $.format() – это указатель формата. Например, передача “c” означает, что значение должно быть отформатировано как денежное. В файле ReadMe на github можно найти детальное описание возможных значений этого параметра: http://github.com/nje/jquery-glob.
Когда мы откроем страницу в браузере, все будет отформатировано так, как и положено по соглашениям немецкого языка. Символ евро использован как символ валюты. Дата отформатирована с использованием немецкий наименований дня недели и месяца. И наконец, точка вместо запятой использована в качестве разделителя:
Вы можете посмотреть на этот результат с помощью файла 3_GermanSite.htm в примерах.
В предыдущем примере мы явно указали на то, что хотим глобализировать данные для немецкого языка (сославшись на файл jQuery.glob.de-DE.js). Давайте теперь посмотрим на первый из нескольких пример, который демонстрирует возможность динамической установки культуры для глобализации.
Представьте, что вы хотите отобразить ниспадающий список со всеми 350 культурам на странице. Вы бы хотели, чтобы когда кто-нибудь выберет культуру из списка, то все значения на странице были отформатированы с использованием выбранной культуры.
Ниже представлен HTML-код для такой страницы:
Обратите внимание, что все наши даты помещены в тег <span> с атрибутом data-date (атрибуты data-* – это новая функция HTML5, которая так же применима и в старых браузерах). Мы отформатируем даты содержащиеся в атрибуте data-date после того как пользователь выбрал культуру из списка.
Для того, чтобы отображать даты для всех возможных культур, мы включим в страницу ссылку на файл jQuery.glob.all.js:
Плагин jQuery Globalization поставляется с файлом jQuery.glob.all.js. Этот файл содержит информацию о глобализации для всех более чем 350 культур, которые поддерживает плагин. В минимизированном виде плагин немаленький – 367KB. Из-за размера файла, кроме случаев когда вам действительно надо использовать абсолютно все культуры, мы рекомендуем вам добавлять отдельные JavaScript-файлы для определенных культур, которые вам действительно требуются, вместо того, чтобы включать весь код jQuery.glob.all.js на странице. В следующем примере я продемонстрирую как можно загрузить языковые файлы динамически по мере надобности.
Далее, мы реализуем ниспадающий список, который содержит все доступные культуры. Мы можем использовать свойство $.cultures для получения списка всех загруженных культур:
И наконец, мы напишем код на jQuery, который обойдет все элементы span с атрибутами data-date и отформатирует даты:
Метод parseDate() плагина jQuery Globalization используется для конвертирования строкового представления даты в объект даты JavaScript. Метод format() используется для форматирования даты. Спецификатор формата “D” указывает на то, что дата должно быть отформатирована в длинном представлении (long date format).
И теперь наше содержимое будет корректно глобализировано для каждого из 350 языков когда пользователь сделает выбор на странице. Вы можете увидеть этот пример в файле 4_SelectCulture.htm.
Как я упоминал ранее в предыдущем разделе, вы должны избегать использования файла jQuery.glob.all.js на страницах везде, где только это возможно в связи с большим его размером. Лучшей альтернативой является динамическая загрузка нужной вам информации о глобализации.
Например, представьте, что вам нужно создать ниспадающий список, который отображает следующий перечень языков:
Следующий код на jQuery выполняется в момент выбора пользователем нового языка из списка. Код проверяет, загружен ли уже файл глобализации для выбранного языка. Если файл глобализации еще не был загружен, то он загружается динамически с использованием метода $.getScript() библиотеки jQuery.
Метод globalizePage() вызывается после того, как файл глобализации загружен и в нем содержится код для проведения глобализации.
Преимущество данного подхода состоит в том, что он позволяет вам избежать загрузки файла jQuery.glob.all.js. Вместо этого, вам требуется загрузить только те файлы, которые требуются и такая загрузка произойдет лишь раз.
Файл 5_Dynamic.htm из примеров демонстрирует как реализован этот подход.
Многие сайт определяют предпочитаемый язык пользователя на основании настроек браузер и используют автоматически глобализированный контент. Пользователь может сам задать предпочтительный язык в своем браузере. Затем, когда он запросит страницу, его языковая настройка будет включена в запрос с помощью заголовка Accept-Language.
Используя Internet Explorer, вы можете установить предпочтительный язык с помощью следующих шагов:
Обратите внимание, что вы можете перечислить несколько языков в окне Language Preference. Все эти языки, в соответственном порядке, отправятся с помощью заголовка Accept-Language вместе с запросом к странице:
Accept-Language: fr-FR,id-ID;q=0.7,en-US;q=0.3
Удивительно, но не существует возможности получить значение заголовка Accept-Language через JavaScript на клиенте. Microsoft Internet Explorer и Mozilla Firefox поддерживают набор языковых свойств через объект window.navigator, например windows.navigator.browserLanguage или window.navigator.language, но эти свойства представляют собой язык установленный в операционной системе или языковую версию браузере. Такие свойства не помогут вам получить предпочтительные языки установленные пользователем.
Единственный верный способ получения предпочтительных пользовательских языков (значение заголовка Accept-Language) состоит в написании серверного кода. Например, следующая ASP.NET-страница использует возможность серверного свойства Request.UserLanguages для установки предпочтительных языков для JavaScript-переменной acceptLanguage (которая затем позволяет получить доступ к значению через клиентский JavaScript):
Для того, чтобы этот код заработал информация о культуре ассоциированная со значением acceptLanguage должна быть включена на странице. Например, если чья-то предпочитаемая культура fr-FR (французский, Франция), то вам необходимо включить файл jQuery.glob.fr-FR.js или jQuery.glob.all.js на страницу, иначе информация о культуре не будет доступна. Пример 6_AcceptLanguages.aspx демонстрирует способ реализации такого поведения.
Если информация о культуре предпочтительного языка пользователя не включена на странице, то метод $.preferCulture() будет использовать нейтральную языковую культуру (например, будет использован jQuery.glob.fr.js вместо jQuery.glob.fr-FR.js). Если отсутствует и информация о нейтральной культуре, то метод $.preferCulture() будет использовать культуру по умолчанию (английскую).
Одной из целей создания плагина jQuery Globalization является желание упростить построение виджетов на базе jQuery, которые используются с разными культурами.
Мы хотели убедиться в том, что плагин jQuery Globalization может работать с существующими плагинами jQuery UI, такими как плагин DatePicker. Для этого мы создали измененную версию DatePicker, которая использует все преимущества плагина jQuery Globalization во время отображения календаря. Следующая картинка иллюстрирует что произойдет когда вы добавите плагин jQuery Globalization и исправленный jQuery UI DatePicker на страницу и выберите индонезийскую предпочтительную культуру:
Обратите внимание, заголовок с днем недели отображается с использованием аббревиатур дней недели на индонезийском языке. Более того, месяца отображаются так же на индонезийском языке.
Вы можете загрузить измененную версию jQuery UI DatePicker с нашей страницы на github. Или вы можете использовать версию включенную в пример 7_DatePicker.htm.
Я очень рад тому, что мы продолжаем участие в сообществе jQuery. Плагин глобализации – это третий плагин, который мы выпустили.
Мы очень благодарны за огромное количество отзывов и пожеланий на наши прототипы плагинов jQuery templating and data-linking, которые мы выпустили ранее в этом году. Мы так же хотим поблагодарить команды jQuery и jQuery UI за работу с нами над этими плагинами.
В прошлом месяце я рассказывал в блоге о том, как Microsoft начала поставлять код в jQuery и о нашем первом проекте, над которым мы работали – шаблоны и связывание данных в jQuery (о связывании на Хабре).
Сегодня, мы выпустили прототип нового плагина под названием jQuery Globalization, который позволяет добавить поддержку глобализации в ваши JavaScript-приложения. Этот плагин включает информацию о глобализации для свыше 350 культур от шотландской кельтской, фризской, венгерской, японской до канадского английского. Мы выпустим этот плагин для сообщества с открытым исходным кодом.
Вы можете загрузить наш прототип плагина jQuery Globalization из репозитория на Github:http://github.com/nje/jquery-glob
Кроме того, отсюда вы можете загрузить набор примеров, которые демонстрируют некоторые простые юзкейсы.
Понятие глобализации
Плагин jQuery Globalization упрощает для вас парсинг и форматирование чисел, валют и дат для разнообразных культур в JavaScript. Например, вы можете использовать плагин для отображения правильного символа валют для разных культур:
Мы так же можете использовать плагин для форматирования дат, так чтобы день и месяц отображались в правильном порядке и правильно переводились:
Обратите внимание на то, как отображается год на арабском – 1431. Это потому, что значение года конвертировано согласно арабскому календарю.
Нам привычны некоторые культурные различия, такие как разные валюты или разные наименование месяцев. Другие могут стать сюрпризом и удивить. Например, в некоторых культурах группировка чисел представлена необычно. В культуре «te-IN» (Телугу, Индия) группы содержат сначала три числа, затем по два. Значение 1000000 (один миллион) должно быть написано как «10,00,000». Некоторые культуры вообще не группируют числа. Все эти присущие культуры различия поддерживаются плагином jQuery Globalization автоматически.
Получение правильного представления дат может особенно изощренным. В разных культурах представлены разные календари, такие как грегорианский или календарь UmAlQura. Некоторые культуры могут иметь даже несколько календарей. Например, японская культура использует грегорианский и японский календари, которые содержат эпохи названные в честь Японских императоров. Плагин jQuery Globalization включает методы для конвертирования дат между разнообразными календарями.
Использование языковых тегов
Плагин jQuery Globalization использует языковые теги определенные в стандартах RFC 4646 и RFC 5646 для идентификации культур (http://tools.ietf.org/html/rfc5646). Языковой тег состоит из одного или более субтегов разделенных дефисом. Например:
| Языковой тег | Язык |
| en-AU | Английский (Австралия) |
| en-BZ | Английский (Белиз) |
| en-CA | Английский (Канада) |
| Id | Индонезийский |
| zh-CHS | Китайский (упрощенное письмо) |
| Zu | Зулу |
В пакете загрузки плагина jQuery Globalization содержится папка globinfo, в которой находится информация по каждой из 350 культур. На самом деле, в папке более 700 файлов, поскольку она содержит и минимизированные версии.
Например, в папке globinfo есть файлы с наименованием jQuery.glob.en-AU.js (Австралийский Английский), jQuery.glob.id.js (Индонезия), and jQuery.glob.zh-CHS (Упрощенный Китайский).
Пример: установка требуемой культуры
Представьте себе ситуацию, когда вам требуется создать немецкий сайт и вы хотите отформатировать все даты, валюту и числа с использованием немецкий соглашений о формате прямо в JavaScript на клиенте. HTML-разметка для этой страницы может выглядеть так:
Обратите внимание на теги span. Они определяют области на странице, которые нам требуется отформатировать с помощью плагина jQuery Globalization. Мы хотим отформатировать цену продукта, дату изготовления продукта и количество единиц на складе.
Чтобы применить плагин jQuery Globalization мы должны добавить три JavaScript-файла на страницу: библиотеку jQuery, сам плагин jQuery Globalization и файл с информацией о конкретной культуре:
Тут я статически добавил JavaScript-файл jQuery.glob.de-DE.js, который содержит информацию о культуре для Германии. Языковой тег “de-DE” используется для немецкого языка в Германии.
Теперь, когда у меня есть все необходимые скрипты, я могу использовать плагин jQuery Globalization для форматирования значений цены продукта, даты производства и количества единиц товара на складе с использованием следующего JavaScript-кода на стороне клиента:
Плагин jQuery Globalization расширяет библиотеку jQuery, добавляя новые методы, которые называются preferCulture() и format(). Метод preferCulture() позволяет вам установить текущую культуру, которая будет использоваться другими методами плагина jQuery Globalization по умолчанию. Обратите внимание, метод preferCulture() принимает параметр со значением языкового тега. Метод определить ближайшую подходящую культуру, которая соответствует переданному языковому тегу (параметр может содержать перечисление языковых тегов – прим. перев.).
Метод $.format() используется для форматирования значений валют, дат и чисел. Второй параметр переданный в $.format() – это указатель формата. Например, передача “c” означает, что значение должно быть отформатировано как денежное. В файле ReadMe на github можно найти детальное описание возможных значений этого параметра: http://github.com/nje/jquery-glob.
Когда мы откроем страницу в браузере, все будет отформатировано так, как и положено по соглашениям немецкого языка. Символ евро использован как символ валюты. Дата отформатирована с использованием немецкий наименований дня недели и месяца. И наконец, точка вместо запятой использована в качестве разделителя:
Вы можете посмотреть на этот результат с помощью файла 3_GermanSite.htm в примерах.
Пример: динамический выбор культуры пользователем
В предыдущем примере мы явно указали на то, что хотим глобализировать данные для немецкого языка (сославшись на файл jQuery.glob.de-DE.js). Давайте теперь посмотрим на первый из нескольких пример, который демонстрирует возможность динамической установки культуры для глобализации.
Представьте, что вы хотите отобразить ниспадающий список со всеми 350 культурам на странице. Вы бы хотели, чтобы когда кто-нибудь выберет культуру из списка, то все значения на странице были отформатированы с использованием выбранной культуры.
Ниже представлен HTML-код для такой страницы:
Обратите внимание, что все наши даты помещены в тег <span> с атрибутом data-date (атрибуты data-* – это новая функция HTML5, которая так же применима и в старых браузерах). Мы отформатируем даты содержащиеся в атрибуте data-date после того как пользователь выбрал культуру из списка.
Для того, чтобы отображать даты для всех возможных культур, мы включим в страницу ссылку на файл jQuery.glob.all.js:
Плагин jQuery Globalization поставляется с файлом jQuery.glob.all.js. Этот файл содержит информацию о глобализации для всех более чем 350 культур, которые поддерживает плагин. В минимизированном виде плагин немаленький – 367KB. Из-за размера файла, кроме случаев когда вам действительно надо использовать абсолютно все культуры, мы рекомендуем вам добавлять отдельные JavaScript-файлы для определенных культур, которые вам действительно требуются, вместо того, чтобы включать весь код jQuery.glob.all.js на странице. В следующем примере я продемонстрирую как можно загрузить языковые файлы динамически по мере надобности.
Далее, мы реализуем ниспадающий список, который содержит все доступные культуры. Мы можем использовать свойство $.cultures для получения списка всех загруженных культур:
И наконец, мы напишем код на jQuery, который обойдет все элементы span с атрибутами data-date и отформатирует даты:
Метод parseDate() плагина jQuery Globalization используется для конвертирования строкового представления даты в объект даты JavaScript. Метод format() используется для форматирования даты. Спецификатор формата “D” указывает на то, что дата должно быть отформатирована в длинном представлении (long date format).
И теперь наше содержимое будет корректно глобализировано для каждого из 350 языков когда пользователь сделает выбор на странице. Вы можете увидеть этот пример в файле 4_SelectCulture.htm.
Пример: динамическая загрузка файлов глобализации
Как я упоминал ранее в предыдущем разделе, вы должны избегать использования файла jQuery.glob.all.js на страницах везде, где только это возможно в связи с большим его размером. Лучшей альтернативой является динамическая загрузка нужной вам информации о глобализации.
Например, представьте, что вам нужно создать ниспадающий список, который отображает следующий перечень языков:
Следующий код на jQuery выполняется в момент выбора пользователем нового языка из списка. Код проверяет, загружен ли уже файл глобализации для выбранного языка. Если файл глобализации еще не был загружен, то он загружается динамически с использованием метода $.getScript() библиотеки jQuery.
Метод globalizePage() вызывается после того, как файл глобализации загружен и в нем содержится код для проведения глобализации.
Преимущество данного подхода состоит в том, что он позволяет вам избежать загрузки файла jQuery.glob.all.js. Вместо этого, вам требуется загрузить только те файлы, которые требуются и такая загрузка произойдет лишь раз.
Файл 5_Dynamic.htm из примеров демонстрирует как реализован этот подход.
Пример: автоматическая установка предпочитаемого языка пользователя
Многие сайт определяют предпочитаемый язык пользователя на основании настроек браузер и используют автоматически глобализированный контент. Пользователь может сам задать предпочтительный язык в своем браузере. Затем, когда он запросит страницу, его языковая настройка будет включена в запрос с помощью заголовка Accept-Language.
Используя Internet Explorer, вы можете установить предпочтительный язык с помощью следующих шагов:
- опция меню Tools, Internet Options;
- вкладка General;
- кнопка Languages в разделе Appearance;
- кнопка Add для добавления нового языка к списку;
- переместите ваш предпочитаемый язык вверх по списку.
Обратите внимание, что вы можете перечислить несколько языков в окне Language Preference. Все эти языки, в соответственном порядке, отправятся с помощью заголовка Accept-Language вместе с запросом к странице:
Accept-Language: fr-FR,id-ID;q=0.7,en-US;q=0.3
Удивительно, но не существует возможности получить значение заголовка Accept-Language через JavaScript на клиенте. Microsoft Internet Explorer и Mozilla Firefox поддерживают набор языковых свойств через объект window.navigator, например windows.navigator.browserLanguage или window.navigator.language, но эти свойства представляют собой язык установленный в операционной системе или языковую версию браузере. Такие свойства не помогут вам получить предпочтительные языки установленные пользователем.
Единственный верный способ получения предпочтительных пользовательских языков (значение заголовка Accept-Language) состоит в написании серверного кода. Например, следующая ASP.NET-страница использует возможность серверного свойства Request.UserLanguages для установки предпочтительных языков для JavaScript-переменной acceptLanguage (которая затем позволяет получить доступ к значению через клиентский JavaScript):
Для того, чтобы этот код заработал информация о культуре ассоциированная со значением acceptLanguage должна быть включена на странице. Например, если чья-то предпочитаемая культура fr-FR (французский, Франция), то вам необходимо включить файл jQuery.glob.fr-FR.js или jQuery.glob.all.js на страницу, иначе информация о культуре не будет доступна. Пример 6_AcceptLanguages.aspx демонстрирует способ реализации такого поведения.
Если информация о культуре предпочтительного языка пользователя не включена на странице, то метод $.preferCulture() будет использовать нейтральную языковую культуру (например, будет использован jQuery.glob.fr.js вместо jQuery.glob.fr-FR.js). Если отсутствует и информация о нейтральной культуре, то метод $.preferCulture() будет использовать культуру по умолчанию (английскую).
Пример: использование плагина jQuery Globalization вместе с jQuery UI DatePicker
Одной из целей создания плагина jQuery Globalization является желание упростить построение виджетов на базе jQuery, которые используются с разными культурами.
Мы хотели убедиться в том, что плагин jQuery Globalization может работать с существующими плагинами jQuery UI, такими как плагин DatePicker. Для этого мы создали измененную версию DatePicker, которая использует все преимущества плагина jQuery Globalization во время отображения календаря. Следующая картинка иллюстрирует что произойдет когда вы добавите плагин jQuery Globalization и исправленный jQuery UI DatePicker на страницу и выберите индонезийскую предпочтительную культуру:
Обратите внимание, заголовок с днем недели отображается с использованием аббревиатур дней недели на индонезийском языке. Более того, месяца отображаются так же на индонезийском языке.
Вы можете загрузить измененную версию jQuery UI DatePicker с нашей страницы на github. Или вы можете использовать версию включенную в пример 7_DatePicker.htm.
Заключение
Я очень рад тому, что мы продолжаем участие в сообществе jQuery. Плагин глобализации – это третий плагин, который мы выпустили.
Мы очень благодарны за огромное количество отзывов и пожеланий на наши прототипы плагинов jQuery templating and data-linking, которые мы выпустили ранее в этом году. Мы так же хотим поблагодарить команды jQuery и jQuery UI за работу с нами над этими плагинами.
