Еще один загрузчик скриптов для JavaScript

При разработке одного сайта мне понадобился загрузчик скриптов, так как хотелось что бы загрузка вызывалась из js кода. Из готовых решений нашел requirejs и yepnope. Requirejs — модульный, что к моим требованиям не подходило. Yepnope — асинхронный, это означает, что код в каждом файле мне пришлось бы обертывать в callback функции. Ничего не оставалось, кроме как написать что-нибудь самому. И вот что у меня получилось: wakeloader — безмодульный синхронный загрузчик скриптов для JavaScript. В этой статье я расскажу про него.

Инициализация

В html код нужно добавить следующее:

<script wake-loader src="/loader.min.js"></script> 

Параметры

В wakeloader несколько параметров загрузки, вот их перечень:

string    main-file    путь к файлу с главным кодом (main.js) 
string    main         имя функции, вызываемой после загрузки страницы
string    update       при изменении, кеш очереди скриптов будет обновлен
bool      quick        если true, то функция main будет вызвана по событию DOMContentLoaded, false - onload
bool      cached       кешировать ли очередь скриптов
object    alias        алиасы путей
array     queue        очередь скриптов для загрузки   

Параметры можно задавать двумя способами:

1. С помощью создания объекта с параметрами

<script>
    wakeloader = {
        mainFile :  "/app/main",
        main     :  "main",
        update   :  "04.04.2013",
        quick    :  true,
        cached   :  true,
        alias    :  { "http://code.jquery.com/" : "jquery/" },
        queue    :  ["/app/widget","jquery/jquery-2.0.2.min",{ "http://some.serv.er/lib/" : ["sugar","backbone"] }]
    };
</script>
<script wake-loader src="/loader.min.js"></script>

2. Через атрибуты тега script

<script wake-loader data-main-file="/app/main" data-main data-update="04.04.2013" 
        data-cached data-quick data-alias='{ "http://code.jquery.com/" : "jquery/" }' src="/loader.min.js">
    ["/app/widget","jquery/jquery-2.0.2.min",{ "http://some.serv.er/lib/" : ["sugar","backbone"] }]            
</script>

Очередь можно задать и через атрибут data-queue.

Функции

Wakeloader имеет всего две функции: это require и updateQueue.

require загружает указанные вами скрипты, доступна в глобальном пространстве имен.

require('jquery/jquery-1.10.1.min','/app/lastfm-api');

После вызова функции updateQueue, при первом обновлении страницы, кеш очереди будет обновлен. Функция доступна только из объекта wakeloader.

Как это работает

Работает это все достаточно просто: достигнуть синхронность функции require можно было только одним способом — загрузка скриптов через XMLHttpRequest и помещение кода внутрь тегов . Если скрипт лежит на другом сервере, то указывайте его в очереди тега загрузчика.

Не спешите писать гневные комментарии: да, так будет неудобно инспектировать код в браузере, и по скорости это будет работать медленно.



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



Дело в том что при включенном кешировании функция require еще и записывает очередь скриптов в localStorage, благодаря этому все последующие загрузки будут проходить очень быстро.


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



На всех скриншотах видно колличтесво файлов и их размеры(они не минимизированы). В среднем получилось, что при данном наборе файлов скорость загрузки wakeloader c включенным кешированием - 700ms, скорость requirejs - 800ms.

UPD: так же проверил на скорость requirejs, когда все скрипты прописаны в shim:



Еще медленней чем модульная загрузка.

Исходники на GitHub. Демо.
P.S.: Скоро напишу php-cli скрипт для склеивания файлов, ссылка на него будет в описании wakeloader'a на github'e.