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裡，在裡面初始化。
不需要在每個頁面初始化。