Ext.onReady() 与 $(document).ready()

Question

有什么区别？我有 $(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 大约一天，所以我对它很陌生。

Answer 1

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

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

文档

• 分机 JS：https://docs.sencha.com/extjs/6.7.0/modern/Ext.html#method-onReady
• jQuery: https://api.jquery.com/ready/

对您的案件的答复

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

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

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

此场景的修复

如果您像这样加载资源：

1. jQuery
2. 你的脚本
3. Ext 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

Answer 2

不，它们不一样，第一个将在您的 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();
});

Answer 3

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

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

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