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？

我尝试使用

$(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未定义。

Answer 1

ES6中没有更改DOM，ES6为JavaScript提供了新功能，全部是。在纯js中存在dom加载的事件（它是从jquery等效的文件准备好）：

document.addEventListener("DOMContentLoaded",function(){

    //here code
});

使用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函数中显示了这种情况）。

Answer 2

尝试将<script>标记放在<body/>的底部。通过这样做，document.body将可用，并且不会引发错误。

Answer 3

如果脚本位于页面底部，那么dom已经加载，因此不需要'DOMContentLoaded'。或？

Answer 4

还有另一个更短的（旧的）vanilla js 表达式要等到 DOM 加载完毕：

window.onload=function(){}

与 ES6 相同 Fat Arrow 函数：

window.onload=()=>{}

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

4 个答案: