javascript - 多个页面共用同一个导航，这个被共用的导航怎么引入可以避免重复

Question

很常见的一个场景，以前都是用php的include引入，前台有哪些方法可以做到？
现在引入的库有jQuery、Webpack

想到的有：

1. 发Ajax请求，把请求来的页面放到容器中：

   $.get("header.html",function(data){
      $("#header").html(data);
   });

2. 把导航做成一个jQuery组件，每个用到的页面初始化一下

   `$("#header").initHeader()`
   

我的两个思路是否都正确？
别的还有什么方法？
以及常用的方法是什么？

Answer 1

还是应该有一个模板文件, 用jq组件的方式来实现感觉好怪...

Answer 2

把nav写到公用的js里，并在里面初始化。
不需要在每个页面里初始化。