HTML模板
----------------------------------------------------------
HTML模板技術用來渲染數據，可以重復使用模板，用來簡化前端頁面代碼。在使用數據時，只需要將數據替換模板中字符即可。
<!--1. html -->
<div id="temp"></div>
<!--2. html模板 -->
<script type="text/template" id ="template">
<div>
<table>
<tr><th>val_1</th></tr>
<tr><td>val_2</td></tr>
<tr><td>val_3</td></tr>
</table>
</div>
</script>
<!-- js方法 -->
<script>
//替換方法
String.prototype.replaceAll= function(s1,s2) {
return this.replace(new RegExp(s1,"gm"),s2);
};
$(document).ready(function(){
var html=$("#template").html(); //獲取模板內容
html=html.replaceAll("val_1","替換_1"); //替代模板內容
html=html.replaceAll("val_2","替換_2");
html=html.replaceAll("val_3","替換_3");
$("#temp").append(html); //組裝模板到html中
});
</script>
iframe框架
----------------------------------------------------------
iframe嵌套框架，將其他頁面嵌套在主頁面中，也可以達到將其他功能模塊復用的目的。
A.html頁面（父頁面）
<!--1. html -->
<div id="iframe">這是A頁面的內容</div>
<iframe src="B.html" width="100%" height="100%" id="B" name="iframeName" frameborder="0">
</iframe>
<!--2. js -->
iframeName.window.yyy(); //iframeName為html中<iframe>標簽中name屬性的屬性值,yyy為子頁面中js方法
B.html頁面（子頁面）
<!--1. html -->
<div>
<table>
<tr><th>這是B頁面內容</th></tr>
<tr><td>模板二</td></tr>
<tr><td>模板三</td></tr>
</table>
</div>
<!--2. js -->
parent.xxx(); //xxx為父頁面的js方法
目前前端的框架很多，最火的莫過於Vue.js框架了。Vue框架的代碼結構清晰，組件化可以消除很多重復代碼。達到復用的目的