在ES6模块中等待文档准备好

吊装时，ES6模块在文档准备好之前被加载。

例如,

// module.js
console.log('body', document.body);
export let a = 1;
// main.js
import {a} from 'module'

log body null .

如何使用DOM操作和所需的document ready的ES6模块?

我试图使用

$(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是undefined

DOM在ES6中没有改变，ES6为JavaScript提供了新功能，这就是全部。在纯js存在事件dom加载(它是文档准备从jquery等效):

document.addEventListener("DOMContentLoaded",function(){
    //Your code here
});

使用DOM树的模块可以在内部有侦听器，或者应该在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函数中显示)。

还有另一个更短的(旧的)vanilla js表达式等待DOM被加载:

window.onload=function(){}

与ES6 Fat Arrow功能相同:

window.onload=()=>{}

尝试将<script>标签放在<body/>的底部。通过这样做，document.body将是可用的，它不会抛出一个错误。

相关内容

最新更新

热门标签：