处理在加载jQuery之前依赖于jQuery的代码 [英] Handling code which relies on jQuery before jQuery is loaded

问题描述

我想遵循将所有JavaScript放在页面底部的一般准则，以加快加载时间，并在Web应用程序（Django）中处理与jQuery版本冲突的一些讨厌问题。

然而，我经常会有一些代码，代码依赖于jQuery，但必须在页面上进一步提升（基本上代码无法移动到底部）。

我想知道是否有一种简单的方法来编写代码，以便即使jQuery尚未定义，代码也可以在定义jQuery时运行。

以下似乎，我不得不说，像矫枉过正，但我​​不知道另一种方法：

  function run_my_code（$）{
 // jquery-dependent code here 
 $（＃foo）。data（'bar'，true）; 
} 
 var t = null; 
函数jquery_ready（）{
 if（window.jQuery&& window.jQuery.ui）{
 run_my_code（window.jQuery）; 
} else {
 t = window.setTimeout（jquery_ready，100）; 
} 
} 
 t = window.setTimeout（jquery_ready，100）; 
  

实际上，我可能需要在页面中多次使用代码，代码不知道关于其他代码，所以即使这可能也行不通，除非我将每个jquery_ready重命名为jquery_ready_ guid ，jquery_ready_ otherguid 等等。

澄清

这样很清楚，我将include包含在JavaScript中（< script type = text / javascriptsrc =jquery.min.js/> ）在页面的非常底部，就在<之前/体> 。所以我不能使用 $ 。

解决方案

你的方式是我知道的唯一方法，虽然我会确保范围更加严格：

 （function（）{
 var runMyCode = function（$）{
 // jquery-dependent code here 
 $（＃foo）。data（'bar'，true）; 
}; 
 
 var timer = function（）{
 if（window.jQuery&& window.jQuery.ui）{
 runMyCode（window.jQuery）; 
} else {
 window.setTimeout（timer，100）; 
} 
}; 
 timer（）; 
}）（）; 
  

更新

<这是我拼凑在一起的一个小延迟加载器：

  var Namespace = Namespace || {}; 
 Namespace.Deferred = function（）{
 var functions = []; 
 var timer = function（）{
 if（window.jQuery&& window.jQuery.ui）{
 while（functions.length）{
 functions.shift（ ）（window.jQuery）; 
} 
} else {
 window.setTimeout（timer，250）; 
} 
}; 
 timer（）; 
 return {
 execute：function（onJQueryReady）{
 if（window.jQuery&& window.jQuery.ui）{
 onJQueryReady（window.jQuery）; 
} else {
 functions.push（onJQueryReady）; 
} 
} 
}; 
}（）; 
  

然后可以这样使用：

  Namespace.Deferred.execute（runMyCode）; 
  

I'd like to follow the general guideline of putting all JavaScript at the very bottom of the page, to speed up loading time and also to take care of some pesky issues with conflicting jQuery versions in a web app (Django).

However, every so often I have some code, code which depends on jQuery, but which must be further up on the page (basically the code can't be moved to the bottom).

I'm wondering if there's an easy way to code this so that even though jQuery is not yet defined the code works when jQuery is defined.

The following seems, I have to say, like overkill but I don't know of another way to do it:

function run_my_code($) {
    // jquery-dependent code here
    $("#foo").data('bar', true);
}
var t = null;
function jquery_ready() {
    if (window.jQuery && window.jQuery.ui) {
        run_my_code(window.jQuery);
    } else {
        t = window.setTimeout(jquery_ready, 100);
    }
}
t = window.setTimeout(jquery_ready, 100);

Actually, I might need to use code more than once in a page, code that doesn't know about other code, so even this probably won't work unless I rename each jquery_ready to something like jquery_ready_guid, jquery_ready_otherguid and so on.

Clarification

Just so this is clear, I am putting the include to JavaScript (<script type="text/javascript" src="jquery.min.js" />) at the very bottom of the page, just before the </body>. So I can't use the $.

解决方案

Your way is the only way that I know of, though I would ensure that the scoping is a little tighter:

(function() {
  var runMyCode = function($) {
    // jquery-dependent code here
    $("#foo").data('bar', true);
  };

  var timer = function() {
    if (window.jQuery && window.jQuery.ui) {
      runMyCode(window.jQuery);
    } else {
      window.setTimeout(timer, 100);
    }
  };
  timer();
})();

Update

Here's a little deferred loader I cobbled together:

var Namespace = Namespace || { };
Namespace.Deferred = function () {
  var functions = [];
  var timer = function() {
    if (window.jQuery && window.jQuery.ui) {
        while (functions.length) {
            functions.shift()(window.jQuery);
        }
    } else {
        window.setTimeout(timer, 250);
    }
  };
  timer();
  return {
    execute: function(onJQueryReady) {
        if (window.jQuery && window.jQuery.ui) {
            onJQueryReady(window.jQuery);
        } else {
            functions.push(onJQueryReady);
        }
    }
  };
}();

Which would then be useable like so:

Namespace.Deferred.execute(runMyCode);

这篇关于处理在加载jQuery之前依赖于jQuery的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！