Question

我正在尝试编写一个动态加载jquery和angular的匿名javascript函数。但是，当我运行该函数时，我不断得到'jQuery不是函数'。有人可以帮忙吗？这是我的代码：

(function() {

  var jQuery;
  var jquery_tag = document.createElement('script');
  var angular_tag = document.createElement('script');

  jquery_tag.setAttribute("type", "text/javascript");
  jquery_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js");

  angular_tag.setAttribute("type", "text/javascript");
  angular_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js");

  jquery_tag.onload = scriptLoadHandler;
  angular_tag.onload = scriptLoadHandler;

  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(jquery_tag);
  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(angular_tag);


  function scriptLoadHandler() {
    jQuery = window.jQuery
    main();
  }

  function main() {
    jQuery(document).ready(function($) {
      alert('yo'); //this runs
    });
  }

})();

这是我的小提琴：

https://jsfiddle.net/p7jcofx1/4/

提前致谢！

Answer 1

scriptLoadHandler()将根据此代码运行两次：

jquery_tag.onload = scriptLoadHandler;
angular_tag.onload = scriptLoadHandler;

即使Angular代码列在jQuery代码之后，它也可以先加载，window.jQuery在scriptLoadHandler中未定义，导致jQuery(document)在main()失败。

您可以通过更新scriptLoadHandler来阻止此操作，如下所示：

function scriptLoadHandler() {
  if(window.jQuery) {
    jQuery = window.jQuery
    main();
  }
}

Answer 2

来自角度文档here

要使用jQuery，只需确保在angular.js文件之前加载它。您还可以使用ngJq指令指定jQueryite应该用于jQuery，或者如果页面上存在多个版本，则使用特定版本的jQuery。

您可以使用以下方法实现此目的：

  var jquery_tag = document.createElement('script');          

  jquery_tag.setAttribute("type", "text/javascript");
  jquery_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js");          

  jquery_tag.onload = jQueryLoadedHandler;    

  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(jquery_tag);      


  function jQueryLoadedHandler() {
    //Load angular after jQuery 
    var angular_tag = document.createElement('script');
    angular_tag.setAttribute("type", "text/javascript");
    angular_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js");
    angular_tag.onload = angularLoadedHandler;
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(angular_tag);
  }

  function angularLoadedHandler() {         
      main(); //Both jQuery and angular should be loaded
  }

  function main() {
    jQuery(document).ready(function($) {
      alert('yo'); //this runs
    });
  }

Updated fiddle

注意：这是您希望angular.js使用jQuery的建议。如果您不介意使用jqLite，那么这不是必需的，并且接受的答案应该可以正常工作。

jQuery不是匿名函数中的函数

2 个答案: