Шаблоны или методы для обеспечения доступности сценария?

Question

По мере того, как проект, над которым я работал, рос, росла и частота ситуаций, когда все скрипты на странице недоступны, когда другой код пытается получить к ним доступ. Хотя это происходит чаще всего после обновления кода (например, без кэширования), у меня возникало все больше и больше в тестировании, когда это никогда не случалось.

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

1) Загрузка скриптов по требованию с чем-то вроде Обеспечение - не идеально. Для этого требуется, чтобы фактическая информация о зависимости имени сценария была включена в каждый сценарий, а не только имя модуля / объекта. Тем не менее, перед использованием ресурса необходимо предпринять некоторые действия, чтобы убедиться в его доступности.

2) Управление порядком загрузки скрипта . Если бы это даже сработало (например, я не думаю, что простое размещение сценария A перед сценарием B гарантирует его доступность, поскольку они могут быть загружены одновременно), это было бы болезненно, поскольку вы не знаете зависимости до тех пор, пока загрузили то, что от этого зависит. Потребовалось бы много работы, чтобы настроить сайт, на котором много страниц, использующих различные ресурсы (и я не собираюсь загружать все, что используется на сайте на каждой странице).

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

4) Расширить мое текущее решение. В настоящее время работает как (это псевдокод, но основной логический процесс):

// Depends on Module2
Module1 = (function () {
   self = {};
   // function requires dependency
   // waitFor waits until global named 'dependency' is available then calls callback
   self.initialized=false; 
   self.init = function() {
       waitFor('Module2', function() {
           self.intialized=true;
       });
   }
  // waitForInitialization sets a callback when self.initialized=true
   self.func = self.waitForInitialization(func() {
           Module2.doStuff();
       });
   }
   //UI-initiated function requires dependency
   self.uiFunc = function() {
       if (!self.initialized) {
          showPleaseWaitDialog();
          self.waitForInitialization(function() {
              dismissPleaseWaitDialog();
              self.uiFuncImpl);
       } else {
          self.uiFuncImpl();
       }
   }
   self.uiFuncImpl= function() { 
       Module2.doStuff();
   }
} ());

Я могу придумать способы создания прототипа, который бы более прозрачно справлялся с проблемой зависимостей, чем мой код выше, и полностью намеревался бы сделать это, если мне нужно, но действительно ли это лучшее решение? Что делают другие? Что считается лучшей практикой?

Answer 1

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

?) Если порядок загрузки скриптов не является для вас идеальным решением, вы можете обратиться к модели Promise .

??) Если «Обещания» и «Порядок загрузки» у вас не сработают, вы можете прослушать событие в пространстве имен, которое может сработать каждый модуль при инициализации, таким образом, если объект существует, его можно использовать, а если нетего инициализация может быть прослушана.