前端学习笔记 1：js 导入导出

2023-12-27 14:54:23

前端学习笔记 1：js 导入导出

1.传统引用

一般性的，用以下方式引入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 中的脚本命名空间造成污染。

2.导入导出

可以通过 JS 的导入（import）导出（export）功能进行精准导入和导出。

2.1.单个函数导入导出

首先，在 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 运行页面，具体方式可以参考这里。

2.2.批量导入导出

可以在{}内一次导入多个函数：

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

2.3.使用别名

就像常见的编程语言那样，使用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>

2.4.整体导入

如果觉得按照单个函数导入导出比较麻烦，可以将整个 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 文件中的函数。

谢谢阅读，本文的完整示例代码可以参考这里。

3.参考资料

文章来源:https://blog.csdn.net/hy6533/article/details/135242092
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。