在动态加载脚本时构建JavaScript并延迟执行

Question

我正在使用JavaScript文件使用 Modernizr.load(). 。现在说，每个页面都需要在所有内容完成后都需要调用自己的初始方法。但是我将加载放在模板主中，这不知道子页面。这些页面如何知道依赖项何时完成加载？

脚本

Page1Stuff= {
   init: function(){ alert('page 1 executed'); }
}
Page2Stuff= {
   init: function(){ alert('page 2 executed'); }
}

站点主模板

//Modernizr loads the script.
Modernizr.load([{
    load: 'jquery.js',
},
{
    load: 'script.js'
}]);

第1页

$(function() {
    Page1Stuff.init();
});

第2页

$(function() {
    Page2Stuff.init();
});

我想我在这里看到2个问题。如果Modernizr仍在加载jQuery，则可能无法定义$。还， Page2Stuff 或者 Page1Stuff 可能无法定义。

Answer 1

在您的模板中：使用现代化器“完整”调用来发射自定义事件以发出加载，还设置了一个全局变量，说脚本已加载。

在您的页面脚本中：首先检查全局变量，以查看是否已加载所有脚本，如果没有加载所有脚本，请注册处理程序以收听加载完成后发出的自定义事件。

在您的模板代码中：

// A simple object that calls its listeners when modernizer script loading completes.
global_scriptLoadingMonitor = (function() {
   var listeners = [];
   var isComplete = false;
   return {
      "addListener": function (listener) {
         listeners[listeners.length] = listener;
      },
      "complete": function () {
         isComplete = true;
         for (var i = listeners.length - 1; i >= 0; i--) {
            listeners[i]();
         }
      },
      "isComplete": isComplete
   }
})();

Modernizr.load([{
    load: 'jquery.js',
},
{
    load: 'script.js'
    complete: function () {
    {
       global_scriptLoadingMonitor.complete();
    }
}]);

现在在您的第1页中执行此操作：

if (global_scriptLoadingMonitor.isComplete) {
    $(function() {
        Page1Stuff.init();
    });
} else {
    global_scriptLoadingMonitor.addListener(function() {
        $(function() {
           Page1Stuff.init();
        });
    });
}

同样适用于第2页。