Question

作为一个我一直在努力的项目，当其他代码试图访问它们时，页面上的所有脚本都不可用的频率也是如此。虽然这种情况最常发生在代码更新后（例如没有缓存）但是我已经在测试中出现了越来越多的问题，而这种情况从未发生过。

我已经通过使用一个等待模块可用的函数来解决这个问题（参见this question），这主要解决了这个问题，但我对这个实现并不十分感激，我正在寻找更具工业实力的模式来应对这一问题。这些是我提出的可能的解决方案：

1）按需添加脚本，类似ensure - 不太理想。要执行此操作，需要在每个脚本中包含实际的脚本名称依赖关系信息，而不仅仅是模块/对象名称。在使用资源以确保它可用之前，仍然需要采取一些措施。

2）管理脚本加载顺序。如果这甚至可以工作（例如，我不认为只是在脚本B之前简单地放置脚本A，因为它们可以同时加载，因此它可以使用），这将是一个痛苦，因为你不知道依赖，直到你'加载了依赖它的东西。在拥有大量使用不同资源的页面的网站上设置需要大量工作（而且我无意在每个页面上加载网站上任何地方使用的所有内容）。

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模型。

??）如果Promises和Load Order对你不起作用，你可以监听每个模块在初始化时可以触发的命名空间事件，如果对象存在则可以使用它，如果没有，它可以初始化被倾听。

确保脚本可用性的模式或技术？

1 个答案: