项目中每个页面的公共头部和公共尾部要不要把代码都复制一遍?

原创 阿波罗D波 随笔 学习收获 630阅读 2017-05-12 14:28:10 举报

做项目的时候,每个页面都有公共的头部和公共的尾部,如果每个页面都把头部和尾部代码写一遍(复制一遍),那就太麻烦了,在网上查到一种办法是把头部和尾部作为公共部分,写个header.html和footer.html,然后利用jquery的load()方法加载到每个页面。

注意:这种方法只是站在初级前端的角度思考,如果你是大神可以用用angular和vue的组件化模块化,后端语言的话也有自己的页面模板。

写个简单的demo:
header.html文件
html 代码

footer.html文件

html 代码

#####注意:header.html文件和footer.html文件里面不需要写html、head、title、body等这些标签,只写属于body里面的内容,当然加了这些标签也不影响。

页面index.html

html 代码

这样以后做项目的时候,公共头部和公共尾部只需要写一遍,然后每个页面只需要利用jquery的load()方法加载进来。多个同事合作开发时,每个人只需要写除了公共头部和公共尾部之外中间内容的部分。

#####遗留问题:写好的html文件如果是通过sublime text编辑器右击浏览器打开,那么公共头部和公共尾部没有加载进来

项目中每个页面的公共头部和公共尾部要不要把代码都复制一遍?

#####但是如果是通过HBuilder编辑器的浏览器打开,那么公共头部和公共尾部是可以加载进来的。

项目中每个页面的公共头部和公共尾部要不要把代码都复制一遍?

#####两个编辑器生成的网址有差别,为什么会这样我也没有弄清楚,还请看到的小伙伴有理解的可以评论里写一下,不胜感谢!另外,写好的html文件如果用firefox、safari浏览器直接打开也是可以加载进来的,而用ie、edge、chrome、opera浏览器打开是没有加载进来的,有理解的朋友帮忙评论下,谢谢!

评论 ( 7 )
最新评论
chen17237 6F 2017-05-15 18:37:10 7F

额,可能是我的IE浏览器文档模式选的问题,原来选的是IE8的文档模式,修改了就跟你说的一样了

阿波罗D波 5F 2017-05-15 18:22:44 6F

我用我的两台电脑测了下ie7、8可以,你的ie版本是多少。现在win7系统自带ie浏览器都ie9了。

chen17237 2017-05-15 16:22:48 5F

闲着没事去测试了一下兼容性问题,在服务端打开,IE9以上可以正常载入,IE8及以下就加载不出来了,这是 load() 的兼容性问题还是什么?求解答

阿波罗D波 3F 2017-05-12 15:29:27 4F

恩好的,谢谢

天凉好个秋 2F 2017-05-12 15:26:05 3F

你想模块化 可以试试那些构建工具啊

阿波罗D波 1F 2017-05-12 15:19:12 2F

应该是这个道理,谢谢!

天凉好个秋 2017-05-12 15:12:28 1F

应该是ajax请求的问题吧,load()是jQuery中ajax的一个方法,需要服务器环境,需要请求吧....个人见解,我也不是很懂.。