HTML模板与iframe框架
HTML模板
----------------------------------------------------------
HTML模板技术用来渲染数据，可以重复使用模板，用来简化前端页面代码。在使用数据时，只需要将数据替换模板中字符即可。
<!--1. html -->
<div 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) {
returnthis.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 iframe">这是A页面的内容</div>
<iframe src="B.html" width="100%" height="100%" B" name="iframeName" frame0">
</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框架的代码结构清晰，组件化可以消除很多重复代码。达到复用的目的