【Javascript】【模块化】通过ES6新特性实现模块化

最新推荐文章于 2023-03-29 11:30:58 发布

ByteFlys

最新推荐文章于 2023-03-29 11:30:58 发布

阅读量315

点赞数 1

分类专栏： javascript 文章标签： ES6 模块化 export import

本文链接：https://blog.csdn.net/u013718730/article/details/90675839

版权

javascript 专栏收录该内容

107 篇文章 6 订阅

订阅专栏

?ES6新规范使用export和import关键字来实现模块化，基本用法如下

module.js代码


export let message = "hello";

export function showMessage() {
    alert(message);
}

main.js代码


//路径必须以./或../等开头，不能省略
import * as Module from "./module.js";

console.log(Module.message);
Module.showMessage();

html代码


<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    </head>

    <!-- 注意：必须通过type=module来声明使用了模块特性，否则浏览器无法识别 -->
    <script type="module" type="text/javascript" src="main.js"></script>
</html>

?以上代码是将整个文件作为js模块导入，下面再介绍其它用法

?导入单个变量或方法


import showMessage from "./module.js";

showMessage();

?导入后起别名


import {showMessage as Module_showMessage} from "./module.js";

Module_showMessage();

?导入多个变量或方法


import {message as Module_message, showMessage as Module_showMessage} from "./module.js";

console.log(Module_message);
Module_showMessage();

?导出默认常量


export default "hello";

export function showMessage() {
    alert(message);
}


import Module_Message from "./module.js";

alert(Module_Message)

?导出默认方法


let message = "hello";

export default function showMessage() {
    alert(message);
}


import Module_showMessage from "./module.js";

Module_showMessage();

?统一导出


let message = "hello";

function showMessage() {
    alert(message);
}

export {
    message as default,
    message as Module_message,
    showMessage as Module_showMessage
};


import defaultString from "./module.js";

alert(defaultString);


//Module_showMessage要使用别名，不能使用原名showMessage
//Module_showMessage要加上大括号，否则会被视为default变量
import {Module_showMessage} from "./module.js";

Module_showMessage();