前端学习笔记 1：js 导入导出-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端学习笔记 1：js 导入导出。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端学习笔记 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>