在我們寫項目的時候，會遇到一個模塊在多個頁面使用，如果沒有頁面都寫一次，那就太費勁了。
如果你使用了框架（vue，react，Angular）的話，那框架都有模塊化，可以輕松解決。
如果你使用原生開發的話，怎么辦呢？
傳統的純 js 做法可以使用
var content = document.getElementById("content");
content.innerHTML("一大坨HTML代碼")
就是重新繪制那部分DIV，當然往往我們的需要寫很多標簽，很不爽。
服務端渲染
在做Java項目時，我們可以采用多種方法對頁面進行模塊化。
例如，使用JSP時，我們可以這樣引入一個片段：
<%@ include file="page.jsp" %>
但是需要后台支持。
jQuery的load()方法
load方法使用很簡單
$("#id").load("param") 這個 param 可以直接指定某個 url ，必須在是本服務器可以請求的頁面哦
注意：load方法不能在本地去加載一個頁面，必須在是同一個服務器上。
文件目錄（本地起了一個node服務測試的）
footer頁面
比如：現在我們有個footer，需要在多個頁面使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <h1>測試</h1> <!-- 公共尾部 --> <footer id="footer"></footer> </body> <script> $(function(){ $('#footer').load('footer.html'); }) </script> </html>
效果圖：這時我們已經吧footer插入到 test.html了
