這個問題其實應該算是一個一直困擾我等前端開發(fā)者的心魔了，當然說得夸張些了痪宰。今天很冷得嘛叼架，上午去了一趟省圖書館，把幾本書還了衣撬，準備不借書了乖订，但又沒忍住，有借了兩本回來具练。主要是有這個條件乍构，為嘛不多看點書呢？
主要想吐槽一下扛点，有點冷哥遮。
下面進入今天得主題：
方案由于今天已經(jīng)是2018年了，可選方案實在有些多陵究，外加上有組件的理論存在眠饮，這里單純說一些網(wǎng)站需要用到的，
主要是一些jqure或者js來做的官網(wǎng)之類的铜邮，當然網(wǎng)上有很多都總結的很好仪召，也對我有很大的啟發(fā)，于是抱著綜合百家之言的設想松蒜，于是就來說到一二：我側重說一下引入公共底部的問題扔茅，至于頂部可以參考一篇文章：
連接放到最后面吧！
方案一（只需要兩步）
set1：準備一個footer.js如下：這里使用了模板字符串語法秸苗，這個好用
document.writeln(`<ul class="g-flex">
<li class="g-flex-auto"><a href="#" class="i-b">首頁</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">分類</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">訂單</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
</ul>
`)
set2：在需要的界面引入就可以了：
<!--尾部-->
<script type="text/javascript" src="../../res/js/footer.js"></script>
<!--尾部 end-->
s11.png
方案二：并沒有試過召娜，不過原理應該一樣
參考地址：http://www.reibang.com/p/d4425824bd55
順道把代碼搬運過來：
1.先寫好公共部分的文件，文件內不要有任何頁面聲明的標簽惊楼，只需要內容的html部分
<ul class="g-flex">
<li class="g-flex-auto"><a href="#" class="i-b">首頁</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">分類</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">訂單</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
</ul>
作者：cooqi
鏈接：http://www.reibang.com/p/d4425824bd55
來源：簡書
簡書著作權歸作者所有萤晴，任何形式的轉載都請聯(lián)系作者獲得授權并注明出處吐句。
2.在需要引入的主頁面寫入jq胁后，引入公共部分的文件
$(document).ready(function(){
$(".head").load("head.html");
});
關于引入公共頭部：
參考文章：https://blog.csdn.net/qq_38860424/article/details/80269421
寫在最后：手有點凍僵了店读，里面有個唯一的不足之處，雖然功能可以滿足攀芯，但是當界面初始加載的時候有DOM結構的會先展示覆蓋屯断，底部不是馬上就呈現(xiàn)，算是美中不足侣诺。
