页面包含
需求
站点的静态页面通常存在大量的重复，如何能够消除这些重复或共享重复？
- 各页面具有相同的站点头、站点底部
设计思路
- 将站点头和站点底独立为两个页面文件,类似于定义一个函数
- 在各静态页面中，将这个文件包含进来，类似于调用一个函数
如何实现包含这个功能，类似服务端脚本语言中的include ?
基于 script 标记的实现方案
- 将被包含的页面文件转换成一个js代码文件
- 将被包含的页面文件的内容转化一个字符串类型的全局变量
- 在目标页面中引入这个js文件，将字符串变量写入相应的位置
基于 script 标记的示例
// tpl/header.tpl.js
var header = '<h1> 我的博客 </h1><nav><a href="/">首页</a> ... </nav>';
<!-- index.html -->
<html><body>
<script src="./js/header.tpl.js"></script>
document.write(header);
....
document.write(footer);
</body></html>
document.write()，直接在当前文档流中插入内容
缺陷
- 共享页面的转换较麻烦，特别是引号的转义
- 使用了全局变量。当包含多个文件时，潜在有变量命名冲突的可能
基于 ajax 的注入实现方案
- 无需将页面文件转换为js代码文件
- 使用ajax技术远程读取该页面文件的内容
- 使用dom技术将获得的内容写入相应的位置
回忆：上一章中我们借助ajax将js代码转换为纯数据的json格式
代码示例
<!-- tpl/header.tpl -->
<h1> 我的博客 </h1> <nav><a href="/">首页</a> ... </nav>
<!-- index.html -->
<html><body>
<div id="header"></div>
<script>
$.get("./tpl/header.tpl", function(result){
$("#header").html(result);
});
</script></body></html>