前端插入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>&copy; 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

转载于:https://www.cnblogs.com/LevinJ/archive/2012/09/17/2688693.html