logo标签列表

Ext.onReady()与$(document).ready()的区别

javascriptjquerydomextjsextjs4
9

有什么不同吗？ 我有一个$(document).ready函数，应该检查extjs是否已加载，但主要问题是extjs没有在时机上加载，$(document).ready内部的事情开始执行，extjs创建函数会产生主要错误“不能执行未定义的创建”在Ext.create("...", {..});行。 如果我像这样再进行一次检查：

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

事情神奇地发生了。现在我正在使用ext-all.js，它被压缩后有约1.3MB的大小，我认为这相当大......而且当他进行第二次检查时，事情会神奇地加载......但我认为这2个函数并不像它们的定义所建议的那样，因为如果我将另一个$(document).ready放在Ext.onReady()行之前，事情会再次出错。我认为Ext.onReady({});函数做了一些$(document).ready()没有做到的黑魔法，如果有人知道这是哪种魔法，我很感兴趣。
因为它能够工作，但我不知道为什么，这让我很困扰。
谢谢阅读这篇文章。=） 附：我使用ExtJS已经大约一天了，所以我对它还很陌生。
Ext.onReady() 的意思是等待 DOM 准备就绪和所有必需的类都已加载。 - zloctb
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();
});
2
你比我快:) 很好 +1 （你可以提到脚本的加载顺序，因为这也可能会产生错误） - sra
是的，我完全同意它们并不完全符合其定义所示。实际上，我有更复杂的故事，但这就是解决方案的精髓。然而，我仍然想知道他如何检查自己是否已加载？如果没有加载，如果库没有按时加载此函数，Ext.onReady()函数也会出现错误“未定义”，对吗？我真的很感兴趣了解自我检查的整个过程（包括extjs和jquery）。因为这两个函数的确表现不同...编辑：+1给我=） - user1127302
我在这里找到了困扰我的答案：https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/DOMContentLoaded_(event) ......感谢大家的回答，特别是Johan。 - user1127302
1
这是错误的。jQuery只包含一个js文件，因此不需要等待jQuery加载。jQuery.ready()检查DOM是否准备就绪。Ext.onReady()检查ExtJS类是否已加载并且DOM是否准备就绪。在我看来，被贬低的@Mini0n的答案更正确。 - Marco Sulla
@MarcoSulla是正确的，这个答案是错误的。根据两个文档，它们都是关于DOM就绪事件处理的。没有一个是关于库被加载的。我添加了自己的答案，深入挖掘了库被加载的想法以及ready事件的实现。 - CTS_AE
2

Ext.onReady()和$(document).ready()与当前接受的答案所示无关于库是否已被加载。

根据文档，两者都是关于DOM加载和准备就绪的。

文档

解决方案

可能是您在脚本触发后加载了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 调用。

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

无人问津的额外说明

处理 DOM 准备工作比这些库所做的更复杂，这就是它们都包含此类事件处理程序的原因。

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

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

0
它们都检查DOM何时准备就绪。 如果你在使用jQuery时需要加载Ext，请尝试反转逻辑（不知道是否有效，还没有尝试过）。
Ext.onReady(function() {
    $(document).ready(function() {
        Ext.create('Ext.Button', {...});
    });
});

这个主题在StackOverflow上还有另一个问题：一起使用Extjs和jQuery

4
-2是因为你错了。jQuery ready会在DOM准备好时加载。而Ext.onReady则是在DOM和Ext都准备好时才被调用。 - LeeMobile
如果它们是相同的，你就不需要同时调用它们。不幸的是，被接受的答案也是错误的。jQuery 的 ready 不是关于库准备好了，而是 DOM 准备好了的简写。一个原始的 DOM 准备好了要更复杂一些，这就是为什么人们喜欢 jQuery 的原因 :) - CTS_AE
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接