原生HTML通过JS（ESJQuery）引入公共模块(header,footer,menu等)实现模块化以及组件化，实现父子组件传值以及数据监听（基于Object.defineProperty）
在原生HTML中使用JavaScript (ES6或JQuery) 引入公共模块（header, footer, menu等）实现模块化，可以通过以下方式实现：
- 使用ES6的
import和export语法创建模块。 - 使用JQuery动态加载HTML片段。
使用ES6模块
创建一个header.js模块：
// header.js
export function loadHeader() {
const headerHtml = `
<header>
<!-- header content here -->
</header>
`;
document.body.insertAdjacentHTML('afterbegin', headerHtml);
}在主HTML文件中引入并使用：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Module Example</title>
<script type="module">
import { loadHeader } from './header.js';
loadHeader();
</script>
</head>
<body>
<!-- body content here -->
</body>
</html>使用JQuery
使用JQuery的load()方法可以加载外部HTML文件作为模块：
<!-- header.html -->
<header>
<!-- header content here -->
</header>
// main.js
$(document).ready(function() {
$('#header').load('header.html');
$('#footer').load('footer.html');
// ... load other modules
});
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Module Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('#header').load('header.html');
$('#footer').load('footer.html');
// ... load other modules
});
</script>
</head>
<body>
<div id="header"></div>
<!-- body content here -->
<div id="footer"></div>
</body>
</html>以上两种方式均可以实现HTML模块化，使用哪种取决于你的项目需求和个人喜好。
评论已关闭