Типичный пример yepnope.js :
yepnope ({test: modernizr.geolocation, yep: 'normal.js', nope: ['polyfill.js', 'warper.js']});Этот пример означает, что если modernizr.geolocation верно, нормальный.
да, полный синтаксис :
yepnope ([{test: /* boolean (iSh) Введите условие* /, yep: /* массив (из строк) | строка - ресурсы, загруженные при условии истинном* /, нет: /* массив (из строк) | строка - ресурсы загружены, когда условие является ложным* /, оба: /* routs (strings) Загружено, когда условие является истинной и false*/, callback:/*function (testresult, key) |Зачем использовать yepnope :
Только 1,6 тыс. После GZIP меньше, чем большинство погрузчиков ресурсов
Может загрузить CSS и JS
Yepnope проходит тесты для всех браузеров, которые автор может найти
Yepnope полностью отделяет загрузку и выполнение ресурсов, поэтому вы можете управлять порядок выполнения ресурса
Обеспечивает логическое сочетание дружественных API и облегчает ресурсы
Модульный дизайн, вы можете расширить свои собственные функции (см. Префиксы и фильтры позже)
Поощрять загрузку ресурсов по требованию
Интегрирован в Modernizr
По умолчанию он всегда выполняется в списке «Порядок ресурсов» (в списке порядок файлов, который вы предоставляете)
Он может обрабатывать резервные запасы и по -прежнему расставлять приоритеты на загрузке зависимых сценариев параллельно. Это легче понять после прочтения кода:
yepnope ([{load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', complete: function () {if (! window.jquery) {yepnope ('local/jquery.min.js'); 'jquery.plugin.js', complete: function () {jQuery (function () {jQuery ('div') .plugin ();});Другие погрузчики могут справиться с этим:
Someloader ('http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', function () {if (! window.jquery) {someloader ('local/jquery.min.js', 'jquery.plugin.js') Yepnope не загружается, вам нужно только перезагрузить ресурс резервного копирования, который не повлияет на выполнение других файлов, которые зависят от этого ресурса*/} else {someloader ('jquery.plugin.js');Недостатки Yepnope
Не всегда самые быстрые, такие как LabJs и т. Д., Может загружаться быстрее, чем Yepnop после оптимизации, но вам необходимо учитывать, какой загрузчик использовать в соответствии с вашей реальной ситуацией.
Вам нужно установить определенные заголовки кэша для ресурса (это очень важно)
В отличие от требований и других классовых библиотек, которые имеют свои собственные инструменты поколения и богатые API, Yepnope только реализует основную функцию загрузчика.
По умолчанию он всегда выполняется в порядке предоставленного вами списка ресурсов, что может повлиять на скорость
далее пример использования :
Прохождение в строке напрямую
yepnope ('/url/to/your/script.js');Пройти в объект объекта
yepnope ({загрузка: '/url/to/your/script.js'});Экземпляр функции обратного вызова (URL в функции обратного вызова представляет собой имя файла загруженного ресурса; результат представляет результат параметра теста; ключ представляет собой сокращение имени файла при использовании картирования ключей)
yepnope ({test: window.json, load: '/url/to/your/script.js', обратный вызов: function (url, result, key) {// всякий раз, когда он запускается, ваш сценарий только что выполнил. Alert ('script.js загружен!');}});Полный пример функции
yepnope ({test: window.json, nope: 'json2.js', complete: function () {var data = window.json.parse ('{"json": "string"}');}});Экземпляр картирования ключей
yepnope ({test: modernizr.geolocation, yep: {'rstyles': 'обычный стиль. Alert ('Это Geolocation Polyfill!');Конечно, вы также можете написать функцию обратного вызова таким образом:
yepnope ({test: modernizr.geolocation, yep: {'rstyles': 'обычный стиль. Обычные стили!3 префикса, предоставленные Yepnope
CSS! Префикс: любой файл с суффиксом может быть загружен как файл CSS
yepnope ('css! myStyles.php? Версия = 1532');Предварительная нагрузка! Префикс: предварительно загрузите ресурс в кэш, но не выполните (выполните его в следующий раз, когда загрузите его)
yepnope ({загрузка: 'preload! jquery.1.5.0.js', обратный вызов: function (url, result, key) {window.jquery; // undefined yepnope (jquery.1.5.0.js); window.jquery; // Object}});то есть! Префикс (ES): Определите, есть ли браузер IE (в дополнение к IE!, Он также поддерживает IE5, IE6, IE7, IE8, IE9, IEGT5, IEGT6, IEGT7, IEGT8, IELT7, IELT8 и IELT9)
yepnope ({Load: ['normal.js', 'IE6! IE7! IE-patch.js'] // IE6 или IE7 (на патче)});