将jQuery加载到头部

Question

我正在尝试将一些jQuery库动态加载到文档头中。

<head>
  <script src="../js/jQuery.js"></script> 
  <script src="../js/App.js"></script>
</head>

jQuery.js看起来像这样：

(function() {

  /*
   * load all jQuery components
   *
   * @private
   */

  var head = document.getElementsByTagName('head')[0];

  var components = [];

  var jQuery = document.createElement('script');
  jQuery.type = 'text/javascript';
  jQuery.src = 'http://' + location.host + '/js/jquery-1.8.2.min.js';
  components.push(jQuery);

  var jQueryMobile = document.createElement('script');
  jQueryMobile.type = 'text/javascript';
  jQueryMobile.src = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js';
  components.push(jQueryMobile);

  var jQueryMobileCSS = document.createElement('link');
  jQueryMobileCSS.type = 'text/css';
  jQueryMobileCSS.href = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css';
  components.push(jQueryMobileCSS);

  var meta = document.createElement('meta');
  meta.name = 'viewport';
  meta.content = 'width=device-width, initial-scale=1';
  components.push(meta);

  components.forEach( function( component ) {
    head.appendChild( component );
  });

  // EDIT - FIX:
  var App = document.createElement('script');
  jQueryMobile.type = 'text/javascript';
  jQueryMobile.src = 'http://' + location.host + '/js/App.js';

  jQuery.onload = function() {
    head.appendChild(App);
  };

})();

console.log显示head对象包含加载jQuery库的脚本标签。 App.js需要jQuery，但会引发错误，指出未定义jQuery。 我想念什么？

Answer 1

App.js试图在完全加载依赖项之前执行。 您应该在jQuery.js文件中添加一个回调函数，该函数将在其他库加载后加载App.js。

Answer 2

您的App.js加载速度比jQuery库快，因此找不到jQuery。 您应该在</body>标记之前在HTML的底部添加JS，而不是在头部动态创建这些元素，例如：

    <script src="http://hostexample.com/js/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script src="../js/App.js"></script>  
</body>

这将确保在使用jQuery之前先将其加载。

检查此链接： JavaScript-如何确保已加载jQuery？ 。

它既提供了有关您为什么应该按照我建议的方式进行操作的解释，也提供了如果您仍然选择这样做的话（一种令人讨厌的）解决方案。

Answer 3

这是因为在app.js之后，您在标题的末尾添加了jQuery脚本标签。 所以你的HTML看起来像

如果app.js需要jquery，则会在jQuery之前加载它，因此它找不到所需的东西。

代替head.appendChild( component ); 尝试：

head.insertBefore(component, head.getElementsByTagName('script')[head.getElementsByTagName('script').length - 1])

这样的事情应该起作用。