如何抽離、引用公共部分頁面

產生背景：

最近，需要新開發一個bootstrap+ace 自適應后台項目，用ace做一個初構。在做項目的時候經常會遇到一樣的頭部和底部，如果每個頁面都復制一遍，不僅工作量大而且萬一需要修改一下文章就更麻煩了，這時候就需要我們把公共部分提取出來，等需要的時候再引入頁面。所以先考慮做的抽離頁面，然后引用，這樣可以自由拼湊，方便復用。

頁面抽離及引入：

使用jQ的load函數（公司項目一直用的JQ，出於兼容性原因）

<!--在引入頁面-->
<div class="footer"></div>

/*導入腳部頁面*/
$(document).ready(function(){
   $(".footer").load("page/footer.html");
});

<!--抽離footer.html頁面，做被引入頁面-->
<footer>
   <ul class="g-flex">
      <li><a href="#">活動XXX</a></li>
      <li><a href="#">列表XXX</a></li>
      <li><a href="#">產權XXX</a></li>
      <li><a href="#">我們XXX</a></li>
   </ul>
</footer>

• 注意，此時的footer.html不需要是完整的HTML（這個大坑，特此標注），這包含標簽內容即可。

方法還有很多，有時間會更新補全。在此只是做筆記，補一下一年前的記憶，告辭~