AJL — компонент для загрузки JS и CSS файлов средствами JavaScript

Привет, Хабр!

Недавно сложившиеся ситуации подтолкнули меня на поиски простого и небольшого, по размерам, загрузчика ресурсов. Но все мои поиски приводили к require.js, который меня по некоторым причинам не устраивает (это тема для отдельной статьи ^[1]).

Поэтому было принято решение написать свой велосипед и заодно попрактиковаться.
В итоге был реализован компонент, который занимает 6.28 Кб в uglify'цированном виде и 1.3 Кб в GZip.

Его ключевые «фишки»:

• Может загружать как *.js, так и *.css.
• Реализована пакетная система. У каждого пакета может быть отдельная конфигурация.
• Загрузка происходит пакетами. То есть достаточно вызвать метод load() у нужного пакета и он загрузит все файлы, которые в нем находятся.
• Может загружать как асинхронно, так и в режиме Lazy Loading (загрузка пакета осуществляется только после загрузки всей страницы).
• Есть встроенный менеджер пакетов, который упрощает базовые операции с пакетами. А именно: хранение, создание, удаление, загрузка.
• Реализованы namespace'ы (на самом деле, реализация очень простая и для небольших проектов это плюс).

Вот, собственно, описание его главных особенностей.

Под катом небольшой курс использования AJL и описание разработки некоторых составляющих.

Подключаем AJL
Все что нужно указать при подключении AJL — это атрибут data-ep. Вот пример (подключаем AJL в базовом layout):

//baseLayout.html
<script src="js/vendor/AJL.min.js" data-ep="EntryPoint.js"></script>

После загрузки AJL, он загружает EntryPoint.js, в котором вы настраиваете пакеты.
Можно и не прописывать data-ep. Вы сами вправе решать, где вам удобнее настраивать AJL.
EntryPoint.js — это по сути скрипт, который при загрузке также выполняется.

Задаем пакеты
Рассмотрим пример подключения jQuery, его плагинов и ваших скриптов. В данном случае, был использован data-ep атрибут.

//EntryPoint.js
 AJL({
        name: "jQuery", //имя пакета
        assets: ['js/vendor/jquery.min.js'], //массив с URL'ами к нужным ресурсам
        config: { //объект конфигурации
            async: false //запретить асинхронную загрузку
        }
    }, {
        name: "jQuery Plugins",
        assets: ['js/vendor/jquery.plugin.js', 'js/vendor/jquery.plugin2.js'],
        config: {
            depend: ['jQuery'] //указываем имя пакета, который нужно загрузить перед загрузкой этого
        }
    }, {
        name: "My Scripts",
        assets: ['js/foo.js', 'js/bar.js'],
        config: {
            lazy: true //загружаем этот пакет только при событии window.onload
        }
    }).loadAll(); //после создания пакетов, нам возвращается PackageManager. Благодаря chainloading мы можем сразу загрузить все пакеты

Выглядит EntryPoint достаточно чисто. В name указываем имя пакета. В assets — массив с URL'ами asset'ов. В config — объект с параметрами. Всего можно передать шесть параметров в config:

• async (bool) — асинхронно ли загружать
• lazy (bool) — дожидаться загрузки window
• depend (array) — зависимости
• scriptTypeAttr (string) — этот параметр выводиться в script type=""
• linkCssTypeAttr (string) — этот в link type=""
• linkCssRelAttr (string) — в link rel=""

Честно говоря, я так и не понял, зачем я вынес атрибуты для тегов в объект с параметрами.

Что же происходит в EntryPoint.js?

1. Создается три пакета с именами jQuery, jQuery Plugins, My Scripts. После успешного создания AJL вернет PackageManager, в котором существует метод loadAll(). Данный метод загружает пакеты. Загрузка всех пакетов происходит перебором массива и вызовом load(). Немаловажный фактор, который может повлиять на загрузку, загрузка происходит в порядке очереди создания пакетов. Поэтому лучше указать сначала «серьезные» библиотеки, а лишь затем — все остальное.

2. Первым загрузится jQuery не в асинхронном режиме. После начнется загрузка jQuery Plugins, но только после загрузки jQuery. И напоследок — My Scripts — после загрузки всех ресурсов на странице (Lazy Loading).

Таким образом, можно делать разные конфигурации с пакетами. Допустим, у нас есть две категорически разные страницы. На одной — панель управления для пользователя, а на второй — крутой редактор с пачками скриптов. Скрипты и стили, которые нужно грузить на этих страницах, полностью отличаются друг от друга. А скриптов-то много. Не грузить же все в кучу, что нужно и не нужно. Создавать два разных базовых layout'а? Зачем?

С AJL, решение данной ситуации можно предложить подобным образом.

У нас есть EntryPoint, в котором создаем все необходимые пакеты:

 AJL({
        name: "jQuery",
        assets: ['js/vendor/jquery.min.js'],
        config: {
            async: false
        }
    }, {
        name: "jQuery Plugins",
        assets: ['js/vendor/jquery.plugin.js', 'js/vendor/jquery.plugin2.js'],
        config: {
            depend: ['jQuery']
        }
    }, {
        name: "Editor Scripts And Styles",
        assets: ['js/editor/foo.js', 'js/editor/bar.js', 'css/editor/style.css'],
        config: {
            depend: ['jQuery Plugins']
        }
    }, {
        name: "My Dashboard Scripts",
        assets: ['js/foo.js', 'js/bar.js'],
        config: {
            lazy: true
        }
    });

Обратите внимание на loadAll(). Его здесь нет. Так как мы хотим полностью разграничить загрузку пакетов, то мы не вызываем loadAll(). Мы просто создаем их. А так как у нас есть views для редактора и панели статистики, в них мы можем вызвать загрузку нужного пакета вручную.

//dashboard.html
<script>AJL("My Dashboard Scripts").load();</script>

//editor.html
<script>AJL("Editor Scripts And Styles").load();</script>

Обратите внимание на то, что мы загружаем только пакет с названием Editor Scripts And Styles. Так как разрешение зависимостей здесь сделано рекурсивным методом, то мы можем вызвать последнее звено и все. А оно уже, в свою очередь, загрузит jQuery Plugins, а там и jQuery.

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

Что происходит под «капотом»?

А теперь перейдем к тому, как разрабатывались некоторые модули AJL.

Namespace
Самым интересным, я считаю, реализацию namespace'ов в 17 строк кода. Здесь все просто и суть заключается в разбиении namespace'а на элементы массива и его итерацию. Когда доходим до последнего элемента, то на этот элемент назначаем модуль.
Привожу код функции, которая вызывается при создании namespace'а.

setNamespace: function (namespace, module) {
                var parts = namespace.split('.'),
                    parent = window,
                    partsLength,
                    curPart,
                    i;

                //Need iterate all parts of namespace without last one
                partsLength = parts.length - 1;
                for (i = 0; i < partsLength; i++) {
                    //Remember current part
                    curPart = parts[i];
                    if (typeof parent[curPart] === 'undefined') {
                        //If this part undefined then create empty
                        parent[curPart] = {};
                    }
                    //Remember created part in parent
                    parent = parent[curPart];
                }
                //And last one of parts need to be filled by module param
                parent[parts[partsLength]] = module;
                //And not forgot return generated namespace to global scope
                return parent;
            },

В итоге, при разработке своих модулей, можно использовать довольно простую конструкцию:

AJL("Module.SubModule", function() {
    return "Hi, I'm Module.SubModule";
});

Package, PackageConfig, Loader
Пакеты и конфигурация пакетов являются лишь функциями с прототипом (классом, одним словом). Все что я храню в их свойствах — это имя пакета, массив URL'ов, instance конфигурации пакета. Сам метод load() у Package вызывает статическую функцию loadPackage() из Loader.js с применением call().

 load: function () {
                AJL.Loader.loadPackage.call(this);
            }

Это сделано для того, чтобы уберечь себя от нехорошего дублирования кода. Пакеты разные, конфигурации разные, а загрузчик-то один должен быть. Вот собственно Loader.js и loadPackage() принимают решения, когда можно добавить в DOM тэг, а когда нет.

loadPackage: function () {
                var helper = AJL.Helper,
                    packageManager = AJL.PackageManager,
                    pack = this,
                    packageAssets = pack.getAssets(),
                    packageConfig = pack.getConfig(),
                    depend = packageConfig.getItem('depend');

                //If assets array empty then halt loading of package
                if (helper.isEmpty(packageAssets)) {
                    return false;
                }

                //If this package depend on other packages then load dependencies first
                if (!helper.isEmpty(depend)) {
                    packageManager.loadByNames(depend);
                }

                //If need to wait window.load than call lazyLoad and return
                if (packageConfig.getItem('lazy') == true) {
                    lazyLoad.call(pack);
                    return true;
                }

                //In other cases just call startLoading directly for start loading
                startLoading.call(pack);
                return true;
            },

Обращаем внимание на то, как реализована загрузка зависимостей. Если в данном пакете есть зависимости, то мы вызываем рекурсивную загрузку. Грузим зависимости, и так далее, по цепочке вверх.

PackageManager
Также немаловажной частью AJL является PackageManager, который управляет пакетами. Такой себе коллектор. Есть getters, есть setters, которые проверяют запрошенное имя в массиве instance'ов пакетов, а также, является ли объект instance'ом Package'а. Если да, то возвращаем его, либо производим нужные нам действия с ним. К примеру, рассмотренная функция loadAll() действует обычным перебором.

loadAll: function () {
                var helper = AJL.Helper,
                    curPack;

                for (var pack in packages) {
                    if (packages.hasOwnProperty(pack)) {
                        curPack = packages[pack];
                        if (helper.isInstanceOf(curPack, AJL.Package)) {
                            curPack.load();
                        }
                    }
                }
                return this;
            },

Происходит перебор в массиве, и если это instanse Package, то вызываем load(). При загрузке зависимых пакетов я использую функцию loadByNames().

loadByNames: function (names) {
                var helper = AJL.Helper,
                    curName,
                    namesLength,
                    i;

                namesLength = names.length;
                for (i = 0; i < namesLength; i++) {
                    curName = names[i];
                    if (packages.hasOwnProperty(curName) && helper.isInstanceOf(packages[curName], AJL.Package)) {
                        packages[curName].load();
                    }
                }
                return this;
            }

Перебираем весь массив с именами и смотрим, есть ли эти имена в нашем storage пакетов. Если да и он instance Package'а, то вызываем load().

AJL
И напоследок самое главное. Функция AJL().

AJL = function () {
        var packageManager = AJL.PackageManager,
            namespace = AJL.Namespace,
            helper = AJL.Helper,
            packageInstance = {},
            packageName = '',
            packageAssets = [],
            packageConfig = {},
            argLength = arguments.length,
            argFirst,
            argSecond,
            i;

        //Switch of arguments length for detect what need to do
        switch (argLength) {
            case 0:
                //If arguments not exists then just return PackageManager instance
                return packageManager;
            case 1:
                argFirst = arguments[0];
                //If this arg is string then return package with this name
                if (helper.isString(argFirst)) {
                    return packageManager.getPackage(argFirst);
                }
                break;
            case 2:
                argFirst = arguments[0];
                argSecond = arguments[1];
                //If first arg is string and second object or function
                if (helper.isString(argFirst) && (helper.isObject(argSecond) || helper.isFunction(argSecond))) {
                    //Then I think that it's namespace setting
                    namespace.setNamespace(argFirst, argSecond);
                    return packageManager;
                }
                break;
            default:
                break;
        }
        //If all predefined templates in arguments didn't decided then create packages from them
        for (i = 0; i < argLength; i++) {
            if (!helper.isUndefined(arguments[i])) {
                packageName = arguments[i].name;
                packageAssets = arguments[i].assets;
                packageConfig = arguments[i].config;
                packageInstance = new AJL.Package(packageName, packageAssets, packageConfig);
                packageManager.setPackage(packageInstance);
            }
        }

        return packageManager;
    };

Сначала смотрим на количество аргументов, переданных в функцию. Если ничего не передавали, то сразу возвращает PackageManager. Если же передали одну строку, то предполагаем, что нам дали имя пакета и ищем его. После находки возвращаем объект Package. Если передано было два параметра и первый из них строка, то кидаем второй параметр в этот namespace (из первого параметра). И наконец, если ни одно не подошло, то считаем, что это стартовая конфигурация для AJL и создаем все Package в нем.

Благодарю всех, кто нашел силы дочитать до этого места. Если хотите попробовать AJL, то есть все необходимые ресурсы:

Главная страница ^[2]
Исходники на GitHub ^[3]
Документация ^[4]

P.S. Буду признателен за все пожелания и критику. Бросать разработку не собираюсь. Просто закончились идеи :)

Автор: ghaiklor

Источник ^[5]