前端开发-前置知识

最新推荐文章于 2025-12-22 19:02:04 发布

原创最新推荐文章于 2025-12-22 19:02:04 发布 · 198 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

Spring Boot学习记录专栏收录该内容

28 篇文章

订阅专栏

1.JavaScript-导入导出。

JS提供的导入导出机制，可以实现按需导入。

（1）按需导入

showMessage.js：

//简单的展示信息
export function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
export function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

message.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入导出</title>
</head>



<body>
    <div id="app">
        <button id="btn">点我展示信息</button>
    </div>
	
    <script type="module">
        import {complexMessage} from  './showMessage.js';
        document.getElementById("btn").onclick=function(){
            complexMessage('我被点击了...');
        }
    </script>
    z
    
</body>

</html>

运行结果：

（2）批量导出

showMessage.js：

//简单的展示信息
/* export */ function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
/* export */ function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

export {complexMessage,simpleMessage}

导入和导出的时候,可以使用 as 重命名：

import {complexMessage as cm} from  './showMessage.js';

（3）默认的导出方式

//默认导出
export default{complexMessage,simpleMessage}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入导出</title>
</head>



<body>
    <div id="app">
        <button id="btn">点我展示信息</button>
    </div>
	
    <script type="module">
        // import {complexMessage as cm} from  './showMessage.js';
        import messageMethods from  './showMessage.js';
        document.getElementById("btn").onclick=function(){
            messageMethods.complexMessage('我被点击了...');
        }
    </script>
    z
    
</body>

</html>