45、web实验-抽取公共页面
45、web实验-抽取公共页面
在Web开发中，为了提高代码复用性和维护效率，通常会将页面中重复的部分抽取出来，形成公共页面或组件。以下是关于“抽取公共页面”的讲解：
#### 抽取公共页面的原因
- **减少代码重复**：避免在不同页面中重复编写相同的代码。
- **提高维护效率**：修改公共部分后，所有引用该部分的页面都会自动更新。
- **增强代码可读性**：使页面结构更加清晰，便于开发和维护。
#### 抽取公共页面的步骤（以Thymeleaf模板引擎为例）
1. **创建公共页面**
- 将重复的代码片段（如头部导航、侧边栏、底部等）提取出来，存放在一个独立的HTML文件中，例如`common.html`。
- 使用`th:fragment`属性为每个公共片段命名，方便后续引用。
```html
<!-- common.html -->
<div th:fragment="header">
<!-- 头部导航代码 -->
</div>
<div th:fragment="sidebar">
<!-- 侧边栏代码 -->
</div>
<div th:fragment="footer">
<!-- 底部代码 -->
</div>
```
2. **引用公共页面**
- 在其他需要使用公共片段的页面中，通过`th:insert`、`th:replace`或`th:include`属性引入公共片段。
```html
<!-- index.html -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 引入公共的头部代码 -->
<div th:replace="common :: header"></div>
</head>
<body>
<!-- 引入公共的侧边栏代码 -->
<div th:replace="common :: sidebar"></div>
<!-- 页面主要内容 -->
<!-- 引入公共的底部代码 -->
<div th:replace="common :: footer"></div>
</body>
</html>
```
#### 不同引入方式的区别
- **`th:insert`**：将公共片段的内容插入到指定标签内部，保留原标签。
- **`th:replace`**：用公共片段的内容替换指定标签及其内容。
- **`th:include`**：将公共片段的内容插入到指定标签内部，但不保留公共片段的根标签。
#### 示例说明
假设有一个网站，所有页面都有相同的头部导航和底部版权信息。可以将这些公共部分抽取到`common.html`中，然后在每个页面中引用。
- **`common.html`**
```html
<div th:fragment="header">
<!-- 头部导航代码 -->
</div>
<div th:fragment="footer">
<!-- 底部版权信息 -->
</div>
```
- **`index.html`**
```html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>首页</title>
<div th:replace="common :: header"></div>
</head>
<body>
<!-- 页面主要内容 -->
<h1>欢迎访问首页</h1>
<div th:replace="common :: footer"></div>
</body>
</html>
```
通过抽取公共页面，可以简化代码，提高开发效率，并确保网站风格的一致性。