html 中使用 ES6 模块化，拆分多个 JS 文件
徐瑞
html 中使用 ES6 模块化，拆分多个 JS 文件
ES6 中可以使用 export default import 来实现 JS 模块化，这个不单单是可以用在 Vue Node.js 环境中，普通网页上也是可以的。
如：
定义一个 utility.js
/**
* 格式化时间，输出字符串
*
* @param date 要格式化的时间
* @param formatString 返回时间的格式：
* @return 格式化后的时间字符串
* */
function dateFormatter (date, formatString) {
formatString = formatString? formatString : 'yyyy-MM-dd hh:mm:ss';
let dateRegArray = {
"M+": date.getMonth() + 1, // 月份
"d+": date.getDate(), // 日
"h+": date.getHours(), // 小时
"m+": date.getMinutes(), // 分
"s+": date.getSeconds(), // 秒
"q+": Math.floor((date.getMonth() + 3) / 3), // 季度
"S": date.getMilliseconds() // 毫秒
};
if (/(y+)/.test(formatString)) {
formatString = formatString.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (let section in dateRegArray) {
if (new RegExp("(" + section + ")").test(formatString)) {
formatString = formatString.replace(RegExp.$1, (RegExp.$1.length === 1) ? (dateRegArray[section]) : (("00" + dateRegArray[section]).substr(("" + dateRegArray[section]).length)));
}
}
return formatString;
}
export default {
dateFormatter
}
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ES6 Module JS 测试</title>
<link rel="stylesheet" href="../../lib/bootstrap-4.3.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1></h1>
</div>
</div>
<script src="utility.js" type="module"></script>
<script type="module">
import utility from './utility.js'
let outputStr = utility.dateFormatter(new Date());
document.querySelector('h1').innerText = outputStr;
</script>
</body>
</html>
类似资料：