es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo utilizar una función en otro archivo .js público.

22 Jul, 2023 Programación

Tuve originalmente los siguientes comandos de código para mayor simplicidad y los coloqué 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. Por lo tanto, lo coloqué 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 volviendo al archivo HTML, intenté importar o requerir para usar esa función, pero no está funcionando:

      <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 manera de rehacer el trabajo entre archivos JS públicos?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay formas de importar o requerir funciones de un archivo JavaScript a otro. Una forma de hacerlo es utilizando la sintaxis de módulo ES6, lo cual requiere agregar “type = “module”” a la etiqueta de script en el archivo HTML donde se utiliza la función importada. Por ejemplo:

    <script type="module">
    import { MyPopUpPost } from '/js/UtilitiesForm.js';
    async function ThemMonHoc() {
        MyPopUpPost('Agregar asignatura', '/ThemMonHoc')
    }
    async function SuaTen() {
        MyPopUpPost('Editar nombre de asignatura', '/SuaTenMonHoc')
    }
</script>

    En el archivo UtilitiesForm.js, la función también debe ser exportada con la palabra clave “export”:

    export async function MyPopUpPost(title, route) {
    // aquí va el código de la función
}

    Otra forma de importar o requerir funciones es utilizando un cargador de módulos como RequireJS o SystemJS. Estas bibliotecas permiten una mayor flexibilidad en la carga y gestión de dependencias entre archivos JavaScript.

Comments are closed.