Originalmente tenía los siguientes comandos de código para simplificar, los puse justo debajo del cuerpo en el archivo html. Este es mi código:
<script> async function ThemMonHoc() { MyPopUpPost('Thêm môn học','/ThemMonHoc') } async function SuaTen() { MyPopUpPost('Sửa tên môn học','/SuaTenMonHoc') } async function MyPopUpPost(title,route) { var a = await Swal.fire({ title: title, html: '<input id="Result" class="swal2-input" type="text"></input>', showDenyButton: true, }) var value = $('#Result').val() if (a.isConfirmed) $.post(route,{a:value}) } </script>Parece que la función MyPopUpPost se reutilizará muchas veces en otros archivos html y dejar el código aquí no será muy ordenado. Entonces, lo puse en otro archivo.
Este es mi código en UtilitiesForm.js:
export async function MyPopUpPost(title, route) { var a = await Swal.fire({ title: title, html: '<input id="Result" class="swal2-input" type="text"></input>', showDenyButton: true, }) var value = $('#Result').val() if (a.isConfirmed) $.post(route, { a: value }) }Y de vuelta al archivo html, intento importar o necesito usar esa función pero no funciona:
<script> import {MyPopUpPost} from '/js/UtilitiesForm.js' async function ThemMonHoc() { MyPopUpPost('Thêm môn học','/ThemMonHoc') } async function SuaTen() { MyPopUpPost('Sửa tên môn học','/SuaTenMonHoc') } </script>¿Hay alguna forma de rehacer el trabajo entre archivos JS públicos?
Parece que lo está haciendo correctamente, solo mencione el tipo en la etiqueta del script, asegúrese de que su ruta sea correcta para el archivo JS.
<script type="module"> import {MyPopUpPost} from '/js/UtilitiesForm.js' async function ThemMonHoc() { MyPopUpPost('Thêm môn học','/ThemMonHoc') } async function SuaTen() { MyPopUpPost('Sửa tên môn học','/SuaTenMonHoc') } </script>Te recomiendo revisar este enlace, cómo importar archivos en HTML.
Si desea utilizar módulos ES6, necesita type="module" en su etiqueta <script> .
Si mira en la consola de su navegador, probablemente debería decirle algo al respecto.
Pero si no usa módulos ES6, en realidad será más simple; las cosas serán globales de forma predeterminada y no necesita ninguna declaración de importación/exportación, solo incluye las utilidades como <script> antes del código principal de <script> .
Depende de usted qué estilo usar; Los módulos ES6 son más limpios, pero requieren más administración.
Tienes dos opciones,
Mira esto: https://www.w3schools.com/tags/att_script_src.asp
Luego, cambie su script a lo siguiente y debería estar bien:
<script src='/js/UtilitiesForm.js'></script> <script> async function ThemMonHoc() { MyPopUpPost('Thêm môn học','/ThemMonHoc') } async function SuaTen() { MyPopUpPost('Sửa tên môn học','/SuaTenMonHoc') } </script>