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

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

提问by Johan Haest

Whats the difference? I have on $(document).ready function which should check if extjs is loaded but the main problem is extjs does not load on time and things inside $(document).ready starts to execute, extjs create function which produces the main error 'cannot execute create of undefined' on Ext.create("...", {..}); line. If i put double check like this:

有什么不同？我有 $(document).ready 函数，它应该检查 extjs 是否已加载，但主要问题是 extjs 未按时加载，并且 $(document).ready 中的内容开始执行，extjs 创建函数会产生主要错误'无法在 Ext.create("...", {..}) 上执行未定义的创建；线。如果我像这样进行双重检查：

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

Things magically work. Now I'm using ext-all.js which has ~1.3MB minified which is pretty large imho...and things get magically loaded while he does the second check...but I think those 2 functions are not the same as they definitions suggest, because if I put another $(document).ready instead of Ext.onReady() line, things break again. I think Ext.onReady({}); function does some other black magic which $(document).ready() does not, and I'm interested if someone knows what is this kind of magic?

事情神奇地起作用。现在我正在使用 ext-all.js，它缩小了约 1.3MB，这是非常大的 imho ......当他进行第二次检查时，事情会神奇地加载......但我认为这两个功能与它们不同定义表明，因为如果我放置另一个 $(document).ready 而不是 Ext.onReady() 行，事情又会破裂。我认为 Ext.onReady({}); function 有其他一些 $(document).ready() 没有的黑魔法，如果有人知道这种魔法是什么，我很感兴趣？

Because it work's and I don't know why which is killing me.

因为它有效，我不知道为什么这会杀死我。

Thanks for reading the post. =) ps. I'm using ExtJS for about day so I'm pretty new to it.

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

回答by Johan Haest

No they're not the same, the first one will proc when your jQuery library is loaded, the Ext.onReady(.. will proc when your ExtJS library is loaded.

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

If you want to combine them you could do something like this:

如果你想把它们结合起来，你可以做这样的事情：

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();
});

回答by jfvoliveira

They both check for when the DOM is ready. If you need Ext to be loaded when using jQuery, try to invert the logic (don't know if it will work, haven't tried).

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

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

Another StackOverflow question on this subject: Extjs + jQuery together

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

回答by CTS_AE

Ext.onReady()and $(document).ready()have nothing to do about either library being loaded as the current accepted answer suggests.

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

According to the documentation both are about the DOM being loaded and ready.

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

Documentation

文档

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

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

An Answer to Your Case

对您案件的答复

It's possible that you're loading the Ext JS resource after your script fires, but jQuery is already loaded above your script. Thus using jQuery to wait until the DOM is loaded guarantees that the DOM has been loaded and thus by then Ext JS has also been loaded.

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

If you try to invert them and us Ext JS first you'll likely have an error.

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

According to the documentation they're doing the same thing so you shouldn't need to nest them

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

A Fix for this Scenario

此场景的修复

If you are loading your resources like so如果您像这样加载资源：

1. jQuery
2. Your Script
3. Ext JS

1. jQuery
2. 你的脚本
3. 扩展JS

It would be best to load them in this order最好按以下顺序加载它们：

1. jQuery and/or Ext JS
   • Order shouldn't matter as they can stand by themselves without requiring one or the other
2. Your Script

1. jQuery 和/或 Ext JS
   • 顺序应该无关紧要，因为它们可以独立存在而不需要其中一个
2. 你的脚本

Additional Explanation

附加说明

Due to how the DOM is loaded and parsed by the time it reads your script it guarantees that jQuery and Ext JS are available. This is why you can reference their libraries in your script; you're not waiting for them to load they're already there and available to be used which is why you can call them and use their ready calls.

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

You need to use the ready event of one of the libraries to guarantee that all elements are loaded into the DOM and available to be accessed. You also shouldn't try to add anything to the DOM until it's ready although you can append to current elements that have been loaded above your element/script tag. It's just best practice to not touch the DOM until it's finished loading.

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

Additional Explanation Nobody Asked For

没有人要求的额外解释

Handling DOM ready is more involved than these libraries make it which is why they both include such an event handler.

处理 DOM 就绪比这些库更复杂，这就是为什么它们都包含这样一个事件处理程序。

The following link explains with vanilla JS how you cannot only add your event listener you also need to check if it has already fired when you go to add your event listener for DOM ready. This is a common case to handle with eventing - where you create a race condition where an event may fire before you start listening for it - then you don't know that it ever happened without another way to check.

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

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

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