2016-11-23 20 views
0

私はlocalStorageをベースにした簡単なpub-subシステムを作成しようとしていました。このプロセスにより、ES6モジュールの仕組みについての私の理解が不完全であることが分かりました。ES6モジュール - グローバル変数

const subscribers = {}; 
export default { 
    subscribe (key, callback) { 
    if (!Array.isArray(subscribers[key])) { 
     subscribers[key] = [callback]; 
    } else { 
     subscribers[key] = [...subscribers[key], callback]; 
    } 
    }, 
    publish (key, value) { 
    window.localStorage[key] = value; 
    subscribers[key].forEach(cb => cb(value)); 
    } 
}; 

私はlocalStorageのキーを購読/公開したいときはいつでもこのモジュールをインポートしました。問題は、モジュールがインポートされるたびにサブスクライバオブジェクトが再初期化されることです。

ウィンドウを汚染することなくサブスクライバオブジェクトを保持する方法はありますか?私は、importステートメントは、ファイルが初めてインポートされるときにのみ一度だけそのファイルを実行すると仮定しました。

ありがとうございました。

+0

現在、ブラウザはモジュールをサポートしていないため、どのパッケージシステムを使用していますか? –

+0

Webpack + Babel + ES6モジュール –

+0

あなたはそれをどのように使っているのかを教えてもらえますか?そのすべてのインポートは、同じモジュール状態を共有している必要があります(また、私がbabel-nodeでテストするときはそうです)。 –

答えて

1

これは私の最後の見落としです。

このモジュール(大文字)をインポートするときにタイプミスをしましたが、間違ったファイル名を指定しました。

大文字小文字を無視すると、同じ名前の別のモジュールがあります。この は、 他の大文字小文字のファイルシステムでコンパイルすると予期しない動作につながる可能性があります。複数のモジュールが必要な場合はモジュールの名前を変更するか、1つのモジュールが期待される場合は は等しいケーシングを使用します。

これにより、モジュールが再初期化されました。

私が間違っていると私を修正してください。しかし、私はモジュールが最初にインポートされたときにアプリケーション全体に対して一度だけ実行されると信じています。

ありがとうございました。

関連する問題