一般性的，用以下方式引入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 函数，只能用<script>标签将相应的 JS 文件中定义的所有内容全部导入，这样做会对 HTML 中的脚本命名空间造成污染。
可以通过 JS 的导入（import）导出（export）功能进行精准导入和导出。
首先，在 JS 文件中需要导出的函数（或对象）前加上 export 关键字：
export function showMessage(){
console.log("hello");
}
export function showChineseMessage(){
console.log("你好");
}
然后，在 HTML 文件中创建一个类型为module 的<script> 标签，并在其中使用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 文件中的函数。
谢谢阅读，本文的完整示例代码可以参考这里。