jQuery 不是匿名函数中的函数

Question

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

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

})();

这是我的 fiddle:

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

来自 angular 文档 here

To use jQuery, simply ensure it is loaded before the angular.js file. You can also use the ngJq directive to specify that jqlite should be used over jQuery, or to use a specific version of jQuery if multiple versions exist on the page.

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

  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 不是匿名函数中的函数

jQuery is not a function in anonymous function

jquery

anonymous-function