如何在另一个公共 js 文件中使用函数
Posted
技术标签:
【中文标题】如何在另一个公共 js 文件中使用函数【英文标题】:How to use function in another public js file 【发布时间】: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 文件之间的工作?
【问题讨论】:
【参考方案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 模块更简洁,但需要更多管理。
【讨论】:
以上是关于如何在另一个公共 js 文件中使用函数的主要内容,如果未能解决你的问题,请参考以下文章
我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗?
Delphi:如何在公共函数中使用 ComponentCount?
使用 QML 和 QtQuick2 时如何在另一个 .js 文件中包含 .js 文件?不涉及浏览器
如何在dojo工具包的Current JS文件中使用在另一个JS文件中创建的Dialog变量