如何在另一个公共 js 文件中使用函数答案

【问题标题】：How to use function in another public js file如何在另一个公共 js 文件中使用函数
【发布时间】：2022-01-20 02:49:42
【问题描述】：

为了简单起见，我最初有以下代码命令，我将它放在 html 文件的正文下方。这是我的代码：

<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>

似乎MyPopUpPost函数会在其他html文件中重复使用很多次，把代码留在这里不会很整洁。所以，我把它放在另一个文件中。

这是我在 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
        })
    }

然后回到我尝试导入或要求使用该功能但它不起作用的 html 文件：

      <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>

有没有办法重做公共 JS 文件之间的工作？

【问题讨论】：

标签： javascript node.js function web sweetalert2

【解决方案1】：

你有两个选择，

您可以使用脚本的 src 属性将文件导入 HTML。

看看这个：https://www.w3schools.com/tags/att_script_src.asp

然后，将您的脚本更改为以下内容，您应该可以：

<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>

将 type="module" 添加到您的脚本中。看看这个：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type

【讨论】：

【解决方案2】：

看来你做对了，只需要在script标签中提到类型，确保你的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>

我建议您查看this 链接，如何在 HTML 中导入文件。

【讨论】：

感谢您的帮助，我马上试试^^

【解决方案3】：

如果你想使用 ES6 模块，你需要在 <script> 标签上加上 type="module"。

如果您查看浏览器的控制台，它可能会告诉您一些相关信息。

但如果你不使用 ES6 模块，它实际上会更简单；默认情况下，事情将是全局的，您不需要任何导入/导出语句，您只需将实用程序作为 <script> 包含在主 <script> 代码之前。

由你决定使用哪种风格； ES6 模块更简洁，但需要更多管理。

【讨论】：