一般性的,用以下方式引入JS 中定义的函数或对象到 Html 中使用:
function showMessage(){
console.log("hello");
}
function showChineseMessage(){
console.log("你好");
}
<html>
<body>
<h1> hello h1>
<button id="btn">按我有惊喜button>
<script src="./my_methods.js">script>
<script>
document.getElementById("btn").onclick = function () {
showMessage();
}
script>
body>
html>
这样做的缺点在于,无法按照需要导入所需的 JS 函数,只能用标签将相应的 JS 文件中定义的所有内容全部导入,这样做会对 HTML 中的脚本命名空间造成污染。
可以通过 JS 的导入(import)导出(export)功能进行精准导入和导出。
首先,在 JS 文件中需要导出的函数(或对象)前加上 export
关键字:
export function showMessage(){
console.log("hello");
}
export function showChineseMessage(){
console.log("你好");
}
然后,在 HTML 文件中创建一个类型为module
的 标签,并在其中使用
import
关键字导入需要的 JS 函数:
<html>
<body>
<h1> hello h1>
<button id="btn">按我有惊喜button>
<script type="module">
import {showMessage} from "./my_methods.js"
document.getElementById("btn").onclick = function () {
showMessage();
}
script>
body>
html>
import
后用{}
包裹的是要导入的 JS 函数,from
后跟定义函数的目标 JS 文件。
如果通过本地页面方式测试以上代码,可能会报如下错误:
Access to script at 'file:///D:/workspace/learn-page/ch1/import2/my_methods.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.
这是因为浏览器端的跨域安全机制生效的缘故,可以通过将页面通过 Web 服务器运行的方式解决。更简单和推荐的方式是使用 VSCode 的简易 Web 服务器插件
Live Server
运行页面,具体方式可以参考这里。
可以在{}
内一次导入多个函数:
<script type="module">
import {showMessage,showChineseMessage} from "./my_methods.js"
document.getElementById("btn").onclick = function () {
showMessage();
showChineseMessage();
}
script>
如果觉得在每个 JS 函数前加 export
会很麻烦,可以在结尾使用export
一次性批量声明:
function showMessage(){
console.log("hello");
}
function showChineseMessage(){
console.log("你好");
}
export {showMessage,showChineseMessage}
就像常见的编程语言那样,使用import
导入的时候可以为导入的函数(对象)设置别名:
<script type="module">
import {showMessage,showChineseMessage as scm} from "./my_methods.js"
document.getElementById("btn").onclick = function () {
showMessage();
scm();
}
script>
这样可以进一步规避命名空间冲突的问题。
不仅可以在导入时使用别名,也可以在导出时使用别名:
function showMessage(){
console.log("hello");
}
function showChineseMessage(){
console.log("你好");
}
export {showMessage,showChineseMessage as scm}
此时在导入时需要使用导出时定义的别名进行导入:
<script type="module">
import {showMessage, scm} from "./my_methods.js"
document.getElementById("btn").onclick = function () {
showMessage();
scm();
}
script>
如果觉得按照单个函数导入导出比较麻烦,可以将整个 JS 文件作为整体进行导入。
需要先在导出时添加default
关键字:
function showMessage(){
console.log("hello");
}
function showChineseMessage(){
console.log("你好");
}
export default {showMessage,showChineseMessage}
在导入时使用的import
关键字后不需要使用{}
:
<script type="module">
import myMethods from "./my_methods.js"
document.getElementById("btn").onclick = function () {
myMethods.showMessage();
myMethods.showChineseMessage();
}
script>
这样就可以像调用 JS 对象的方法那样使用导入的 JS 文件中的函数。
谢谢阅读,本文的完整示例代码可以参考这里。