Письмо передний конец кода часто требует от разработчиков для решения проблемы интернационализации в каком-то уровне.

Несмотря на текущего standard ¹ , которая вводит несколько новых тегов, просто добавляя поддержку различных языков в плагине JavaScript-прежнему сложно.В результате, для любого нового проекта, вы должны построить решение с нуля или адаптировать различные существующие интерфейсы API от других плагинов, которые вы используете .

В этой статье я опишу свой подход с лучше dom ² решить проблему интернационализации.С последней статье по этому поводу, “ Дать JavaScript Library лучше для DOM ³ ” Я пересмотрела концепцию, чтобы решить вопросы, поднятые через обратную связь .

Решение было первоначально предназначено, чтобы быть набор интернационализации интерфейсы для плагинов, расширений и т.д. . Это не делает в значительной степени полагаться на библиотеки лучше DOM, так что это может быть адаптирована к любой существующей JavaScript библиотеки .

Типичный решение Problem

Существуют различные API-интерфейсы для изменения языков в JavaScript | __0.Большинство из них содержат три основные функции:

1. Первая функция регистрирует локализованную строку по ключу и языка .
2. Вторая устанавливает локализованную строку для конкретного элемента .
3. Третий используется для изменения текущего языка .

Давайте посмотрим на пример на основе Validator ⁴ плагина от JQuery Tools ⁵ библиотека.Плагин поддерживает локализацию ошибок валидации через JavaScript.Сообщения об ошибках умолчанию хранятся в каталоге $.tools.validator.messages объект .

⁶

Для клавиш, плагин использует CSS селекторы (для упрощения кода).Если вы хотите, чтобы обеспечить сообщения об ошибках на других языках, вы должны использовать $.tools.validator.localizeМетод, следующим образом:

$.tools.validator.localize("fi", {
	":email" : "Virheellinen sähköpostiosoite",
	":number" : "Arvon on oltava numeerinen",
	"[max]" : "Arvon on oltava pienempi, kuin $1",
	"[min]" : "Arvon on oltava suurempi, kuin $1",
	"[required]" : "Kentän arvo on annettava"
});

Этот метод заполняет финского локализации.$.tools.validator.messages Объект будет выглядеть следующим образом:

⁸

Теперь, если вы хотите использовать финскую локализацию в форме, то вам нужно изменить язык по умолчанию (английский язык) через lang опции конфигурации:

$("#myForm").validator({lang: "fi"});

Плагин реализует типовое решение, что мы имеем в настоящее время.Взглянув на подходы, вроде этого, я нашел несколько общих недостатков:

1. Obtrusive Вы должны добавить вызов функции JavaScript, если язык текущей страницы, отличается от значения по умолчанию (обычно на английском), используемого в качестве плагина .
2. Ineffective Сменить язык динамически, вы должны вызвать определенную функцию, а затем коснуться DOM каждого соответствующего элемента, чтобы обновить innerHTML, в зависимости от нового языка .
3. Трудно maintain Каждый модуль имеет свой собственный набор API, .

Первый недостаток является наиболее важным.Если ваш проект имеет много компонентов, переход на не-языком по умолчанию на начальной странице загрузки для каждого плагина будет болезненным.Если проект получает данные с помощью AJAX звонки, то те же самые шаги были бы сделать для будущего содержания, а также.Давайте попробуем решить все эти недостатки.Во-первых, мы должны пройти через технические вещи .

:lang Псевдо-Class

Помните :lang Псевдо-класс от CSS2?Это редко, но когда я впервые прочитал об этом в specification ¹⁰ , мне было любопытно, что авторы стандарта призвана решить с ним:

Если язык документа определяет, как человеческий язык элемента определяется, можно записывать селекторы CSS, которые совпадают с элементом, на базе его языка .

Типичный пример привел в спецификации символ котировок.Символ меняется между языками.Для решения этой проблемы для <q> element ¹¹ (который знаменует вверх короткая цитата, как правило, завернутый в кавычки), мы можем использовать :lang псевдо-класс:

:lang(fr) > q { quotes: '« ' ' »' }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A' }

Важное различие между :lang псевдо-класса и простоатрибут селектор, как [lang=fr], что только последние матчи элементы, которые имеют lang атрибут.Таким образом, :lang псевдо-класс всегда безопаснее, чем в варианте атрибута, потому что она работает правильно, даже если :lang атрибут не был установлен на элементе .

Пример выше показано, как изменить представление контента в соответствии с действующим язык с помощью CSS.Это важно, потому что это позволяет нам поставить логику, связанную с изменением языка в CSS.

Пример символа, для кавычках это хорошо, но она затрагивает небольшое количество случаев и поэтому не может использоваться в большинстве типичных сценариев — обычные строки, как правило, очень различны в разных языках.Нам нужен трюк, который позволяет нам изменить содержимого элемента completely .

Изменение содержимого элемента с CSS

Браузеры, поддерживающие спецификации CSS2, введенные псевдо-элементы, которые, вместо того, описания конкретного состояния, как псевдо-классов, позволяют нам укладывать определенные части документа .

Обратите внимание, что Internet Explorer 8 имеет известную проблему в ее осуществлении в том, что он не поддерживает синтаксис с двойным двоеточием для определения псевдо-элементы.Проблема была решена в Internet Explorer 9, так что если вам нужна поддержка версии 8, удостоверьтесь, чтобы использовать синтаксис одной толстой кишки для любой псевдо-элемента .

Реальные драгоценные камни ::before и ::after, которые позволяют добавлять дополнительный контент до или после элемента в innerHTML.Они могут выглядеть просто, но у них есть тонны вариантов использования, которые решают проблемы в очень чистым способом .

Давайте начнем с основ.Оба ::before и ::after ввести недвижимость CSS, content.Это новое свойство определяет, какой контент будет предварять или добавить в элемент в innerHTML.Значение content атрибут может быть любой из следующих:

• Текстовая строка (но не HTML строка),
• Изображение,
• Счетчик,
• Значение атрибута (ы) .

Наш главный интерес добавления текстовой строки.Допустим, у нас CSS вроде этого:

#hello::before {
   content: "Hello ";
}

Если элемент с идентификатором hello содержит строку world, то браузер будет отображать Hello world .

<p id="hello">world</p>

Мы могли бы переписать наш CSS, используя attr функцию:

#hello::before {
   content: attr(id) " ";
}

Тогда, элемент будет отображать hello world в нижнем регистре, потому что id атрибут имеет в нижнем регистре строковое значение .

Теперь представьте, что hello элемент не имеет никакого внутреннего содержания.Мы могли бы изменить свое представительство полностью с помощью CSS.Это становится удобно, когда мы используем трюк в сочетании с :lang псевдо-класса:

#hello::before {
   content: "Hello";
}
#hello:lang(de)::before {
   content: "Hallo";
}
#hello:lang(ru)::before {
   content: "Привет";
}

Наша элемент hello сейчас не будет меняться в зависимости от языка текущей веб-страницы — нет необходимости вызывать любую функцию, чтобы изменить свое представительство в соответствии с языком текущей веб-страницы.Локализация обрабатывается значением lang атрибута на <html> элемента и несколько дополнительных правил CSS.Это то, что я называю CSS приводомinternationalization .

CSS-Driven Интернационализация: Улучшение

!

С публикацией оригинальную идею, я слышал, несколько человек жалуются, что эти правила могут добавить много CSS.Потому что моя первоначальная цель заключалась в использовании его для небольших плагинов JavaScript, я даже не думаю, что это может быть широко использован на этой странице.Тем не менее, философия CSS должен содержать логику представления, и я пытался использовать его для хранения различных многоязычный строки, которые на самом деле принадлежат к содержанию веб-страницы.Это не кажется правильным .

Через какое-то думая, я разработал усовершенствованную версию, которая решает эту проблему.Вместо того, чтобы текстовые строки в CSS, я использую attr функцию для чтения конкретного языка data-i18n-* атрибут, который содержит локализованную строку.Это ограничивает количество правил CSS мы можем добавить: одно правило новом языке .

Давайте перепишем локализацию hello элемента выше этого усовершенствованного метода.На этот раз, давайте наш веб-страницы некоторые глобальные CSS для поддержки немецкий и русский, в дополнение к английскому:

/* English (default language)*/
[data-i18n]::before {
   content: attr(data-i18n);
}
/* German */
[data-i18n-de]:lang(de)::before {
   content: attr(data-i18n-de);
}
/* Russian */
[data-i18n-ru]:lang(ru)::before {
   content: attr(data-i18n-ru);
}

Обратите внимание, что приведенный выше код не содержит каких-либо строку неизменной: Правила CSS являются общими .

Теперь, вместо того, чтобы локализованные строки текста в CSS, давайте добавим несколько пользовательских конкретного языка data-* атрибуты, которые содержат соответствующие значения.Наша hello элемент должен выглядеть следующим образом, который будет отображать различный контент в соответствии с языком текущей веб-страницы:

<p id="hello" data-18n="Hello" data-i18n-de="Hallo" data-i18n-ru="Привет"><p>

Вот оно что!Мы остались с минимальной дополнительной CSS, который описывает только глобальный логику для изменения __15 рамки элемента | representation в соответствии с действующим языке, и наши локализованные строки полностью HTML .

Корпус А API__3 высокого уровня |

В более-дом, есть две функции для поддержки CSS приводом интернационализации: $Element.prototype.i18n и DOM.importStrings.Первая функция изменяет локализованную строку для конкретного элемента.Чтобы не усложнять, я обычно использую английские строки в качестве ключей и значений по умолчанию.Это делает JavaScript более читабельным и понятным.Например:

myelement.i18n("Hello");

Это устанавливает локализованные Hello строку в качестве внутреннего содержания myelement, где myelemen ...

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров



Главная → Программирование → 23.06.2014 by coding.smashingmagazine.com