使用js让在html中引入公共的html页面（通过模块化实现头尾共用的效果）

在写项目的过程中常常会遇见多个页面会使用相同的头部、尾部，要是每个页面代码都复制一遍的话，工作量会增，而且不便于后期修改。这时候就要将公共部分的代码提取出来，放入单独的HTML等需要的时候再调用。

首先需要下载个requirejs
下载
requirejs非常简单，我们只需要定义在页面加载的时候，引入requirejs并且，把要引入的js路径指定在data-main中，在要引入的js路径中引入我们的requirejs.config和我们需要用到的页面js，requirejs会根据我们的模块去加载相应的依赖，然后执行代码。

<!-- 在页面中引入引入 -->
<!-- 在引入require.js的这个script标签身上写一个自定义属性data-main,属性值就是要引入的js路径 -->
<!-- require.js会帮助我们去找到index.js并引入 -->
<script src="require.min.js" data-main="index"></script>

新建一个config.js文件

//建一个config.js文件
require.config({
  baseUrl: '/',
  paths: {
  //这里面引入header.js和其他需要使用的js文件(这里的引入可以不需要js后缀)
    'header': 'modules/header',
    'jquery': 'jquery/jquery-3.4.1.min'
  }
})

再新建一个header.js文件

// 定义AMD规范的模块
define(['jquery'], () => {
// 第一个参数数组是可选的，如果header模块也要依赖其他模块，那就在数组里写上
// 如果不需要依赖其他模块，那就不写这个数组
  // 面向对象
  class Header {
      constructor () {
          this.headerLoad()
      }
      headerLoad () {
          // 把header.html里的DOM结构加载到页面的<header>标签里
          //注意：hede.html里面不要把页面写完整，只需要包括我们所需的代码片段就可以。
          $('header').load('head.html')
      }
  }
  return new Header()
});

然后在原来的index.js里面编入

require(['./config'], () => {
  require(['header'], () => {
    // 这里是当所有要require的模块全部执行结束以后执行的代码
    console.log()
  }) 
})

这样就可以通过requirejs在不同页面使用公共的模块