9

有什么不同？我有 $(document).ready 函数，它应该检查是否加载了 extjs，但主要问题是 extjs 没有按时加载并且 $(document).ready 中的东西开始执行，extjs 创建产生主要错误的函数'无法在 Ext.create("...", {..}) 上执行 create of undefined'；线。如果我像这样仔细检查：

$(document).ready(function() {
    Ext.onReady(function() {
        Ext.create('Ext.Button', {...});
    });
});

事情神奇地起作用。现在我正在使用 ext-all.js，它缩小了 ~1.3MB，这是相当大的恕我直言......当他进行第二次检查时，事情会神奇地加载......但我认为这两个函数与它们不一样定义表明，因为如果我放另一个 $(document).ready 而不是 Ext.onReady() 行，事情就会再次中断。我认为 Ext.onReady({}); 函数还有其他一些 $(document).ready() 没有的黑魔法，如果有人知道这种魔法是什么，我很感兴趣？

因为它起作用了，我不知道为什么会杀了我。

感谢您阅读帖子。=）附言。我正在使用 ExtJS 大约一天，所以我对它很陌生。

4

3 回答 3

22

不，它们不一样，第一个将在您的 jQuery 库加载时触发，Ext.onReady(.. 将在您的 ExtJS 库加载时触发。

如果你想组合它们，你可以这样做：

var extReady = false;
var jQueryReady = false;

var librariesReady = function () {
    if (jQueryReady && extReady) {
        //They're both ready
    }
};

$(document).ready(function () {
    jQueryReady = true;
    librariesReady();    
});
Ext.onReady(function () {
    extReady = true;
    librariesReady();
});
于 2013-01-30T10:04:52.943 回答
1

Ext.onReady()并且$(document).ready()与当前接受的答案所暗示的加载任何一个库无关。

根据文档，两者都是关于正在加载和准备好的 DOM。

文档

对您案件的答复

您可能在脚本触发后加载 Ext JS 资源，但 jQuery 已经在您的脚本上方加载。因此，使用 jQuery 等待 DOM 加载可保证 DOM 已加载，因此到那时 Ext JS 也已加载。

如果您尝试反转它们并首先使用 Ext JS，您可能会遇到错误。

根据文档，他们正在做同样的事情，所以你不需要嵌套它们

此场景的修复

如果您像这样加载资源：
  1. jQuery
  2. 你的脚本
  3. 分机JS
最好按以下顺序加载它们：
  1. jQuery 和/或 Ext JS
    • 订单不重要，因为他们可以自己站立而无需其中一个
  2. 你的脚本

附加说明

由于 DOM 在读取脚本时是如何加载和解析的，它保证了 jQuery 和 Ext JS 可用。这就是您可以在脚本中引用它们的库的原因；您无需等待它们加载它们已经存在并且可以使用，这就是您可以调用它们并使用它们的就绪调用的原因。

您需要使用其中一个库的 ready 事件来保证所有元素都加载到 DOM 中并且可以访问。在准备好之前，您也不应该尝试向 DOM 添加任何内容，尽管您可以附加到已加载到元素/脚本标签上方的当前元素。最好的做法是在 DOM 完成加载之前不要触摸它。

没有人要求的额外解释

处理 DOM 准备就绪比这些库所涉及的更多，这就是为什么它们都包含这样的事件处理程序。

以下链接使用 vanilla JS 解释了如何不仅添加事件侦听器，还需要检查它是否已经触发，当您为 DOM 准备好添加事件侦听器时。这是使用事件处理的常见情况 - 您创建一个竞争条件，在您开始侦听之前可能会触发一个事件 - 然后如果没有其他方法检查，您不知道它曾经发生过。

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Checking_whether_loading_is_already_complete

于 2019-03-09T02:56:27.627 回答
0

它们都检查 DOM 何时准备就绪。如果你在使用jQuery的时候需要加载Ext，试试把逻辑倒过来（不知道能不能用，没试过）。

Ext.onReady(function() {
    $(document).ready(function() {
        Ext.create('Ext.Button', {...});
    });
});

关于这个主题的另一个 StackOverflow 问题：Extjs + jQuery together

于 2013-01-30T10:02:57.867 回答