ES6 语法实现入门级公共部分加载
意图
通过使用原生 JS 实现公共部分的加载，类似于 JQuery 的 selector.load() 的实现。
实现
assets/js/common/utils.js:
/**
* 通过异步加载 html 块
*
* @param {string} htmlPath 所加载的 html 文件路径
* @param {string} selector 目标选择器
*/
export function loadHtml(htmlPath, selector) {
// 使用 Fetch API 异步获取 html 文件资源
return fetch(htmlPath)
.then((res) => {
// 将响应结果以文本的形式返回，返回结果作为参数传递给下一个 then 块
return res.text()
})
.then((html) => {
// 创建 DOM 解析器
const parser = new DOMParser()
// 将文本解析为 html 格式
const doc = parser.parseForomString(html, 'text/html')
// 通过 querySelector 获取介些后的 html 中的第一个 div
const el = doc.querySelector('div')
// 将 div 块追加到目标块中
document.queryselector(selector).appendChild(el)
})
}
注: 因代码中使用
querySelector搜寻目标文件中的第一个div标签，所以公共部分的 html 文件中必须以 div 标签包含内容。
用例
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script type="module" src="assets/js/common/common.js"></script>
</head>
<body>
<header></header>
<div id="content">
Demo
</div>
<footer></footer>
</body>
</html>
layouts/header.html:
<div>
Header
<div class="header-content">
header content
</div>
</div>
layouts/footer.html:
<div>
Footer
<div class="footer-content">
footer content
</div>
</div>
assets/js/common/common.js:
import { loadHtml } from './utils.js'
/**
* 公共部分事件添加
*/
function eventsAdd() { //... }
/**
* 渲染公共部分
*/
async function render() {
await loadHtml('layouts/header.html', 'header')
await loadHtml('layouts/footer.html', 'footer')
// 待html渲染结束后，添加事件
eventsAdd()
}
// 执行 render
render()
注: 因实现的
loadHtml返回的是Promise，渲染 html 是异步执行的，所以向引入的公共部分添加事件需等待公共部分渲染到页面完毕，即异步执行。
