最近在做一个项目,取名为Music-J,哈哈,够霸气吧!不错,Music大家都懂,我爱音乐。J就是我名字的简称啦!
在完成项目的过程中,我也遇到了之前一直有的问题,就是很多页面中都会有一部分的样式内容一模一样,最初的做法就是直接将相同的代码在每个页面复制粘贴,但后来的话就是把多个页面中完全一样的内容,单独提取出来作为一个独立的文件(如header.html、footer.html),凡是需要此文件的页面,引入该页面即可。在网上搜了几种方法,供大家参考:
方法1:
利用Web服务器的SSI命令:客户端请求一个页面,服务器一次返回多个页面——需要修改Web服务器配置文件。
方法2:
使用服务器端动态语言提供的页面包含函数:如PHP
include('header.php');
....echo '主体';
include('footer.php');
客户端请求一个页面,服务器返回多个PHP页面组合后的一个页面。
方法3:
在客户端使用AJAX技术:先加载一个页面的主体内容,加载完成后,再去请求header.html、footer.html放到空容器中
<div id="header"></div>
<main>XXXXXXXX</main>
<div id="footer"></div>
-----------------------------------------
$.ready(function(){
$('#header').load('header.html');
$('#footer').load('footer.html');
})
但这些都不是重点!!!
前端时间自学了AngularJS后,发现它的指令库特别强大!!!于是查了一下AngularJS的操作文档,果然发现了一个指令ngInclude:
<div ng-include=" 'tpl/header.html'"></div>
非常好用,大家也可以试试,可以完全代替方法3!