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

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

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

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

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

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

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

Давайте посмотрим на пример на основе Validator __41 | 4 плагина от 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 __45 | | 10__6 , мне было любопытно, что авторы стандарта призвана решить с ним:

Типичный пример привел в спецификации символ котировок.Символ меняется между языками.Для решения этой проблемы для <q> element ^{11 | __10 (который знаменует вверх короткая цитата, как правило, завернутый в кавычки), мы можем использовать :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, который описывает только глобальный логику для изменения __16 давал элемента | representation в соответствии с текущим языком, и наши локализованные строки полностью HTML .

Строительство высокого уровня API

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

myelement.i18n("Hello");

Это устанавливает локализованные Hello строку в качестве внутреннего содержания myelement, где myelement является экземпляром $Element класса, кото …

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