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

?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代码

?以上代码是将整个文件作为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();