前端知识：js文件的导入导出

最新推荐文章于 2024-08-19 11:16:23 发布

唱片650

最新推荐文章于 2024-08-19 11:16:23 发布

阅读量358

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_65268642/article/details/140175665

版权

一、html文件简单调用js文件

1、用vs code写一个example.js文件，并写入2个方法:

function sum(a,b){
    // console.log(a+b);
    return a+b;
}
function sum1(a,b){
    return a*b;
}

2、写一个showExample.html文件调用这个js文件:直接script src资源中加载js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
</head>
<body>
    <div id="app">
        <button id="but">获取结果</button>
    </div>
    <script src="./example.js"></script>
    <script type="module">
        document.getElementById("but").onclick=function(){
            alert(sum(2,3));
        }
    </script>
</body>
</html>

二、js文件导出方法，html导入

1、js文件导出方法：在方法前用关键字export

export function sum(a,b){
    // console.log(a+b);
    return a+b;
}
export function sum1(a,b){
    return a*b;
}

2、html文件导入js方法:用关键字import导入方法名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
</head>
<body>
    <div id="app">
        <button id="but">获取结果</button>
    </div>
    <script type="module">
        import {sum} from './example.js';
        document.getElementById("but").onclick=function(){
            alert(sum(2,3));
        }
    </script>
</body>
</html>

三、批量导出

1、js文件批量导出

function sum(a,b){
    // console.log(a+b);
    return a+b;
}
function sum1(a,b){
    return a*b;
}
export {sum,sum1}

2、html按需导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
</head>
<body>
    <div id="app">
        <button id="but">获取结果</button>
    </div>
    <script type="module">
        import {sum} from './example.js';
        document.getElementById("but").onclick=function(){
            alert(sum(2,3));
        }
    </script>
</body>
</html>

四、默认批量导出

1、js文件在批量导出时加关键字default

function sum(a,b){
    // console.log(a+b);
    return a+b;
}
function sum1(a,b){
    return a*b;
}
export default {sum,sum1}

2、在html文件导入时在关键字 import后可以任意给对象命名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
</head>
<body>
    <div id="app">
        <button id="but">获取结果</button>
    </div>
    <script type="module">
        import result from './example.js';
        document.getElementById("but").onclick=function(){
            alert(result.sum(2,3));
        }
    </script>
</body>
</html>