Простая загрузка скрипта при помощи yepnope.js

yepnope.js - это специальный инструмент, созданный Алексом Секстоном и Ральфом Холцманом в конце февраля 2011, который позволяет совершать асинхронную подгрузку как JavaScript, так и CSS файлов. В этом уроке мы рассмотрим, как пользоваться данным инструментом, и постараемся определить новые возможности, которые перед нами открываются.

Этот прекрасный подгрузчик ресурсов занимает всего лишь 1.6KB и, с недавних пор, тесно связан с очень популярным на сегодняшний день инструментом Modernizer. Yepnope предназначен для загрузки полифилов, предварительно созданного кэша и других интернет ресурсов в асинхронном режиме!

Для тех, кто не знаком с понятием полифил, могу сказать, что данный объект является своего рода плагином или подпрограммой, которая позволяет воспользоваться новыми и современными технологиями вне зависимости от браузера, который установлен на клиенте. Я говорю о веб sql базах данных, CSS3 переходах и т.д.

На данный момент, Yepnope также поддерживает множество префиксов и фильтров, которые при взаимодействии с url ресурсом, предназначены для более детальной настройки основной функциональности программы. Помимо всех приведённых достоинств, yepnope также предоставляет вам механизм, предназначенный для определения ваших собственных фильтров. Теперь давайте взглянем на то, что можно сделать при помощи yepnope.js!

Асинхронная загрузка скриптов

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

Асинхронные загрузки устраняют проблему блокирования исходного файла со скриптом.

Как правило, JavaScript файлы, загруженные через тег <script>, блокируют загрузку других ресурсов, а также приостанавливают рендеринг элементов в пределах веб-страницы. Даже несмотря на то, что в современные браузеры встроены средства для параллельного подкачивания JavaScript файлов, загрузки изображений, рендеринг страниц всё же приостанавливается до тех пор, пока скрипт не будет загружен. В конечном результате время ожидания загрузки страницы увеличивается, и пользователю приходится дольше ждать.

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

Большинство загрузчиков учитывают порядок, в котором загруженные скрипты должны будут запускать файлы, готовые к запуску.

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

Однако если мы имеем дело с небольшой или хорошо оптимизированной страницей, DOM может быть уже полностью сформирован к тому времени, как подключаемые файлы закончат загружаться! В другом случае, если просматриваемая страница плохо оптимизирована и имеет слишком большой вес или использует JavaScript для формирования каких-то CSS настроек, то в процессе её загрузки может возникнуть визуальный скачок. Скорее произойдёт что-то вроде мерцания или микро вспышки содержимого страницы. Эти вещи очень важно учитывать, т.к. это напрямую влияет на содержание и функциональность файлов, которые будут загружаться асинхронно.

Шаг 1 – Тестовый объект yepnope

В тестовый объект yepnope заложено несколько основных и очень важных свойств, все из которых, по сути, являются не обязательными. Этот объект включает тест, ресурсы, которые будут загружены в результате выполнения теста, ресурсы, которые будут загружены независимо от теста, а также функции обратного вызова. Теперь давайте посмотрим на свойства объекта yepnope:

• test:
  Булевое значение, представляющее выражение, которое мы хотим проверить;

• yep:
  Может быть строка, массив или объект, представляющий собой список URL ресурсов, которые должны быть загружены при успешном выполнении теста;

• nope:
  Может быть строка, массив или объект, представляющий собой список URL ресурсов, которые должны быть загружены при провалившемся выполнении теста;

• load:
  Может быть строка, массив или объект, представляющий собой список URL ресурсов, которые должны быть загружены вне зависимости от результата выполнения теста;

• both:
  Может быть строка, массив или объект, представляющий собой список URL ресурсов, которые должны быть загружены вне зависимости от результата выполнения теста; В принципе то же самое, что и load.

• callback:
  Функция, которая будет вызвана для каждого ресурса, после его загрузки;

• complete:
  Функция, которая будет вызвана единожды, после того, как все ресурсы будут загружены;

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

yepnope('resources/someScript.js');

… а вот как выглядит загрузка множества ресурсов:

yepnope([
    'resources/someScript.js',
    'resources/someStyleSheet.css'
]);

Теперь, когда синтаксис вам уже более или менее понятен, можно приступить к более серьёзному примеру использования yepnope.

yepnope({
    'someScript'     : 'resources/someScript.js',
    'someStyleSheet' : 'resources/someStyleSheet.css'
});

Запомните, что все эти ресурсы будут загружаться асинхронно, в процессе загрузки и рендеринга страницы.

Шаг 2 – Условия – Тестируем всё, что только возможно!

Я думаю, что вы уже поняли, как мы можем загружать ресурсы асинхронно! Это конечно круто, но что, если некоторые страницы не нуждаются в определенных ресурсах? Или что, если ресурс необходим только для определенного браузера, который не поддерживает супер новых технологий?

И тут у нас всё слажено - нет проблем! Вот как раз тут и всплывает реальная ценность использования yepnope. Используя тестовое свойство, мы можем загрузить ресурсы, в зависимости от наших потребностей. Например, давайте предположим, что у нас уже загружена библиотека Modernizer.

Для тех из вас, кто не знаком с Modernizer, сразу скажу, что это неотъемлемый инструмент веб разработчика, который используется для того, чтобы определить, какие нововведения HTML5 и CSS3 не поддерживаются браузером.

Modernizer добавляет различные имена классов элементам html страницы, характеризующие возможность их функциональности, например “ js flexbox no-canvas” и т.д. Дополнительно вы можете получить доступ к каждому из тестов Modernizer, которые возвращают булевы значения в пределах вашего кода.

Итак, давайте же используем Modernizer, для того чтобы протестировать событие hashchange на поддержку браузером, а также проверим, доступна ли поддержка истории сессий!

Вот так будет выглядеть наш тест:

yepnope({  
    test : Modernizr.hashchange && Modernizr.history  
});

Этот тест, конечно, возвратит true в том случае, если браузер поддерживает обе проверяемые технологии.

Шаг 3 – Загрузка ресурсов в зависимости от условий

Благодаря возможности использования условных выражений, мы можем определить, как ресурсы следует загружать в зависимости от того или иного результата теста. Другими словами, если вам необходимо загрузить определенный ресурс, когда браузер нуждается в какой-то дополнительной функциональности, то вы можете определить, что нужно и загрузить соответствующий ресурс. Также вы можете загрузить ресурс, в противном случае используя свойство yep, которое мы рассмотрели чуть ранее.

Теперь давайте продолжим наш пример. Если браузер не поддерживает проверяемые нами технологии, то мы можем воспользоваться jQuery плагином от Бена Алмена, который залатает недостающие дыры и восполнит потерянную функциональность.

Давайте загрузим плагин hashchange:

yepnope({  
    test : Modernizr.hashchange && Modernizr.history,  
    nope : 'resources/jquery.ba-hashchange.js'  
});

В вышеупомянутом примере мы не будем использовать свойство yep, т.к. нам необходима функциональность при определённом результате теста.

Для того чтобы продемонстрировать применение свойства yep, давайте протестируем браузер на поддержку CSS3 переходов и затем загрузим одну таблицу стилей для браузеров, которые поддерживают данную технологию, и другую для тех, кто нет. Дополнительно мы загрузим jQuery плагин, который подключает поддержку переходов CSS3 для старых браузеров.

Используем и yep и nope:

yepnope({  
    test : Modernizr.csstransforms,  
    yep  : 'resources/cssTransform.css'  
    nope : ['resources/noTransform.css', 'jQuery.pseudoTransforms.js']  
});

Отметьте, что оба из этих примеров загрузят все ресурсы асинхронно во время загрузки страницы и рендеринга!

Шаг 4 – Загрузка ресурсов вне зависимости от условий

Yepnope также обеспечивает способ загрузки ресурсов, независимо от результатов выполнения теста. Функция load будет загружать указанные ресурсы в любом случае. Свойство both действует точно таким же образом.

Загрузка по умолчанию:

yepnope({  
    test : Modernizr.hashchange && Modernizr.history,  
    nope : 'resources/jquery.ba-hashchange.js',  
    load : 'resources/somethingWhichIsAlwaysLoaded.css',  
});

Загрузка вне зависимости от условий:

yepnope({  
    test : Modernizr.hashchange && Modernizr.history,  
    nope : 'resources/jquery.ba-hashchange.js',  
    both : 'resources/somethingWhichIsAlwaysLoaded.css',  
});

В обоих из вышеупомянутых примеров ресурсы будут загружены асинхронно.

Шаг 5 – Обратные вызовы – Выполнение кода после загрузки

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

• url
  Строка, представляющая url ресурса, который был загружен;

• result
  Булева переменная, представляющая собой состояние загрузки;

• key
  При использовании массива или объекта ресурсов, данный параметр представляет индекс или имя свойства файла, который был загружен;

Давайте рассмотрим простой пример обратного вызова в качестве продолжения того, что делали ранее. Мы будем использовать метод jQuery bind, для того чтобы отслеживать события окна и hashchange:

Простой обратный вызов:

yepnope({  
    test : Modernizr.hashchange && Modernizr.history,  
    nope : 'resources/jquery.ba-hashchange.js',  
    callback : function(url, result, key){  
  
        $(function(){  
            $(window).bind('hashchange', function(){  
                console.info(location.hash);  
            });  
        });  
  
    },  
});

Независимо от того, на какой стадии находится формирование DOM, этот обратный вызов, который в данном случае, является частью тела документа, сработает, как только ресурс будет загружен.

Теперь, наверное, следует отметить, что в прошлом примере мы загружаем несколько файлов и теперь нам необходимо, чтобы функция обратного вызова срабатывала только тогда, когда все ресурсы будут загружены. Код, который мы написали, создаёт ненужную нагрузку и тем самым является избыточным, т.к. запускается при загрузке каждого отдельного ресурса. К радости, должен сказать, что в Yepnope предусмотрена возможность запуска функций обратного вызова в зависимости от загруженного файла.

Использование специальных ключей, которые мы указываем при указании ресурсов, может помочь нам в решении поставленной задачи.

Давайте рассмотрим пример, где мы загружаем как jQuery, так и плагин jQuery hashchange, который запустится в зависимости от состояния загрузки jQuery. На этот раз, мы будем использовать специальные ключи!

yepnope({  
    test : Modernizr.hashchange && Modernizr.history,  
    nope : {  
        'jquery' : 'resources/jquery-1.5.1.min.js',  
        'hashch' : 'resources/jquery.ba-hashchange.js'  
    },  
    callback : {  
        'jquery' : function(url, result, key){  
            console.info('I will fire only when the jquery script is loaded');  
        },  
        'hashch' : function(url, result, key){  
            console.info('I will fire only when the hashchange script is loaded');  
  
            $(function(){  
                $(window).bind('hashchange', function(){  
                    console.info(location.hash);  
                });  
            });  
        }  
    }  
});

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

Шаг 6 – Выполнение после полной загрузки ресурсов!

Теперь, для того чтобы расставить все точки над и, нам необходимо рассмотреть применение свойства complete, которое будет вызываться только один раз после полной загрузки всех ресурсов. Если функциональность вашего приложения основывается на всех файлах, которые вам необходимо загрузить, то вместо того, чтобы указывать функцию обратного вызова для каждого ресурса, мы можем воспользоваться замечательным свойством complete, которое сработает после загрузки всех файлов. В отличие от функции обратного вызова, complete не принимает параметры и не имеет доступ к свойствам url, result или key.

Свойство complete:

yepnope({  
    test : Modernizr.hashchange && Modernizr.history,  
    nope : [  
        'resources/jquery-1.5.1.min.js',  
        'resources/jquery.ba-hashchange.js'  
    ],  
    complete : function(){  
  
        console.info('I will fire only once when both jquery and the hashchange script are loaded');  
  
        $(function(){  
            $(window).bind('hashchange', function(){  
                console.info(location.hash);  
            });  
        });       
  
    }  
});

Я надеюсь, приведённый выше пример вам понятен, и теперь вы знаете, когда целесообразно использовать свойство complete.

Шаг 7 – Yepnope плагины и многое другое!

Yepnope также предоставляет нам другую изящную функциональность: префиксы и фильтры! Префиксы, предоставляемые yepnope по умолчанию, которые всегда присобачиваются к началу url ресурса, используются для того, чтобы определить файл как CSS, предварительно загружающийся ресурс или файл Internet Explorer. Давайте взглянем на имеющиеся префиксы:

• css!
  Этот префикс используется для того, чтобы сообщить yepnope, что данный файл необходимо обработать, как таблицу стилей. По умолчанию, yepnope обрабатывает.css файлы как таблицы стилей и все остальное - как файл JavaScript. Но если вы обрабатываете CSS динамически, этот префикс заставит yepnope обработать данный ресурс как таблицу стилей.

yepnope('css!styles.php?colorscheme=blue');

• предварительная загрузка!
  Этот префикс позволяет вам загрузить / закэшировать ресурс, без его выполнения.

yepnope('preload!userInterface.js');

• ie!
  Могут быть обстоятельства, когда вам будет необходимо загрузить определенные ресурсы, только если вы работаете с Internet Explorer или определенной версией Internet Explorer. Таким образом, префиксы могут вам помочь загружать тот или иной скрипт, в зависимости от версии вашего «любимого браузера». Вот список поддерживаемых префиксов, где gt обозначает “версии, больше чем” и lt “версий меньше чем”.
• Internet Explorer по номерам версий:
  ie5!, ie6!, ie7!, ie8!, ie9!
• Версии Internet Explorer, больше чем:
  iegt5!, iegt6!, iegt7!, iegt8!
• Версии Internet Explorer меньше чем:
  ielt7!, ielt8!, ielt9!

Все эти фильтры - служат своего рода операцией ИЛИ, для того чтобы загрузить нужный вам ресурс. Так что для того, чтобы указать фильтр для ie7 и ie8, мы просто должны записать url ресурса в следующем виде:

yepnope('ie7!ie8!userInterface.js');

Создание ваших собственных фильтров!

Нужно вам это или нет, но yepnope также предоставляет средства, при помощи которых вы сможете создать собственные фильтры и префиксы посредством методов addFilter и addPrefix. Любой фильтр или префикс, который вы создаете, проходит через resourceObject, который содержит множество полезных фишек. В свою очередь, не забудьте возвращать resourceObject, поскольку для yepnope это является обязательным правилом. Вот пример resourceObject:

• url:
  url загружаемого ресурса;

• prefixes
  Массив примененных префиксов;

• autoCallback
  Обратный вызов, который запускается при каждой загрузке, отличной от других;

• noexec
  Булево значение, которое вызывает предварительную загрузку без выполнения скрипта;

• instead
  Усовершенствованная функция, которая принимает те же самые параметры, что и загрузчик;

• forceJS
  Булева переменная, которая заставляет ресурс, обрабатываться как javascript;

• forceCSS
  Булева переменная, которая заставляет ресурс обрабатываться как таблица стилей;

• bypass
  Булева переменная, которая определяет, загружен ресурс или нет.

Например, предположим, что вы хотите иметь возможность переключить ресурс, загружающийся в промежутке между CDN и веб-сервером на лету. Можем ли мы это сделать!? Да! Давайте создадим два префикса, один для того, чтобы загрузиться с CDN, и другй для того, чтобы загрузиться с вашего веб-сервера.

yepnope.addPrefix('local', function(resourceObj) {  
  
    resourceObj.url = 'http://mySite/resources/' + resourceObj.url;  
    return resourceObj;  
  
});  
  
yepnope.addPrefix('amazon', function(resourceObj) {  
  
    resourceObj.url = 'http://pseudoRepository.s3.amazonaws.com/' + resourceObj.url;  
    return resourceObj;  
  
});

Теперь, используя данные префиксы, мы можем добиться следующей функциональности!

yepnope([  
    'local!css/typography.css',  
    'amazon!defaultStyle.css'  
]);

Шаг 8 – Пару слов напоследок

Таким образом, используя практически ничего не занимающий с точки зрения места скрипт yepnope, вы можете расширить гибкость функционирования вашего приложения! Есть, однако, несколько вещей, о которых вы должны знать, перед тем как использовать его в своих проектах.

• Никакого document.write
  Поскольку мы используем асинхронную загрузку, вы не можете использовать document.write;

• Версия Internet Explorer меньше, чем 9, и выполнение функции обратного вызова;
  В Internet Explorer меньше, чем 9 версии, функции обратного вызова могут срабатывать не сразу после загрузки ресурса.

• Будьте осторожны с DOM
  Следите за тем, чтобы ваши скрипты не загружались раньше, чем DOM будет сформирован до конца.

• Вам всё ещё нужно тщательно подходить к формированию файлов
  Не думайте, что теперь, благодаря асинхронной загрузке файлов, у вас их может быть сколько угодно. Вам по-прежнему нужно грамотно формировать и объединять ваши скрипты для уменьшения количества запросов.

• Internet Explorer – лимит асинхронной загрузки
  Более старые версии Internet Explorer могут загружать только два ресурса из одного и того же самого домена одновременно, а версии постарше - до шести. Таким образом, чтобы загрузить большое количество файлов, вы можете использовать разные под домены или внешние ресурсы.

Заключение

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

• Комментарии