Question

我最近有一个关于如何在移动到新页面时加载jQuery的问题使用AngularJS ui-router。这是我接受的答案：

 resolve:{
    jquery: function($q){
      if (typeof jQuery === 'undefined') {
        var deferred = $q.defer();
        var script = document.createElement('script');
        script.setAttribute("src", "http://code.jquery.com/jquery-2.0.3.min.js");
        document.getElementsByTagName("head")[0].appendChild(script);
        var wait = setInterval(function(){
          if (typeof jQuery === 'function') {
            console.log('jQuery:', typeof jQuery)
            deferred.resolve();
            clearInterval(wait);
          }
        }, 100);
        return deferred.promise;
      }
   }
  }

有人能告诉我如何扩展这个，所以我得到了jQuery脚本和另一个我服务器的本地脚本。对我来说重要的是第二个脚本需要在jQuery之后下载，因为它依赖于它。

我需要获得的第二个脚本是/Scripts/pagedown/markdown.js

请注意我不是在寻找使用require.js等外部库的解决方案。我只有一次这样做，所以使用外部库将是矫枉过正。

Answer 1

尝试使用http://requirejs.org/，因为这是最佳解决方案。

<强>的jquery-deps.js：

define(['jquery-min'], function (dep1) {
 // Your local script here. Dependent file will be fetched here if needed
 return someObject;  //For example, jQuery object
});

您可以在路由器resove中添加：

require(['jquery-min'], function(dependency) {
  // jquery will be fetched first, then more scripts will be executed.
  // Add more scripts
});

看看requireJS文档，它很容易实现，并且不包含使用普通javascript的js文件，因为它不安全且不够酷。

Answer 2

将脚本加载过程转换为更通用的独立函数，以便重用：

var injectJs = function(url, name, deferred) {
    var script = document.createElement('script');
    script.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(script);
    var wait = setInterval(function(){
        if (typeof window[name] === 'function') {
            deferred.resolve();
            clearInterval(wait);
        }
    }, 100);
}

为markdown.js创建另一个承诺：

var mdDeferred = $q.defer();

然后，不是从函数返回jQuery加载promise，而是向它添加一个回调：

jqDeferred.promise.then(function(){

...并且在该回调中，再次使用injectJS来加载降价承诺，一旦解决了它的承诺。

注意：您需要传递对象的名称（字符串）以作为第三个对象检入。对于jQuery，它是＆＃39; jQuery＆＃39;。找到脚本加载并使用后在窗口对象上找到的对象。

最后，它应该是现在应该从resolve函数返回的降价承诺：

return mdDeferred.promise;

查看此demo以查看一个使用Underscore代替markdown.js的工作示例。

如何使用ui-router在resolve部分下载多个脚本？

2 个答案: