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

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

Недавно я рассказывал на 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

Заключение

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

Тони Росс (Tony Ross), программный менеджер



Источник: http://blogs.msdn.com/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx
Перевод: houseboy