Можете пояснить логику вызова функции по завершению асинхронной загрузки внешнего скрипта?

Question

[Николай]

Добрый вечер, сообщество.

Очень часто, когда внешний скрипт загружается асинхронно, для правильного вызова функции на странице используются подобные конструкции:

(function(w, n) {
    w[n] = w[n] || [];
    w[n].push({

    // какие-то параметры

})(window, 'название_функции');

Можете рассказать, как это вообще работает?

Answer 1

[Сергей Соколов]

Не нашёл, как называется такой паттерн. Попробую объяснить, как я понимаю этот код.

Во время выполнения кода неизвестно, определён ли уже глобальный объект. У глобального должен быть метод push(), принимающий пачку новых параметров. Но мы готовы к обоим вариантам: пушим или в крутой объект, или в пустой массив.

После загрузки внешнего скрипта, тот смотрит, пусто ли глобальное свойство, на которое он претендует. Если не пусто - там накопились данные для него и он их себе записывает куда надо при инициализации. Примерно так:

(function(w, n) {
  w[n] = w[n] || [];
  w[n].push({a: "A", b: "B"});
})(window, 'tosterQuery');



// в скрипте подгружаемом позже
(function(w, n) {
  // не перезаписать объкт. Только если пустой или массив.
  if (w[n] && !Array.isArray(w[n])) return;
    
  function f() {
    const data = w[n] || [];
    // определяем свой push с блекджеком
    this.push = function(x) {return data.push(x);}
    this.getData = function() {return data;}
  }
 
  w[n] = new f(); // занимаем глобальное свойство
})(window, 'tosterQuery');

tosterQuery.getData(); //  [{"a":"A","b":"B"}]
tosterQuery.push({z:"Z"});
tosterQuery.getData(); //  [{"a":"A","b":"B"}, {"z":"Z"}]

Comments

[Николай]

Спасибо, друг, помог быстро разобраться. Так же оставлю еще один пример, может кому-то поможет. Часто это используется для рендера какого-то виджета в сайт и тогда пример будет примерно такой:

(function(w, n) {
  w[n] = w[n] || [];
  w[n].push({itemId: "1"});
})(window, 'superItemWidget');



// в скрипте подгружаемом асинхронно (или просто позже)

// Гипотетическая функция, отвечающая за рендер виджета
const renderItem = (option) => {
  console.log(option.itemId + 'is rendered');
}

(function(w, n) {
   // если уже есть в пространстве объекты для рендера, вызываем их рендер
   if (w[n]) {
     w[n].forEach((option) => {
       renderItem(option);
    });
  }  

  // Для добавляемых после загрузки вешаем рендер на push
 w[n] = new function () {
    this.push = function(option) {
        renderItem(option);
    }
  }
})(window, 'superItemWidget');

// Код страницы, обрабатываемый после загрузки внешнего скрипта:
(function(w, n) {
  w[n] = w[n] || [];
  w[n].push({itemId: "2"});
})(window, 'superItemWidget');