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

Давайте посмотрим, что предлагают нам браузеры сегодня, и что мы можем применить для написания невероятно маленьких и удобных решений, не прибегая к 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], который постоянно обновляется. Кое-что из того, что я рассказываю вам о браузерной поддержке сейчас, через несколько недель может устареть. Это темп нашей жизни и мы должны поддерживать его.

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

Масштабный вариант использования 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)для включения и выключения класса. Позже в этом разделе мы увидим, как это действенно. Мы сможем избежать введения многих циклов, просто добавляя класс к элементу родителя.

Анимация в 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 вы можете прочесть в четвертом разделе этой книги.