页面包含

元信息

• 目标：解决页面间大量重复（站点头尾/侧边栏）的共享问题——像定义并调用函数一样"包含"公共区块；对比 script 注入与 ajax 注入两代方案的思路与缺陷
• 关键概念：页面包含、公共区块、script 注入、document.write、ajax 注入、DOM 写入、全局变量污染
• 关联阶段：cp3
• 常见误区：以为包含是浏览器/HTML 的原生能力（要靠 script 或 ajax 手工模拟）；把页面内容塞进 js 字符串还忘了转义引号；多个被包含文件用同名全局变量相互覆盖；没意识到这正是后来组件化要解决的历史问题

需求

各大Web站点的各个页面之间通常存在大量的重复，手工编写页面工作量巨大，如何能够消除这些重复或共享？

• 全站：相同的站点头、站点底部
• 同内容类型或栏目：侧边栏、区块

设计思路

• 将站点头和站点底独立为两个页面文件,类似于定义一个函数
• 在各静态页面中，将这个文件包含进来，类似于调用一个函数

如何实现包含这个功能，类似服务端脚本语言中的include ?

基于 script 标记的实现方案

• 将被包含的页面文件转换成一个js代码文件
• 将被包含的页面文件的内容转化一个字符串类型的全局变量
• 在目标页面中引入这个js文件，将字符串变量写入相应的位置

示例

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

缺陷

• 复杂的共享页面的书写较麻烦，比如双引号的转义
• 使用了全局变量。当包含多个文件时，潜在有变量命名冲突的可能

基于 ajax 的注入实现方案

• 无需将页面文件转换为js代码文件
• 使用ajax技术远程读取该页面文件的内容
• 使用dom技术将获得的内容写入相应的位置

基本思路：回忆上一章中我们使用ajax时，将js代码转换为json数据，理解程序的层次感

示例

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

ajax 方案免了转义之苦，但也有代价：内容要等请求回来才出现（首屏空等一块）、离开 JS 什么都看不到——两代方案的这些别扭，正是后来组件化（第 14 周）要解决的历史问题。

后话：这个问题后来是怎么消失的

包含是多页时代的补救：正因为页面各自独立成文件，才需要把公共部分拆出来、再手工装回去。案例对照：spa/static 的局限清单就是这份痛点的现场——每页手工写、结构高度重复。

有意思的是，案例链没有单设"包含"这一步：spa/template 用模板一次解决结构重复；spa/router 起整个应用只剩一个 HTML——头尾需要共享的前提（多个页面）本身消失了。这就是单页应用篇要讲的演化：补救手段的历史，与问题被消灭的历史。