javascript - 等待 ES6 模块中的文档准备就绪

Question

通过提升，ES6 模块会在文档准备好之前加载。

例如，

// module.js
console.log('body', document.body);
export let a = 1;

// main.js
import {a} from 'module'

在控制台中记录body null。

如何让 ES6 模块使用 DOM 操作并准备好所需的文档？

我尝试使用

$(document).ready(function() {
  var a = 1;
});

export {a};

在我的模块中，但 babel 返回了一个 Unexpected token 错误。

我也尝试过

$(document).ready(function() {
  export let a = 1;
});

我遇到了“导入”和“导出”可能仅出现在顶层错误。

更新:

我也有同样的问题

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');

但是宽度未定义。

Answer 1

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 元素的模块是非常错误的做法。所以可以通过两种方式来完成:

1. 模块应该在属性中获取选择器 DOM 对象，并且应该在 DOM 准备好后调用。所以你的模块不知道在哪里被调用，但它需要准备好 DOM 结构。在这种情况下，DOM 就绪回调仅在使用模块并调用它们的主文件中。

2. 模块可以有一些 DOM 就绪监听器，但我们还需要一些何时可以使用模块的信息(我在示例和 onReady 函数中展示了这种情况)。