等待ES6模块中的文档就绪
通过提升，在文档准备就绪之前就加载了ES6模块。
例如,
// module.js
console.log('body', document.body);
export let a = 1;
// main.js
import {a} from 'module'在控制台中记录body null。
如何让ES6模块使用DOM操作和所需的document ready
我试着用
$(document).ready(function() {
var a = 1;
});
export {a};在我的模块中，但是babel给了我一个Unexpected token错误。
我也试过
$(document).ready(function() {
export let a = 1;
});我犯了一个'import' and 'export' may only appear at the top level错误。
更新：
我也有同样的问题
document.addEventListener("DOMContentLoaded",function(){
var a = 1;
}
export {a};因为没有定义a。
也就是说，要导出的变量不可用(请参阅我的更新)。
更新：
下面是基于@MaciejSikora代码的尝试：
function Test() {
document.addEventListener("DOMContentLoaded",()=>{
this.width = $(window).width();
});
};
//example object method
Test.prototype.getElement = function(el) {
return this[el];
};
export { Test };在另一个文件里
var test = new Test();
var width = test.getElement('width');但是width还没有定义。
回答 3
Stack Overflow用户
发布于 2016-09-27 11:06:39
DOM在ES6中没有改变，ES6给JavaScript提供了新的特性，即所有的。在纯js中，存在用于多姆加载的事件(它是从jquery等效的文档准备好的)：
document.addEventListener("DOMContentLoaded",function(){
//Your code here
});使用DOM树的模块可以在内部有侦听器，或者在就绪后应该使用。我创建了示例DomManipulate组件来展示我的意思：
var DomManipulate=function(selector){
document.addEventListener("DOMContentLoaded",()=>{
this.element=document.querySelector(selector);
if (typeof this.callback === 'function')
this.callback();
});
};
//HERE WE HAVE CALLBACK WHEN OUR MODULE CAN BE USED
DomManipulate.prototype.onReady=function(callback){
this.callback=callback;
};
DomManipulate.prototype.getElement=function(){
//example object method
return this.element;
};
DomManipulate.prototype.write=function(text){
return this.element.innerText=text;
};
export { DomManipulate };因此，这是更好的方法，我们已经封装了组件。
使用示例：
var d=new DomManipulate("#test");
d.onReady(()=>{d.write("Test text");});模块应该独立于DOM，创建直接导出DOM元素的模块是非常错误的做法。因此，它可以通过两种方式实现：
- 模块应该在属性中获得选择器DOM对象，并且应该在DOM准备好之后调用。因此，您的模块不知道在哪里调用，但它需要准备好的DOM结构。在这种情况下，DOM就绪回调只存在于主文件中，该文件使用模块并调用它们。
- 模块可以有一些DOM准备好的监听器，但我们也需要一些信息，什么时候可以使用模块(我在示例和onReady函数中展示了这种情况)。
Stack Overflow用户
发布于 2021-03-11 20:15:14
还有另一个较短的(旧的) vanilla js表达式等待加载DOM：
window.onload=function(){}与ES6 Fat Arrow函数相同：
window.onload=()=>{}Stack Overflow用户
发布于 2016-09-27 11:03:51
尝试将您的<script>标记放在<body/>的底部。通过这样做，document.body将是可用的，并且不会抛出错误。
https://stackoverflow.com/questions/39722809
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号