Question

我正在使用Modernizr.load()加载我的javascript文件。现在让我们说每个页面都需要在所有内容加载完成后调用自己的init方法。但我把加载放在模板主文件中，它不知道子页面。页面如何知道依赖关系何时加载完毕？

脚本

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();
});

我想我在这里看到了两个问题。如果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();
    }
}]);

现在在你的Page1中执行此操作：

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

同样适用于page2。

动态加载脚本时构造javascript和延迟执行

1 个答案: