Автозагрузка криптов и стилей

[Volonter]

Всем привет, в некоторых JS библиотеках есть такая фича, как подгрузка скриптов и стилей динамически. Это как бы не новость, но мне вот что интересно: стили в виде

<link rel="stylesheet" href="./assets/css/bootstrap.min.css">

попадают в DOM, в head, это нормально, и так оно реализовано у всех. Со скриптами тоже самое, но, у некоторых библиотек, например Tiny Mce, скрипты в DOM не подгружаются, если наблюдать по консоли в момент запуска плагина видно, как в head прописались стили, а скрипты нет, нигде в теле документа новые теги <script> не прописались. Плюс ко всему, мы их не увидим в web developer tools (information/View Javscript).
Но тем не менее, плагин работает, функции из "невидимо подгруженных" скриптов отрабатывают. Гугление дает только те коды, которые прописывают скрипты в head, а мне интересно как это реализовать без этого. Буду очень благодарен за любую информацию по вопросу!

[ksa]

Возможно скрипты подключают не в head...

[Volonter]

Возможно скрипты подключают не в head...

100% точно нигде не подключаются, если бы они подключились куда угодно в DOM, я бы их в том числе увидел в web developer tools

[Rise]

Volonter,
В DevTools, вкладке Network, всё видно.

[Volonter]

Volonter,
В DevTools, вкладке Network, всё видно.

Да, действительно есть, я само собой догадывался, что нельзя нигде не увидеть джаваскрипт, но как они делают, что это не добавляется в DOM то? Я вот чего понять не могу)) плагин запустил, в инспекторе "моргнуло" что стили прописались, а скриптов нет. Механизм подгрузки там асинхронный, но так или иначе все заканчивается банальным body.appendChild(), вот кусок кода библиотеки

const id = dom.uniqueId();
          elm = document.createElement('script');
          elm.id = id;
          elm.type = 'text/javascript';
          elm.src = Tools._addCacheSuffix(url);
          if (this.settings.referrerPolicy) {
            dom.setAttrib(elm, 'referrerpolicy', this.settings.referrerPolicy);
          }
          elm.onload = done;
          elm.onerror = error;
          (document.getElementsByTagName('head')[0] || document.body).appendChild(elm);
        });

[Rise]

но как они делают, что это не добавляется в DOM то?

Всё добавляется, ты как-то неправильно DOM смотришь, смотри вкладку Elements.

[Volonter]

Всё добавляется, ты как-то неправильно DOM смотришь, смотри вкладку Elements.

а как еще - консоль- инспектор
вот ради прикола набросал на коленке,

class ScriptLoader {
    load(src) {
        const e = document.createElement('script');
        e.defer = true;
        e.src = src;
        document.body.appendChild(e);
    }
}
class Test {
    constructor(params) {
        this.params = typeof params === 'object' ? params : {};
        this.url = params.url;
    }

    init() {
        const scriptLoader = new ScriptLoader;
        scriptLoader.load(this.url + '/foo.js');
    }
}
let test = new Test({
            url: '/path/to/script',
        })
        test.init()

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

[Rise]

Volonter,
Ну ты можешь элемент script удалить из DOM, как и любой другой элемент. Например, на событие load, которое вызывается, когда скрипт загружен и выполнен:

e.onload = function() {
    e.remove();
};

На работоспособность js это не повлияет.

[Volonter]

e.remove();

да, действительно, покопался основательно в их коде - так и есть, просто там remove() немного более завуалированно прописано. Тогда вопрос - нафига и зачем удалять?

[Rise]

Volonter,
Чтобы освободить память. Ведь разработчики библиотеки не могут знать масштабов твоего плагина, гипотетически ты может миллион раз будешь использовать ScriptLoader в своем приложении, таким образом получится миллион элементов скрипт, по сути отработанных и просто так висящих в DOM (в отличии от CSS). Поэтому кому-то надо их почистить.

Это скорее типичное поведение. Например, в jQuery, тоже есть некий загрузчик скриптов, в виде $.getScript('url.js'), он же $.ajax({ url: 'url.js', dataType: 'script' }), и реализация там вполне аналогичная.

Так что ничего криминального.