非jquery的$(document).ready()等价于什么?
当前回答
根据http://youmightnotneedjquery.com/#ready的说法，一个很好的替代品仍然适用于IE8
函数准备(fn) { 如果文档。readyState != 'loading') { fn (); } else if (document.addEventListener) { 文档。addEventListener (DOMContentLoaded”内,fn); }其他{ 文档。attachEvent('onreadystatechange'， function() { 如果文档。readyState != 'loading') fn (); })； ｝ ｝ / /测试 window.ready(函数(){ alert('它'); })；
改进:我个人也会检查fn的类型是否为函数。 正如@elliottregan建议的那样，在使用后删除事件侦听器。
function ready(fn) { if (typeof fn !== 'function') { throw new Error('Argument passed to ready should be a function'); } if (document.readyState != 'loading') { fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn, { once: true // A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked. }); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } // tests try { window.ready(5); } catch (ex) { console.log(ex.message); } window.ready(function() { alert('it works'); });
我之所以回答这个问题晚，是因为我一直在寻找这个答案，但在这里找不到。我认为这是最好的解决办法。
其他回答
在最近的浏览器中最简单的方法是使用适当的GlobalEventHandlers, onDOMContentLoaded, onload, onloadeddata(…)
onDOMContentLoaded = (function(){console.log("DOM就绪!")})() onload = (function(){console.log("页面已加载完毕!")})() onlodeddata = (function(){console.log("数据已加载!")})()
当初始HTML文档完全加载和解析时，无需等待样式表、图像和子帧完成加载，就会触发DOMContentLoaded事件。应该只使用完全不同的事件加载来检测完全加载的页面。在更适合使用DOMContentLoaded的地方使用load是一个非常普遍的错误，所以要谨慎。
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
使用的函数是一个IIFE，在这种情况下非常有用，因为它在准备好时触发自己:
https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
显然，将它放在任何脚本的末尾更合适。
在ES6中，我们也可以把它写成一个箭头函数:
onload = (() => {console.log("ES6页面已完全加载!")})()
最好的方法是使用DOM元素，我们可以等待任何变量准备好，从而触发一个带箭头的IIFE。
行为将是相同的，但内存影响较小。
页脚 = (() => { console.log(“页脚加载!”)})() < div id = "脚注" >
在普通的JavaScript中，没有库?这是一个错误。$只是一个标识符，除非您定义它，否则它是没有定义的。
jQuery将$定义为它自己的“everything对象”(也称为jQuery，因此您可以在不与其他库冲突的情况下使用它)。如果你没有使用jQuery(或其他定义它的库)，那么$将不会被定义。
或者你是在问在纯JavaScript中有什么等价的东西吗?这样的话，你可能需要window。onload并不是完全等价的，但它是在普通JavaScript中接近相同效果的最快最简单的方法。
根据http://youmightnotneedjquery.com/#ready的说法，一个很好的替代品仍然适用于IE8
函数准备(fn) { 如果文档。readyState != 'loading') { fn (); } else if (document.addEventListener) { 文档。addEventListener (DOMContentLoaded”内,fn); }其他{ 文档。attachEvent('onreadystatechange'， function() { 如果文档。readyState != 'loading') fn (); })； ｝ ｝ / /测试 window.ready(函数(){ alert('它'); })；
改进:我个人也会检查fn的类型是否为函数。 正如@elliottregan建议的那样，在使用后删除事件侦听器。
function ready(fn) { if (typeof fn !== 'function') { throw new Error('Argument passed to ready should be a function'); } if (document.readyState != 'loading') { fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn, { once: true // A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked. }); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } // tests try { window.ready(5); } catch (ex) { console.log(ex.message); } window.ready(function() { alert('it works'); });
我之所以回答这个问题晚，是因为我一直在寻找这个答案，但在这里找不到。我认为这是最好的解决办法。
现在是2018年，这里有一个快速而简单的方法。
这将添加一个事件监听器，但如果它已经被触发，我们将检查dom是否处于就绪状态或它是否完整。这可以在子资源完成加载(图像、样式表、框架等)之前或之后触发。
函数domReady(fn) { //如果我们到派对早 文档。addEventListener(“DOMContentLoaded”内,fn); //如果迟到;我的意思是准时。 如果文档。readyState === "interactive" ||文档。readyState === "complete") { fn (); ｝ ｝ domReady(() => console.log("DOM准备好了，来拿吧!"));
额外的数据
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded 检查加载是否已经完成 https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
更新
下面是一些使用我编写的标准ES6导入和导出的快速实用工具，也包括TypeScript。也许我可以让这些快速库可以安装到项目作为一个依赖。
JavaScript
export const domReady = (callBack) => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', callBack);
}
else {
callBack();
}
}
export const windowReady = (callBack) => {
if (document.readyState === 'complete') {
callBack();
}
else {
window.addEventListener('load', callBack);
}
}
打印稿
export const domReady = (callBack: () => void) => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', callBack);
}
else {
callBack();
}
}
export const windowReady = (callBack: () => void) => {
if (document.readyState === 'complete') {
callBack();
}
else {
window.addEventListener('load', callBack);
}
}
承诺
export const domReady = new Promise(resolve => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', resolve);
}
else {
resolve();
}
});
export const windowReady = new Promise(resolve => {
if (document.readyState === 'complete') {
resolve();
}
else {
window.addEventListener('load', resolve);
}
});
这没有回答问题，也没有显示任何非jquery代码。请看下面@ sospedra的回答。
$(document).ready()的优点是它在window.onload之前触发。load函数等待加载所有内容，包括外部资产和图像。美元(文档)。但是，当DOM树完成并且可以操作时，ready将被触发。如果你想在没有jQuery的情况下实现DOM，你可以查看这个库。有人从jQuery中提取了现成的部分。它又小又漂亮，你可能会发现它很有用:
domready at谷歌Code
