Какую посоветуете js lib loader?

Question

[DVirt]

Здравствуйте.

Приложение построено полностью на ajax с использованием location.history
При необходимости требуется подгружать js скрипты, при этом если js скрипт уже загружен, его не требуется повторно загружать.

Уточните, пожалуйста, куда копать на данную тему?

Answer 1

[Константин Китманов]

Посмотрите SystemJS (щас нет смысла брать require.js) либо webpack.

Comments

[DVirt]

webpack - хорошая весчь!

[Константин Китманов]

DVirt: я не пробовал:) но он умеет то, что надо ТСу.

Answer 2

[Yaroslav Lyzlov]

Написать самому. 10 строчек кода ведь.

Comments

[DVirt]

Проще взять отлаженный продукт с документацией.

[Yaroslav Lyzlov]

Что? Документация на 10 строк ПРОСТЕЙШЕГО кода?
var cache = {}
function script(url) {
if (cache[url]) return;
cache[url] = '';
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}

[DVirt]

Yaroslav Lyzlov: Как на счет зависимости? Уже сложнее.

[Yaroslav Lyzlov]

DVirt: Какой зависимости? Наркотической?
requirejs.org

[DVirt]

scrip1.js:
loader.load('script2.js');
//далее код

scritp2.js: загрузился раньше чем отработал script1.js, при в script2.js используются функции scrip1.js
Вывод: Error, т.к. нету явного указание последовательности загрузки.

[Yaroslav Lyzlov]

DVirt: Дак вы уточняйте, что вам надо в вопросе. Где хоть слово про это? Написано "надо подгружать скрипт и кэшировать его" всё. Тут нет ясновидящих.
Выше дал ссылку на requirejs, используйте его.

[DVirt]

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

[Yaroslav Lyzlov]

requirejs.org
Всё.

Answer 3

[Stalker_RED]

cache = {}
function loadJS(src, callback) {
    if (cache[src]) {
        callback()
    } else {
        cache[src] = true;
        var s = document.createElement('script');
        s.src = src;
        s.async = true;
        s.onreadystatechange = s.onload = function() {
            var state = s.readyState;
            if (!callback.done && (!state || /loaded|complete/.test(state))) {
                callback.done = true;
                callback();
            }
        };
        document.getElementsByTagName('head')[0].appendChild(s);
    }
}

Пример использования, в котором последовательно подгружаются два скрипта.

if ($('.chart-flot').exists()) {
            loadJS('/js/plugins/flot/jquery.flot.min.js', function() {
                loadJS('/js/plugins/flot/jquery.flot.pie.min.js', function(){
                    if($('#disk_space_chart').exists()) {
                        $.plot("#disk_space_chart", diskSpaceData, {
                            series: {
                                pie: {
                                    show: true,
                                    radius: 1,
                                    innerRadius: 0.5,
                                    label: {
                                        show: true,
                                        radius: 2 / 3,
                                        formatter: function (label, series) {
                                            return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
                                                + label + "<br>" + Math.round(series.percent) + "%</div>";
                                        },
                                        threshold: 0.1
                                    }
                                }
                            },
                            legend: {
                                show: false
                            }
                        });
                    }
                })
        });
    }

Comments

[DVirt]

Все бы хорошо, но, а если родительский js еще не загрузился - Ошибка!

[Stalker_RED]

DVirt: как это? Дочерний js будет загружаться только если у родительского readyState = loaded