Как передать элемент в callback функцию?

Question

[STINGRAY_DEVELOP]

Привет, ребят.
Есть вот такой код, который должен подгружать нужные модули в зависимости от переданных данных в массив.
Но в момент callback функции, когда я перебираю эти элементы видимо теряется контекст и ничего не отображается, и я никак не могу понять как мне все это организовать.

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

Подскажите. кто сможет..

const app = (function() {
  let i = 9;
  const DATA = {
    'utils': {
      scriptURL: './modules/utils/utils.js',
      styleURL: './modules/utils/utils.css'
    },
    'modal': {
      scriptURL: './modules/modal/modal.js',
      styleURL: './modules/modal/modal.css'
    },
    'menu': {
      scriptURL: './modules/menu/menu.js',
      styleURL: './modules/menu/menu.css'
    },
    'panel': {
      scriptURL: './modules/panel/panel.js',
      styleURL: './modules/panel/panel.css'
    },
    'table': {
      scriptURL: './modules/table/table.js',
      styleURL: './modules/table/table.css'
    }
  };

  let loadScript = (url, callbackScript) => {
    let script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('body')[0].append(script);
    script.onload = function() {
      callbackScript(elem); // Как в эту функцию передать elem? elem находится снизу при обходе массива
    };
  };

  let loadStyles = (url) => {
    let link = document.createElement('link');
    link.setAttribute('type', 'text/css');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('href', url);
    document.getElementsByTagName('head')[0].childNodes[i].insertAdjacentElement('afterend', link);
    i++;
  };

  let callback = function(elem) {
    let loadingModul = {
      'modal': function() {
        modal.init();
      },
      'menu': function() {
        menu.init();
      },
      'panel': function() {
        panel.init();
      },
      'table': function() {
        table.init();
      },
      'super-table': function() {
        superTable.init();
      }
    };
    return loadingModul[elem];
  };

  const App = function() {};

  App.prototype.initModule = function(array) {
    array.forEach(elem => {
      loadStyles.call(DATA, DATA[elem].styleURL); // Вот здесь передаю callback
      loadScript.call(DATA, DATA[elem].scriptURL, callback);
    });
  };

  return new App();
}());

app.initModule(['utils', 'modal', 'menu', 'panel', 'table']);

Comments

[xmoonlight]

См. код includeHTML.
Там ответ найдёте, или сразу его можно использовать...

[STINGRAY_DEVELOP]

xmoonlight, не понял? куда смотреть?

[Kovalsky]

OWIII, он вам рекламирует свою библиотеку.

[xmoonlight]

OWIII, сюда

[STINGRAY_DEVELOP]

xmoonlight, нет. Мне нужно исправить мой код, а не использовать сторонние библиотеки или методы))

[xmoonlight]

OWIII, А, понял.
Просто думал, может поймёте из моего исходника как вернуть/передать callback.))

Answer 1

[Дмитрий Беляев]

Передавать его еще одним аргументом в loadScript

let loadScript = (url, callbackScript, elem) => {
    let script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('body')[0].append(script);
    script.onload = function() {
      callbackScript(elem); // Как в эту функцию передать elem? elem находится снизу при обходе массива
    };
  };

App.prototype.initModule = function(array) {
    array.forEach(elem => {
      loadStyles.call(DATA, DATA[elem].styleURL); // Вот здесь передаю callback
      loadScript.call(DATA, DATA[elem].scriptURL, callback, elem);
    });
  };

P.S. метод call не имеет смысла для стрелочных функций, ибо у них нет своего this

Comments

[STINGRAY_DEVELOP]

спасибо, я еще нашел ошибку в том, что я не вызываю loadingModul[elem].

Можете, пожалуйста, подсказать вот в чем?

Когда же я его вызываю loadingModul[elem]( ) то пишет, что:
Uncaught TypeError: loadingModul[elem] is not a function

Но ведь это функция? Почему он пишет, что это не функция?

[Дмитрий Беляев]

OWIII, ну например у Вас точно будет вызов loadingModul['utils'] - и это не функция