CEX.io

вторник, 23 октября 2012 г.

headjs - быстрая загрузка JavaScript кода, упрощение и модернизация вашего сайта

Использование библиотеки headjs, позволяет ускорить загрузку JavaScript кода, вашего сайта, а также полностью разместить весь код в секции <head>

Загружать скрипты, картинки и т.д. , безопасно использовать HTML5 и CSS3 в своих проектах. Использовать различные CSS в зависимости от разрешения экрана, пути, страны и браузера.

Перечислим основные возможности:

Загрузка JavaScript кода

Параллельная загрузка скриптов, но последовательное выполнение

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
   // готово!
});

Head JS загружает JavaScript файлы, а также картинки и др. без блокировки страницы. Ваша страница будет загружаться быстрее, даже если будет состоять из одного файла: текста и нескольких картинок.

Управление загрузкой JavaScript кода

вы нашли пример кода, в котором SCRIPT SRC тэги размещены внизу страницы, но код используется вверху. С использованием Head JS, это будет выглядеть так:

// использовать jQuery в теле страницы, даже если код еще не включен
head.ready(function() {
   $("#my").jquery_plugin();
});

// загружаем код jQuery, там где Вам потребуется в низу страницы
head.js("/path/to/jquery.js");

Расширение возможностей CSS

Head JS добавляет классы к корневым элементам HTML, можно сделать следующее:

/ CSS для браузеров без поддержки box-shadow /
.no-boxshadow .box {
   border: 2px solid #ddd;
}

основной упор делается на CSS3, можно легко добавить другие тесты,
но минимально необходимые.

Использование HTML5

Head JS позволяет использовать, продвинутую семантику HTML5



Определение разрешения экрана

Разработка страниц как для широкоформатных экранов с разрешением 1980px, так и для 10'' экранов наладонников и мобильных телефонов. Размер окна просмотра крайне важен при разработке для мобильных устройств.

/ размер экрана меньше, чем 1024 точки /
.lt-1024 #hero { background-image:(medium.jpg); }

/ тонкая настройка для мобильного телефона (меньше 640 точек)  /
.lt-640 #hero { background-image:(small.jpg); }

При изменении размеров окна вашего браузера, CSS правила будут динамически выполняться. Head JS будет выполнять эти правила в фоне.

Динамический CSS

Разные стили для различных состояний программы


Каждый раз, когда вызывается head.feature(), ваши CSS стили будут применяться.

CSS маршрутизатор

Применение CSS в зависимости от специфических путей и страниц

/ CSS применяется только для главной страницы (home page) /
#index-page.root-section {
}
/ делаем sidebar видимым только с url начинающемся с /plugins  /
.plugins-section #sidebar { display: block; }

Определение браузера

Можно назначить разные стили в зависимости от браузера.
Например стили, только для IE будут выглядеть так:

/ более старые версии IE9 /
.lt-ie9 .box { padding: 10px; }
/ CSS корректировка стилей для IE6 /
.ie6 ul  { list-style: none; }

Определение расширений JavaScript

Каждое расширение может быть найдено
в JavaScript переменной head (по умолчанию)

if( head.logged ) {
   // ваши действия
}

источник: headjs.com github.com

Комментариев нет: