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

  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 に答える