如何在另一个 public js 文件中使用函数
How to use function in another public js file
为了简单起见,我最初有以下代码命令,我将其放在 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>
有没有办法重做 public 个 JS 文件之间的工作?
看来你做的是对的,只要在脚本标签中提到类型,确保你的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>
我建议您查看 link,如何在 HTML.
中导入文件
如果您想使用 ES6 模块,您需要在 <script>
标签上添加 type="module"
。
如果您查看浏览器的控制台,它可能会告诉您一些类似的信息。
但是如果不使用ES6模块,其实会更简单;默认情况下,事情将是全局的,您不需要任何 import/export 语句,您只需将实用程序作为 <script>
包含在主要 <script>
代码之前。
使用哪种样式由您决定; ES6 模块更干净,但需要更多管理。
你有两个选择,
- 您可以使用脚本的 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
为了简单起见,我最初有以下代码命令,我将其放在 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>
有没有办法重做 public 个 JS 文件之间的工作?
看来你做的是对的,只要在脚本标签中提到类型,确保你的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>
我建议您查看
如果您想使用 ES6 模块,您需要在 <script>
标签上添加 type="module"
。
如果您查看浏览器的控制台,它可能会告诉您一些类似的信息。
但是如果不使用ES6模块,其实会更简单;默认情况下,事情将是全局的,您不需要任何 import/export 语句,您只需将实用程序作为 <script>
包含在主要 <script>
代码之前。
使用哪种样式由您决定; ES6 模块更干净,但需要更多管理。
你有两个选择,
- 您可以使用脚本的 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