web-dev-qa-db-ja.com

ES6モジュールでドキュメントの準備ができるまで待ちます

巻き上げにより、ドキュメントの準備が整う前にES6モジュールがロードされます。

例えば、

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

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

コンソールに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は未定義です。

javascriptdomes6-modules
12
hadrienj

DOMはES6で変更されていないため、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要素を直接エクスポートするモジュールを作成することは、非常に間違った習慣です。したがって、次の2つの方法で実行できます。

  1. モジュールは、属性でセレクターDOMオブジェクトを取得し、DOMの準備ができた後に呼び出す必要があります。だからあなたのモジュールはどこで呼ばれているのか分かりませんが、すぐに使えるDOM構造が必要です。この場合、DOM readyコールバックは、モジュールを使用して呼び出すメインファイルのみにあります。

  2. モジュールにはいくつかのDOM対応リスナーを含めることができますが、モジュールを使用できる場合にも情報が必要です（この状況は例とonReady関数で示しました）。

12
Maciej Sikora

<script>タグの下部にある<body/>。これにより、document.bodyが使用可能になり、エラーはスローされません。

5
Pranesh Ravi

スクリプトがページの下部にある場合、domはすでにロードされているため、「DOMContentLoaded」は不要です。それとも？

0
nimo23