Bagaimanakah Saya Boleh Mengakses Fungsi Modul ES6 Dalam Pengendali Acara onClick?

Modul ES6 dan Kebolehcapaian Fungsi Onclick

Apabila mengimport fungsi daripada modul ES6 untuk digunakan dalam pengendali acara onclick, adalah penting untuk mempertimbangkan sifat skop daripada modul. Secara lalai, modul mencipta skop berasingan untuk mengelakkan perlanggaran nama.

Dalam contoh kod yang disediakan, isu timbul kerana fungsi hello yang diimport ditakrifkan dalam skop modul, dan oleh itu tidak boleh diakses secara langsung dalam pengendali onclick .

Untuk menyelesaikan masalah ini, terdapat dua pendekatan yang disyorkan:

Menggunakan Acara Pendengar:

Pendekatan ini melibatkan penggunaan kaedah addEventListener untuk mengikat fungsi yang diimport ke acara onclick. Berikut ialah versi kod yang diubah suai:

<button type="button"></button>

Mendedahkan Fungsi kepada Objek Tetingkap (Tidak Disyorkan):

Pendekatan lain, walaupun tidak disyorkan, adalah dengan secara eksplisit dedahkan fungsi yang diimport kepada objek tetingkap. Walau bagaimanapun, amalan ini boleh menyebabkan konflik penamaan yang berpotensi.

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

window.hello = hello

Dengan mendedahkan fungsi kepada objek tetingkap, ia boleh diakses sebagai pengendali onclick. Walau bagaimanapun, kaedah ini tidak dinasihatkan kerana ia boleh mencemarkan ruang nama global dan menghalang usaha penyahpepijatan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses Fungsi Modul ES6 Dalam Pengendali Acara onClick?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!