6

我使用 yepnope.js 作为加载的资源。仅当加载该模块的所有依赖项时,我才想在我的 JS 模块中执行代码。我不想加载已经加载的 JS 依赖项。

假设我有依赖项 D1.js 和 D2.js。我试过

yepnope({
    load: ['D1.js', 'D2.js],
    complete: function() {
        //execute my code here
    }
});

这可行,但是每次都会加载资源,即使它们之前已经加载过。

如果我做这样的多个测试:

yepnope([{
    test: $().d1,
    nope: 'D1.js'
},
{
    test: $().d2,
    nope: 'D2.js'
}]);

目前尚不清楚将整体完成的功能放在哪里 - 在所有资源加载后运行的功能。

是否可以使用 yepnope 执行此操作,还是需要使用其他组件?

谢谢。

4

2 回答 2

4

假设您需要有条件地加载 jquery.js、jquery.jgrowl.js 和 jquery.powertip.js。您希望以下代码能够正常工作:

yepnope([{
  test: typeof(window.jQuery) === 'undefined' || 
        jQuery.fn.jquery.match(/^1\.[0-9]+/) < 1.7,
  yep: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js'
},
{
  test: typeof(window.jQuery) === 'undefined' 
        || typeof(window.jQuery.fn.jGrowl) === 'undefined',
  yep: ['//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.2.12/jquery.jgrowl.min.js',
        '//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.2.12/jquery.jgrowl.css'],
  complete: function() {
    console.log('completed loading jGrowl (should fire first, or not at all)');
  }
},
{
  test: typeof(window.jQuery) === 'undefined' 
        || typeof(window.jQuery.fn.powerTip) === 'undefined',
  yep: ['//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip.js', 
        '//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip.min.css'],
  complete: function() {
    console.log('completed loading powertip'); 
    jQuery.jGrowl("Growling!");
  }
}
]);

但是,如果它在 jquery.powertip.js 已经加载但 jquery.jgrow.js 没有加载的页面上运行,这将引发错误,因为“完成”回调被立即触发,而不是当所有文件已完成加载。

下面的小提琴用 yepnope 1.5.4 演示了这个错误:http: //jsfiddle.net/dergachev/HHxK2/

另请注意,在 yepnope 的当前主干(主分支)中,此错误消失了。它可能与以下票证有关(从未向后移植到 1.5.4):

于 2013-05-10T16:43:57.997 回答
3

回调在执行相应的脚本后运行(不仅仅是加载)。所有脚本都按顺序运行,因此如果您在最后一个对象上放置一个callbackcomplete属性,它将最后运行。

于 2012-09-08T21:20:50.847 回答