网页前端中固定不变的header，footer是如何避免冗余代码的？

Question

做的网页基本上分为header,container,footer三层，header和footer是固定不变的，每个页面都一样，那么如果每个页面都写一大堆<div id="footer">footer code here...</div>，后面维护起来特别麻烦。所以，我在网上找到了一个解决办法：
在每个页面上只写<div id="footer"></div>，然后用JavaScript的$("#footer").load("footer.html")。
但我查了下apple的官网，发现其源码还是一大堆东西（如下图），并没有用我用的这种办法。那么它用什么办法了呢？ 还是就是大量的重复代码。

Answer 1

为什么要用ajax处理， 这样会多一次http请求啊。
一般都是后台动态语言直接include的，这样只需要维护一套代码

Answer 2

如果你真的想 Ajax 的话，建议你直接把 header 与 footer 的 html 代码直接存入 localStorage 里面，这样每次 js 只需要从 localStorage 里面取出来即可。

一般情况下，如果是纯 HTML+CSS+JS 的网站，也就是整个都是走接口，不需要程序生成页面的话，直接就一个入口页带 header 与 footer 即可，基本上都是 ajax 请求页面的其它部分，若是由后端生成的页面，那就简单了，直接后端每一次生成的时候加载header 与 footer 模板即可。

Answer 3

現在慣用方法是用模板嵌套，即將網頁切分成很多代碼片段，達到碎片復用，減少冗餘

Answer 4

可以使用模版，在php中可以用include来包含一个头部一个尾部。总之，后端程序能很好的处理这个不是问题的问题。

Answer 5

一般是用模版，是后端程序员的问题。

Answer 6

典型的服务端拼接就可以了，如果你不想搭建php或者jsp这样的环境，可以用一下我的 f2e-server 里面有include 这样的模式用来公用代码片段，并且支持讲拼接结果输出到指定的文件夹里 项目输出， 这个应该是很方便的了。

Answer 7

前端解决的话可以用iframe啊

Answer 8

前端实现性能不好，需要多很多请求，还是用后台拼接比较方便。

Answer 9

看来得学习后端需要了

Answer 10

最近在做一些Node方面的东西，恰巧遇到了模板引擎的这个东西。

在比较复杂的网页或者比较要求性能的网页中（比如国内的淘宝，天猫），都是在前端这一方面做了一个中间层，利用一些前端渲染模板来生成html。这样的好处有：
1.更好的进行前后端分离，并且可以在前端进行相关的逻辑控制
2. 能比较好的利用模板本省自带的缓存功能。

关于模板引擎可以参见我昨天的回答.

关于Ajax的利用，我所知道的一般是footer和header的变化不是很大，在点开网页之后再次点击里面的链接的时候就是footer和header不变，直接重修加载content中的东西，并改变相关的url，达到减小下载多余内容的目的。

另外，审查元素的话你提到的这种的确能看到效果，但是想Apple官网这样的东西是比较难以察觉的，我用WordPress搭建着自己的博客，在里面可以建立header.php和footer.php等，然后在相关的地方用<? php get_header()?>与<?php get_footer?>等。

如果你熟悉一些框架的话就会发现他们大多是这样做的，是前端中是一种比较成熟的手法。

前面的回答中有提到这是后端程序员的东西，在今天看来可能不是这样的，前端正在走向工程化，慢慢的这些东西都会交给前端，而不仅仅是后端

Answer 11

你可以使用前端模板引擎，例如ejs或者handlebars这些。
可以用grunt-include将header、footer都插入页面，编译出来。
这样维护就方便啦。不过不知道你的项目是多大，要维护方便主要还是取决于架构。