前端插入Header与Footer的实现
1 前言
对于一般的Web应用，前端发送html页面请求，后端会动态在各个页面插入Header与Footer，然后传给前端。但对于phonegap 应用，所有的html页面都是在本地的，这就意味着，如果不做特殊处理，所有的页面都会有重复的Header与Footer代码，不利于代码的维护。
本文介绍了我自己摸索出来的几个解决方案，比较了它们的优缺点。希望对大家有个参考作用。
2 可能的解决方案
2.1 Include javascript 文件
这是我目前找到的自认为最好的方案。它的思路很简单，在每个html页面里，include一个javascript 文件，在这个javascript文件里，会注册dom ready 事件，并在事件的handler里插入header与footer。 代码sample如下所示：
<script type="text/javascript" src="http://www.cnblogs.com/libs/headerfooter.js"></script>
Headerfooter.js的内容如下所示：
$( document ).bind("pagebeforecreate", function() {
prependHeaderSection();
appendFooterSection();
});
function prependHeaderSection()
{
var header= '<div data-role="header" data-theme="f">'+
'<h1>标题</h1>' +
'<a href="../Singup/Login.html" data-ajax="false" data-icon="gear" class="ui-btn-right">登录</a>' +
'</div>‘;
$('div:jqmData(role="page")').prepend(header);
}
function appendFooterSection()
{
var footer= '<div data-role="footer" data-theme="c">'+
'<p>© June~September 2012 footer</p>'+
'</div>';
$('div:jqmData(role="page")').append(footer);
}
2.2 Ajax Load
与2.1类似，不过header，footer html没有放在javascript文件里，而是写在一个html文件里，再用Ajax load出来。
这种方法的好处是把所有的html内容都放在了html文件里，与人们的编程习惯比较一致。缺点是有些Browser是不允许本地访问文件的，比如Chrome, 那这样这种方法不能work.
2.3 Build脚本自动插入
这是与2.1,2.2完全不同的思路，想法是编写一个脚本，自动把header与footer插入到各个html中。
个人觉得这种方案虽可以解决问题，但稍微有点复杂。
3 总结
本文介绍了几种如何在前端插入header与footer的方法，如果你有更好的方法，不防一块分享。
4 参考
http://stackoverflow.com/questions/9152446/creating-templated-persistant-header-footer-template-in-jquery-mobile-and-phoneg
