Загрузка Easy Script с помощью yepnope.js

17 января 2018

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

Этот отличный ресурс-загрузчик, который только 1,6KB, миниатюрный и gzipped, теперь в комплекте с Modernizer и отлично подходит для загрузки полиполков, предварительной загрузки или «заливки» кеша пользователей или в качестве простого асинхронного фильтра загрузчика ресурсов!

Для тех из вас, кто не знаком с polyfills, они, по сути, являются плагинами или прокладками, которые позволяют использовать новые или будущие технологии в старых браузерах, например. базы данных веб-sql, преобразования CSS3 и т. д.

Yepnope теперь также поддерживает ряд префиксов и фильтров, которые при добавлении к URL-адресу ресурса добавляют к его основной функциональности еще один уровень тонкой настройки или настройки. Как будто это еще не было здорово, yepnope также предоставляет вам механизм для определения ваших собственных префиксов и фильтров. Давайте посмотрим, что может сделать yepnope.js!


Предыстория - загрузка асинхронного скрипта

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

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

Как правило, файлы JavaScript, загружаемые тегом

yepnope('resources/someScript.js');

... или, возможно, загрузите массив ресурсов.

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

Как насчет литерала объекта, чтобы позже мы могли использовать вызовы named callback?

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

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


Шаг 2 - Условия - Тестирование возможностей будущего!

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

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

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

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

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

Вот посмотрите наш тест:

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

Этот тест, конечно, вернется только в том случае, если браузер поддерживает обе эти функции.


Шаг 3 - Загрузка ресурсов условно

С установленным нашим тестовым условием мы определим, какие ресурсы загружать на основе результата этого теста. Другими словами, если вам нужно только загрузить определенный ресурс, когда в браузере отсутствует функция, или сбой теста, вы можете просто определить этот ресурс в предложении nope. И наоборот, вы можете загружать ресурсы при прохождении теста в рамках предложения yep.

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

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

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

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 - Обратные вызовы - зависимый код после загрузки

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

url. Эта строка представляет URL-адрес ресурса, который был загружен. Результат Логический, представляющий состояние загрузки. key Если вы используете массив или объект ресурсов, это будет представлять индекс или имя свойства файла, который был загружен

. Давайте рассмотрим простой обратный вызов с примером модуля hashchange от ранее. Мы будем использовать метод привязки jQuery для привязки обработчика к событию 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');
            // This code will be added to jQuerys DOM ready call stack
            $(function(){
                $(window).bind('hashchange', function(){
                    console.info(location.hash);
                });
            });            
        }
    }  
});

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


Шаг 6 - Завершить - Когда все сказано и сделано!

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

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

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');
        // This code will be added to jQuerys DOM ready call stack
        $(function(){
            $(window).bind('hashchange', function(){
                console.info(location.hash);
            });
        });    
    }
});

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


Шаг 7 - Плагины, префиксы и многое другое!

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

css! Этот префикс используется для принудительного использования yepnope для обработки ресурса как таблицы стилей. По умолчанию yepnope обрабатывает файлы.css как таблицы стилей и все остальное как файл JavaScript. Итак, если вы обслуживаете CSS динамически, этот префикс заставит yepnope обрабатывать этот ресурс как таблицу стилей. 1yepnope ('CSS styles.php ColorScheme = синий!?'); поджать! Этот префикс позволяет загружать кеш-ресурс без его выполнения. 1yepnope ('преднатяга userInterface.js!'); то есть! Могут быть ситуации, когда вам нужно загружать определенные ресурсы только в том случае, если вы работаете с Internet Explorer или определенной версией Internet Explorer. Таким образом, префиксы ie помогут вам настроить загрузку ресурсов на определенные или конкретные версии. Вот список поддерживаемых, т.е. префиксов, где gt означает «версии больше, чем», а lt означает «версии меньше». Internet Explorer: т.е.! Internet Explorer по номеру версии: ie5!, ie6!, ie7!, ie8!, ie9! Версии Internet Explorer больше: iegt5!, iegt6!, iegt7!, iegt8! Версии Internet Explorer меньше: ielt7!, ielt8!, ielt9! Все эти фильтры привязаны к цепочке и служат в качестве своего рода оператором ИЛИ в том случае, если один из них оценивает значение true, будет загружен ресурс. Поэтому, если нам нужно ориентироваться на ie7 и ie8, мы просто добавим соответствующие фильтры к URL-адресу ресурса следующим образом: 1yepnope ('ie7! Ie8! UserInterface.js');

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

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

url: URL-адрес загружаемого ресурса. префиксы Массив прикладных префиксов. autoCallback Обратный вызов, который запускается после загрузки каждого сценария, отдельно от других. noexec Логическое значение, которое создает предварительную нагрузку без выполнения. вместо этого - расширенная функция, которая принимает те же параметры, что и загрузчик. 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;
});

Используя эти префиксы, мы теперь можем легко переключаться между нашим CDN и веб-сервером!

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


Шаг 8 - Несколько предостережений

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

o document.write Как и в любом асинхронном загрузчике, вы не можете использовать document.write. Internet Explorer менее 9 и выполнение обратного вызова версии Internet Explorer менее девяти не гарантируют, что обратные вызовы запускаются сразу после запуска соответствующего сценария. Будьте осторожны с DOM. Ваш скрипт может быть загружен и выполнен до того, как DOM будет готов. Итак, если вы манипулируете DOM, рекомендуется использовать готовую обертку DOM. Вы все равно должны комбинировать, где вы можете. Просто потому, что вы используете асинхронный загрузчик, это не означает, что вы не должны комбинировать свои ресурсы, где сможете. Ограничения асинхронной нагрузки Internet Explorer Старые версии Internet Explorer могут одновременно загружать только два ресурса из одного и того же домена, а остальные версии могут загружать до шести. Таким образом, если вы загружаете несколько файлов, подумайте об использовании поддомена или CDN.


Заключение - Мысли о yepnope.js

В общем, я нашел yepnope отличной утилитой! Он не только поддерживает асинхронную загрузку как скриптов, так и таблиц стилей, но он предоставляет вам хороший, чистый способ загрузки HTML5 и CSS3 полиполнений условно. Механизм обратного вызова хорошо продуман, и возможность добавления собственных префиксов и фильтров просто великолепна! Производительность мудрая, я обнаружил, что yepnope находится на одном уровне с другими загрузчиками, такими как LABjs Getify Solutions и require.js Джеймса Берка. Очевидно, что каждый загрузчик отличается и подходит для другой потребности, но если вы еще этого не сделали, я рекомендую вам дать yepnope.js!