为什么 jQuery UI 看不到 jQuery？

发布于 2024-10-07 10:36:08 字数 1491 浏览 1 评论 0原文

我构建了一个 JavaScript 小部件，它必须可嵌入到任何环境中的任何第三方网站上。该小部件依赖于 jQuery 和 jQuery UI。我按照如何将依赖于 jQuery 的 Javascript 小部件嵌入到未知环境中以负责任的方式添加 jQuery - 对于嵌入 jQuery 非常有效。但是当我尝试添加 jQuery UI 时，它失败了。代码如下：

(function(window, document, version, callback) {
  var j, d;
  var loaded = false;
  if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js";
    script.onload = script.onreadystatechange = function() {
        if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
            callback((j = window.jQuery).noConflict(1), loaded = true);
            j(script).remove();
        }
    };
    document.documentElement.childNodes[0].appendChild(script)
  }
})(window, document, "1.3.2", function($, jquery_loaded) {
    $.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js', function(){
      console.log('loaded');
    });
});

当我运行此代码时，我收到“已加载”消息，随后出现一条错误，指出 jquery-ui.js 第 15 行上的“$ 未定义”。但是当我使用 $.getScript() 加载 jQuery UI 时，$ 怎么可能是未定义的呢？为什么在出现错误之前我会看到“已加载”消息？根据 jQuery 文档，在加载并执行脚本之前，getScript 不应执行回调。

有什么方法可以使用这个框架来包含 jQuery UI，或者我是否需要使用像 RequireJS 这样的脚本加载器来加载所有内容、强制依赖项等？

原文

I've built a JavaScript widget that must be embeddable on any third-party site, in any environment. The widget relies on jQuery and jQuery UI. I followed the steps in How to embed Javascript widget that depends on jQuery into an unknown environment to add jQuery in a responsible manner -- works great for embedding jQuery. But when I try to add jQuery UI, it fails. Here's the code:

(function(window, document, version, callback) {
  var j, d;
  var loaded = false;
  if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js";
    script.onload = script.onreadystatechange = function() {
        if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
            callback((j = window.jQuery).noConflict(1), loaded = true);
            j(script).remove();
        }
    };
    document.documentElement.childNodes[0].appendChild(script)
  }
})(window, document, "1.3.2", function($, jquery_loaded) {
    $.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js', function(){
      console.log('loaded');
    });
});

When I run this, I get the 'loaded' mesage, followed by an error saying that "$ is undefined" on line 15 of jquery-ui.js. But how can $ be undefined when I'm using $.getScript() to load jQuery UI? And why do I see the message 'loaded' before I get the error? According to the jQuery documentation, getScript shouldn't execute the callback until the script has been loaded and executed.

Is there any way I can use this framework to include jQuery UI, or do I need to use a script loader like RequireJS in order to load everything, enforce dependencies, etc.?

分享到QQ

分享到微博