onClick イベント ハンドラー内で ES6 モジュール関数にアクセスするにはどうすればよいですか?

ES6 モジュールと Onclick 関数のアクセシビリティ

onclick イベント ハンドラーで使用するために ES6 モジュールから関数をインポートする場合は、スコープの性質を考慮することが重要ですモジュールの。デフォルトでは、モジュールは名前の衝突を防ぐために別のスコープを作成します。

提供されたコード例では、インポートされた hello 関数がモジュール スコープ内で定義されているため、onclick ハンドラーで直接アクセスできないために問題が発生します。 .

これを解決するには、次の 2 つの推奨アプローチがあります。

イベントの使用リスナー:

このアプローチには、addEventListener メソッドを使用して、インポートされた関数を onclick イベントにバインドすることが含まれます。コードの修正バージョンは次のとおりです。

<button type="button">

Window オブジェクトに関数を公開する (非推奨):

もう 1 つのアプローチは、推奨されませんが、明示的に行うことです。インポートされた関数を window オブジェクトに公開します。ただし、この方法では、潜在的な名前の競合が発生する可能性があります。

import {hello} from './test.js'

window.hello = hello

関数を window オブジェクトに公開すると、onclick ハンドラーとしてアクセスできるようになります。ただし、この方法はグローバル名前空間を汚染し、デバッグ作業を妨げる可能性があるため、お勧めできません。

以上がonClick イベント ハンドラー内で ES6 モジュール関数にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。