Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Очень скоро, примерно через несколько лет (и к тому времени, как вы будете читать эту книгу), мы продвинемся еще дальше. У нас есть HTML5, мы владеем поддержкой CSS3, у нас очень много всего, с чем можно развлечься в браузерах, которые установили мы и наши пользователи. Да, IE 6 все еще наш бич, и IE 8 будет с нами еще какое-то время. Но в общем и целом наше положение не такое уж и плохое. Такие библиотеки, как jQuery, дают основные преимущества при исправлении недочетов в старых браузерах, но они также вызывают и некоторую неудовлетворенность. А причина в том, что мы злоупотребляем ими.

Как сообщество, мы стали зависимы от jQuery. Это и понятно, но далеко не хорошо. Библиотека jQuery написана на JavaScript, но это не одно и то же; она исходно не встроена в браузер. С расцветом мобильного Интернета многие отворачиваются от jQuery, потому что она слишком «тормозит» и тяжела для наших модных карманных устройств. Найти хороших разработчиков JavaScript сложно: на каждое объявление о вакансии на должность разработчика JavaScript Вы получите около двадцати резюме от людей, которые в жизни не писали на чем-то, кроме jQuery. Это «обескровливает» наше ремесло.

Давайте посмотрим, что предлагают нам браузеры сегодня, и что мы можем применить для написания невероятно маленьких и удобных решений, не прибегая к jQuery. Многие из этих вещей также помогут нам написать более чистый и быстрый jQuery-код. Из-за того что библиотека jQuery абстрагируется от многих проблем, с которыми мы сталкиваемся как разработчики, чересчур легко написать код, который выглядит просто, но погружает результаты в пучину циклов и сравнений. А это – одна из причин того, что сайты «тормозят».

Сила смешивания и сочетания

В Интернете основной хитростью при разработке кода, который будет кратким, неизменяемым, эффективным и легким для поддержания, является разделение и делегирование. С jQuery мы забыли многое из этого. Чрезмерная длина ломает CSS селекторы в наших скриптах, когда код HTML изменяется.

Злоупотребление селекторами классов вынуждает разработчиков HTML добавлять много ненужных классов для того, чтобы использовать определенный плагин. При создании и задании стилей HTML через jQuery сложно найти, откуда берется цвет фона, когда вас просят изменить его. Чтобы написать код, который будет легко поддерживать, вспомните, какие технологии хороши для этого. С момента открытия jQuery они несколько изменились:

• HTML – это структура и база для построения

Ваш HTML должен иметь смысл и обеспечивать базовую функциональность: ссылки на другие сайты, кнопки, которые отсылают формы к скрипту для перезагрузки страницы, и элементы, создающие контент. Дело в том, что когда все «слетает», браузер остается только с HTML. Если HTML несет смысл, вы – победитель. Но если есть кнопка, которая ничего не делает, вы будете раздражать пользователей.

• CSS определяет интерактивность и визуальность.

Мы шагнули за пределы шрифтов и цвета, к анимации и перемещениям. Медиазапросы позволяют нам делать всевозможные макеты для разных устройств. Используя генерирование контента, мы можем создавать элементы для достижения определенного визуального эффекта без «загрязнения» тегами div и span.

• JavaScript привносит дополнительные функции.

Со скриптом загрузки и AJAX (асинхронный JavaScript и XML), вы можете загружать контент по требованию. Можете добавлять обработчики событий, чтобы элементы реагировали на нажатие пальцев и клик мыши, чтобы они могли считывать ориентацию устройства, и устанавливать, сколько информации прокрутил пользователь или где находится курсор мыши.

Хитрость в том, чтобы объять все эти новые возможности и не позволить старым браузерам «задушить» их. В конце концов, старые приемы никому не помогут. Да, вы могли бы анимировать меню в IE 6, но к чему напрягаться и писать эту функцию, которую «не мешало бы иметь», когда она встроена в другие браузеры?

Функции, доступные нам сейчас

Давайте посмотрим на некоторые функции браузеров, которые мы можем использовать сейчас. Чтобы получить последнюю информацию о том, какие браузеры их поддерживают, обратитесь к великолепному источнику When Can I Use[57], который постоянно обновляется. Кое-что из того, что я рассказываю вам о браузерной поддержке сейчас, через несколько недель может устареть. Это темп нашей жизни и мы должны поддерживать его.

QUERYSELECTOR и QUERYSELECTORALL

Теперь, когда мы узнали об успехе jQuery, у браузеров есть способ обращения к элементам на странице с помощью селекторов CSS. Метод querySelector обращается к одному элементу, а querySelectorAll – к списку соответствующих элементов. Синтаксис селектора подобен CSS. Поэтому, document.querySelector(‘#content p’) обратится к первому тегу параграфа в элементе с ID content; document.querySelector(‘nav li: last-child’) обратится к последней позиции списка в первом элементе nav; а document.querySelectorAll(‘p’) обратится ко всем параграфам документа. Все просто.

Работаем с классами: CLASSLIST

Масштабный вариант использования jQuery – обратиться сразу ко многим элементам, и изменить стили по методу css(). Это удобно, но в тоже время, раздражает, потому что вы вставляете информацию о стиле в JavaScript. Гораздо проще было бы добавлять класс к рассматриваемому элементу, а остальное предоставить CSS. Из-за этого мы часто повторяли селекторы CSS в jQuery и наших таблицах стилей. Мы вынуждены были делать это, потому что браузеры не поддерживали селекторы CSS3, но сейчас-то поддерживают!

Невероятную мощь дает возможность тестировать классы в элементах HTML и динамично добавлять и удалять их. В JavaScript мы сейчас имеем свойство classList в HTML элементах, которое содержит коллекцию применяемых CSS классов. Раньше это делалось через className, который состоял из простой символьной строки и от нас зависело, найдем ли мы другие строки в ней, или добавим и удалим подстроки из нее. С помощью classList у нас для этого есть методы. Мы можем использовать element.classList.add(name) для добавления класса, element.classList.remove(name) – для его удаления, element.classList.contains(name) для проверки, применяется ли класс, и element.classList.toggle(name) для включения и выключения класса. Позже в этом разделе мы увидим, как это действенно. Мы сможем избежать введения многих циклов, просто добавляя класс к элементу родителя.

Меняем плавно: CSS TRANSITIONS

Анимация в jQuery в самом деле легкая и смотрится очень ровно. Это из-за того, что jQuery включены easing equations[58], и сегодня они есть также в CSS. Поэтому, если вы хотите растянуть заголовок и поменять цвет его фона со светло-зеленого на оранжевый, вы можете использовать фрагмент со следующей страницы[59].

h1 {

background: #c0ffee;

line-height: 1em;

padding: 0.5em 1em;

– webkit-transition: 1s;

– moz-transition: 1s;

– ms-transition: 1s;

– o-transition: 1s;

transition: 1s;

}

h1:hover, h1:focus {

background: goldenrod;

line-height: 3em;

}

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

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

Другой плюс в том, что эти перемещения поддерживаются на аппаратном уровне. А это значит, что они могут происходить более плавно и тратить меньше зарядки в мобильных устройствах. Пока еще не все браузеры способны на это (некоторым нужна 3D-трансформация от 0 на оси Z в виде хака). Но, несомненно, со временем эта функция станет стандартом. Более подробно о перемещениях CSS3 вы можете прочесть в четвертом разделе этой книги.

Контент, сгенерированный посредством CSS

Порой разработчикам нужно больше HTML элементов для создания стиля (возьмем, как пример из прошлого, закругленные углы). В большинстве случаев мы используем для этого jQuery. С генератором контента CSS нам это больше не нужно. Мы можем создавать элементы в CSS и одновременно придавать им стиль. Допустим, вы хотите, чтобы все внешние ссылки имели красную стрелку в конце:

a[href^="http"]: after {

content: '';

color: #c00;

}

Этот простой CSS код имеет свою «изюминку». Мы определяем (устанавливаем), что для каждой ссылки с атрибутом href, которая начинается с http, текстовой узел – в данном случае это красная стрелка – нужно добавлять в содержимое ссылки.

Делегирование событий: от многих до одного

jQuery дает вам одну большую возможность. Вы можете быстро перебирать элементы, чтобы изменять что-нибудь в них или устанавливать обработчики событий. Но на самом деле это и не нужно. Делегирование событий[60] – необычайно мощный инструмент для создания веб-интерфейсов. По существу, вместо того, чтобы устанавливать обработчики событий на каждый элемент внутри главного элемента контента, вы назначаете один обработчик для основного содержимого. А это уже позволит браузерам упорядочить события.