Модуль assets

Модуль assets в Zepto.js предназначен для удобной загрузки и управления внешними ресурсами, такими как скрипты, стили и другие медиафайлы. Он обеспечивает асинхронное подключение ресурсов с минимальными усилиями, сохраняя совместимость с современными браузерами. Основная цель модуля — упростить динамическую загрузку файлов и управление их последовательностью.

Подключение и инициализация

Модуль assets не требует отдельной инициализации. Для его работы достаточно подключить Zepto с включённым модулем assets. Обычно подключение выглядит так:

<script src="zepto.min.js"></script>
<script src="zepto.assets.js"></script>

После подключения все функции модуля становятся частью объекта $.assets.

Основные функции модуля

$.assets.load(url, options)

Загружает один или несколько файлов по указанному URL. Возвращает объект Promise, что позволяет работать с ресурсами асинхронно.

Параметры:

  • url — строка с URL файла или массив URL для нескольких ресурсов.

  • options — объект с настройками:

    • type — тип ресурса (script, css, image). Если не указан, определяется автоматически по расширению.
    • async — для скриптов: загружать асинхронно (по умолчанию true).
    • defer — для скриптов: откладывать выполнение до конца загрузки документа.
    • callback — функция, вызываемая после успешной загрузки файла.

Пример загрузки скрипта:

$.assets.load('app.js', {
    type: 'script',
    async: true,
    callback: function() {
        console.log('Скрипт загружен');
    }
});

Пример загрузки нескольких ресурсов:

$.assets.load(['style.css', 'plugin.js'], {
    type: 'auto'
}).then(function() {
    console.log('Все файлы загружены');
});

$.assets.getType(url)

Определяет тип ресурса по URL. Поддерживаются три типа: script, css, image. Если расширение не распознаётся, возвращается unknown.

console.log($.assets.getType('main.css')); // 'css'
console.log($.assets.getType('photo.jpg')); // 'image'
console.log($.assets.getType('script.js')); // 'script'

$.assets.preload(urls, options)

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

Параметры:

  • urls — строка или массив URL.

  • options — объект с настройками:

    • type — тип ресурса (script, css, image).
    • cache — включение кэширования (по умолчанию true).

Пример предзагрузки изображений:

$.assets.preload(['img1.jpg', 'img2.png'], {
    type: 'image'
}).then(function() {
    console.log('Изображения предзагружены');
});

Управление последовательностью загрузки

Модуль assets поддерживает управление последовательностью с помощью промисов. При необходимости загрузки скриптов в строгом порядке можно использовать цепочки then:

$.assets.load('lib1.js').then(function() {
    return $.assets.load('lib2.js');
}).then(function() {
    return $.assets.load('app.js');
}).then(function() {
    console.log('Все скрипты загружены по порядку');
});

Это особенно полезно, если один скрипт зависит от другого.

Обработка ошибок

Для каждого метода, возвращающего Promise, можно задать обработку ошибок через catch:

$.assets.load('unknown.js')
    .then(function() {
        console.log('Файл загружен');
    })
    .catch(function(error) {
        console.error('Ошибка загрузки:', error);
    });

Модуль передает объект ошибки, содержащий URL и тип ресурса, что облегчает диагностику.

Интеграция с DOM

  • Скрипты добавляются через <script> с атрибутами async и defer.
  • CSS подключается через <link rel="stylesheet">.
  • Изображения создаются как объекты Image и могут быть вставлены в DOM по завершении предзагрузки.

Пример динамического подключения CSS:

$.assets.load('theme.css', {
    type: 'css',
    callback: function() {
        console.log('Тема подключена');
    }
});

Кэширование и повторное использование

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

$.assets.load('lib.js');
$.assets.load('lib.js'); // повторно не загрузится, сразу вернется промис

Практические рекомендации

  • Использовать preload для изображений и крупных библиотек, чтобы уменьшить задержку отображения.
  • Для скриптов, критичных к последовательности, применять цепочки then.
  • CSS лучше подключать сразу, скрипты — асинхронно, если они не зависят от DOM.
  • Всегда обрабатывать ошибки через catch, чтобы избежать незаметных сбоев.

Модуль assets в Zepto.js делает управление внешними ресурсами простым и гибким, предоставляя полный контроль над загрузкой, последовательностью и кэшированием без необходимости вручную создавать теги в DOM.

Оглавление