Question

我使用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'
}]);

目前尚不清楚在哪里放置已完成的功能 - 在 all 之后运行的功能已加载。

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

感谢。

Answer 1

假设您需要有条件地加载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）有关：

Answer 2

在执行相应的脚本（不仅仅是加载）之后运行回调。所有脚本都按顺序运行，因此如果您在最后一个对象上放置callback或complete属性，它将最后运行。

使用yepnope的多个条件

2 个答案: