[Temp] Написание кросс-браузерного кода

Автор: Topol Среда, Май 2nd, 2012 Нет комментариев

Рубрика: Операционные системы

Одинаковая разметка: Написание кросс-браузерного кода:

Недавно я рассказывал на MIX 10 о передовом опыте касаемо кросс-браузерного кода. Основное внимание было направлено не на какие-либо конкретные особенности, а на то, как веб-разработчики могут надежно написать код, который приспособится к кросс-браузерным различиям.

IE9 сокращает эти различия и позволяет разработчикам использовать ту же разметку во всех браузерах. Включение одинаковой разметки означает поддержку функций, которые заставляют HTML, JavaScript, CSS «просто работать». Тем не менее включение одинаковой разметки это улица с односторонним движением. Каждый браузер должен предоставить правильные функции, но разработчикам также необходимо правильно определить и использовать возможности, когда они будут готовы.
Что касается правильного обнаружения особенностей, я поделюсь с вами примерами различных вопросов и оптимальной практики, которую я видел в Интернете. Самое главное я предлагаю шаблоны, которые могут помочь вам переписывать подобный код, чтобы воспользоваться одинаковой разметкой. Сейчас я сосредоточусь на более конкретных примерах для иллюстрации основных понятий, но в будущих постах охвачу более сложные примеры подробнее. Позвольте мне начать с набора руководящих принципов:

Одинаковая разметка: принципы

То, что НУЖНО делать

      1 Протестируйте, поддерживает ли браузер эти функции перед их использованием.

 

      2 Протестируйте на известные проблемы, перед применением новых решений

То, что НЕ НУЖНО делать

      1 Браузерное обнаружение — не используйте идентификацию браузера (например, navigator.userAgent), чтобы изменить поведение страницы.

 

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

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

Код:
if( condition ) {
// Primary Code
} else {
// Alternate Code
}

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

Что НЕ НУЖНО делать: выявление Браузера — Пример Регистрация события

Вы можете легко проверить эффекты самостоятельно. Код переключает событие модели, основанное на обнаружении браузера (что весьма плохо). Запуск этого в IE9 показывает, что addEventListener не используется, даже если поддерживается:

Код:
// [TR] Different listeners added for illustration
function f1() { document.write(«addEventListener was used»); }
function f2() { document.write(«attachEvent was used»); }

// DON’T USE THIS: Detecting specific browsers
if(navigator.userAgent.indexOf(«MSIE») == -1) {
window.addEventListener(«load», f1, false);
} else {
window.attachEvent(«onload», f2);
}

Попробуйте сами!
IE9 Вывод: был использован attachEvent

Что НУЖНО делать: Функция обнаружения — Пример Регистрации события

Следующий код показывает, как переключаться между событиями с помощью функции обнаружения. Вместо проверки IE, он проверяет наличие addEventListener. Этот код будет продолжать работать правильно в старых браузерах без addEventListener, но еще важнее, что теперь addEventListener используется всегда, когда он будет доступен. Короче говоря, этот подход позволяет установить одинаковую разметку в IE9 и других браузерах.

Код:
// [TR] Different listeners added for illustration
function f1() { document.write(«addEventListener was used»); }
function f2() { document.write(«attachEvent was used»); }

// Use this: Feature Detection
if(window.addEventListener) {
window.addEventListener(«load», f1, false);
} else if(window.attachEvent) {
window.attachEvent(«onload», f2);
}

Попробуйте!
IE9 вывод: был использован addEventListener

Задача нахождения правильного кода для запуска в браузерах важна, поэтому функция обнаружения все чаще использовалась в страницах и документах. Функция обнаружения позволяет кросс-браузерному коду «просто работать», не требуя, чтобы вы знали возможности каждого браузера раньше времени. Один фрейм почти целиком основывается на функции обнаружения JQuery. На самом деле jQuery.support подскажет как можно использовать функцию обнаружения JQuery на вашем собственном сайте.

Что НУЖНО делать: Обнаружение поведения - getElementById пример из JQuery

В дополнение к прямой функции обнаружения, JQuery также широко использует обнаружение поведения. Она делает это путем запуска тестов для известных проблем, чтобы определить, нужны ли дополнительные решения. Ниже приводится несколько измененный фрагмент исходного кода JQuery , который проверяет, включает ли getElementById в себя элементы с «именем» атрибутов. Это ошибка в IE, которая была исправлена в IE8.

Код:
// We’re going to inject a fake input element with a specified name
var form = document.createElement(«div»),
id = «script» + (new Date).getTime();
form.innerHTML = «<a name=’» + id + «‘/>»;

// Inject it into the root element, check its status, and remove it quickly
var root = document.documentElement;
root.insertBefore( form, root.firstChild );

// The workaround has to do additional checks after a getElementById
// Which slows things down for other browsers (hence the branching)
if ( document.getElementById( id ) ) {
// … Workaround code …

// [TR] Added for illustration
document.write(«getElementById workaround was used»);
}
// [TR] Added for illustration
else document.write(«No workaround was used»);

root.removeChild( form );

Попробуйте!
Что НЕ НУЖНО делать: Расчет несвязанных функций — реальный пример

В заключении я хотел бы коснуться расчета несвязанных функций. Это то, что мы видели в ряде примеров, когда мы тестировали совместимость IE8. Сайты, страдающие от этой проблемы, могла бы выполнять функцию обнаружения функций, а затем продолжать использовать множество других функций без проверки, если они поддерживаются. Эти изменения проиллюстрирует случай, когда сайт использует PostMessage и addEventListener API, но тестировался лишь первый. Поддержка PostMessage была добавлен в IE8, ноaddEventListener появился лишь в IE9. Если вы запустите этот пример в IE8, это приводит к ошибке сценария, препятствуя выполнению следующего скрипта

Код:
// [TR] Try-catch block added to trap the script error in IE8
try {
function fn() {}

if(window.postMessage) {
window.addEventListener(«message», fn, false);

// [TR] Added for illustration
document.write(«Message listener registered successfully»);
} else {
// … workaround for when postMessage is unavailable …

// [TR] Added for illustration
document.write(«postMessage is not supported, using workaround»);
}

} catch(e) {
document.write(«Message listener registration FAILED»);
}

Попробуйте!
IE7 Вывод: PostMessage не поддерживается
IE8 Вывод: регистрация Message listener не выполняется
IE9 Вывод: Успешно зарегистрирован Message listener

Что НУЖНО делать: Функция обнаружения — Тестирование несвязанных функций Независимо

Исправленный вариант приведенного выше примера приводится ниже. Он проверяет и PostMessage и addEventListener перед их использованием.

Код:
function fn() {}

if(window.postMessage) {
if(window.addEventListener) {
window.addEventListener(«message», fn, false);
} else if(window.attachEvent) {
window.attachEvent(«onmessage», fn);
}

// [TR] Added for illustration
document.write(«Message listener registered successfully»);
} else {
// … workaround for when postMessage is unavailable …
// [TR] Added for illustration
document.write(«postMessage is not supported, using workaround»);
}

Попробуйте!
IE7 Вывод: PostMessage не поддерживается
IE8 Вывод: Успешно зарегистрирован Message listener
IE9 Вывод: Успешно зарегистрирован Message listener

Заключение

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

Источник: thevista.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты