一个项目写很多的纯静态页面，有公共的部分（例如头和尾）你是怎么提取公用的？

在前端开发中，处理大量包含公共部分（例如页眉和页脚）的静态 HTML 页面，有很多方法可以提取和复用这些公共部分，避免重复代码和提高维护效率。以下是一些常用的方法：

1. 使用 Includes (服务器端包含):

• 原理: 如果你的静态页面是通过服务器（例如 Apache, Nginx 等）提供的，可以使用服务器端包含机制。 服务器会在发送页面给浏览器之前，将公共部分的文件内容插入到主页面中。
• 方法: 不同的服务器有不同的语法，例如：
  • Apache (SSI): <!--#include virtual="/path/to/header.html" -->
  • Nginx (SSI): <!--#include file="/path/to/header.html" --> (需要配置 nginx 支持 ssi)
  • PHP: <?php include 'header.php'; ?> (虽然是 PHP 代码，但可以用在 HTML 中)
• 优点: 简单易用，服务器端处理，对客户端透明。
• 缺点: 需要服务器支持，如果只是纯静态 HTML 页面托管在例如 GitHub Pages 等静态托管服务上，则无法使用。

2. 使用 JavaScript:

• 原理: 使用 JavaScript 动态加载公共部分的 HTML 文件并插入到页面中。
• 方法:

  function includeHTML() {
    const elements = document.querySelectorAll('[w3-include-html]');
    for (let element of elements) {
      const file = element.getAttribute('w3-include-html');
      fetch(file)
        .then(response => response.text())
        .then(html => element.innerHTML = html);
    }
  }
  includeHTML(); // 在页面加载完成后调用
  
  // 在 HTML 中使用：
  <div w3-include-html="header.html"></div>
  <div w3-include-html="footer.html"></div>
  

• 优点: 纯前端解决方案，不依赖服务器，适用于各种静态托管服务。
• 缺点: 需要 JavaScript 执行，可能会略微影响页面加载速度。

3. 使用构建工具 (例如 Gulp, Webpack, Parcel):

• 原理: 使用构建工具在构建过程中自动将公共部分插入到每个页面中。
• 方法: 不同的构建工具有不同的插件和配置方式，例如可以使用 html-include-webpack-plugin (Webpack), gulp-include (Gulp) 等插件。
• 优点: 自动化处理，方便管理，可以进行代码压缩、优化等操作。
• 缺点: 需要一定的学习成本，需要配置构建流程。

4. 使用模板引擎 (例如 Handlebars, Nunjucks, Pug):

• 原理: 使用模板引擎定义页面模板，然后在构建过程中根据模板生成最终的 HTML 页面。
• 方法: 不同的模板引擎有不同的语法和使用方法。
• 优点: 功能强大，可以实现更复杂的逻辑和动态内容生成。
• 缺点: 需要学习模板引擎的语法，需要配置构建流程。

选择哪种方法取决于你的项目需求和技术栈:

• 对于简单的静态页面，服务器端包含或 JavaScript 方法就足够了。
• 对于复杂的项目，构建工具和模板引擎是更好的选择。

希望以上信息能帮到你!