产生背景:
最近,需要新开发一个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(这个大坑,特此标注),这包含标签内容即可。
方法还有很多,有时间会更新补全。在此只是做笔记,补一下一年前的记忆,告辞~