2017-11-17 10 views
0

明らかに、私は初心者で基本的なスタッフを理解しようとしていますので、私にご負担ください!ES6のJavascriptクラス、他のjsファイルとhtmlファイル内でそれらをインポートする方法は?

これらのファイル(index.html、app.js、およびcalc.js)はすべて同じフォルダにあります。その内容は次のとおりです。

1:

は、私は2つの問題持っているファイルで理由(app.js)、(calc.js)をCalcのクラスをインポートし、それが作品のファイルでのに対し、新しいインスタンスを作成し、同様のプロセスクラステストでは動作しません。

2: * .htmlファイルなどで「Calc」クラスを使用するにはどうすればよいですか?

注:

:私は最後にHTMLファイルのMac OS 10.13

// app.js 
import { Calc } from './calc.js'; 

class Test { 
    static hello() { 
     console.log("hello from class1"); 
    } 
} 

let c = new Calc(); // this works! 

console.log(c.sum(2, 3) + 1); // 6 

export { Test }; 

// calc.js 
import { Test } from "./app.js"; 

class Calc { 
    sum(a, b) { 
     return a + b; 
    } 
} 

let t = new Test(); // Uncaught ReferenceError: Test is not defined 
t.hello(); 

export { Calc }; 

にクロム(62.0.3202.94(公式ビルドを)(64ビット))を使用しています

<html> 

<head> 
    <meta charset="utf-8" /> 
    <script src="./app.js" type="module"></script> 
    <script src="./calc.js" type="module"></script> 
</head> 

<body> 
    <h1>ES6</h1> 
<script> 
    let c = new Calc(); 
    // simulate input summation from two textboxes for example 
    console.log(c.sum(2, 1)); //Uncaught ReferenceError: Calc is not defined 
</script> 
</body> 

</html> 

答えて

1

問題1:

循環依存性があります。app.jsのインポートcalc.jsですが、のインポートapp.jsです。

は通常、モジュールシステムは、モジュールの依存関係のすべてが、モジュール自体の前に実行されることを保証しますが、あなたの依存関係ツリーはサイクルがある場合、これは不可能である - それ が最初に実行するためにそれらのいずれかを選択するを持っています。この場合、最初に calc.jsが実行され、その時点で Testはまだ定義されていません。

注意が必要な場合はこの問題を回避する方法がありますが、サイクリック依存関係はコードを間違って構成しているという兆候です。最良の解決方法はサイクルを持たないように再構成することです。

問題2:

ES2016モジュールは、グローバルスコープで実行されません。ウィンドウ全体で何かを利用できるようにするには、明示する必要があります。

+0

ありがとう、ありがとうございます。 **問題1 **は完全に解決されました*。しかし、** Problem2 **では、私は 'Script src ="。/ calc.js "type =" module ">というヘッダーにスクリプトを追加したにもかかわらず、' Uncaught ReferenceError:Calc is defined' '。つまり、クラスCalcが定義されていないので、プロパティwindow.Calcを追加できません! – user2804070

+1

'window.Calc = Calc'はどこに置いていますか? HTMLではなく、あなたのモジュールの1つにある必要があります。 –

+0

ありがとうございました:)これは残りの問題を解決しました:D – user2804070

関連する問題