31

使用提升，ES6 模块在文档准备好之前被加载。

例如，

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

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

登录body null控制台。

如何拥有使用 DOM 操作和必需的 ES6 模块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是未定义的。

4

3 回答 3

40

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

于 2016-09-27T11:06:39.070 回答
4

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

于 2016-09-27T11:03:51.000 回答
2

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

window.onload=function(){}

与ES6 胖箭头功能相同：

window.onload=()=>{}
于 2021-03-11T20:15:14.117 回答