本文介绍一种轻量、可靠的方法，通过为 设置唯一 ID 并在 JS 中条件执行逻辑，实现单脚本适配多页面，避免因元素缺失导致的 Cannot read properties of null 报错，兼顾性能与可维护性。
本文介绍一种轻量、可靠的方法，通过为 `
` 设置唯一 id 并在 js 中条件执行逻辑，实现单脚本适配多页面，避免因元素缺失导致的 `cannot read properties of null` 报错，兼顾性能与可维护性。在构建多页静态网站（如个人作品集）时，将 CSS 和 JavaScript 提取为全局资源是提升加载性能和代码复用率的标准实践。但直接共用一个 JS 文件常引发运行时错误——例如 Uncaught TypeError: Cannot read properties of null，其根源在于：某页脚本试图操作另一页面才存在的 DOM 元素（如 document.querySelector('.hero-cta') 在无该元素的页面中返回 null，后续调用 .addEventListener() 即崩溃）。
解决思路不是拆分脚本，而是让脚本“感知”当前页面上下文，并按需执行对应逻辑。最简洁、兼容性最佳的方式是：为每个 HTML 页面的 标签赋予唯一 ID，并在 JS 中通过 document.body.id 进行条件分支控制。
✅ 正确做法示例：
<!-- page1.html --> <body id="home"> <header class="hero"><h1>Welcome</h1></header> <button class="js-scroll-top">↑ Top</button> </body>
<!-- page2.html -->
<body id="projects">
<section class="project-grid">
<div class="project-card" data-id="p1">Project A</div>
</section>
</body>对应单个 main.js 文件结构如下：
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
立即学习“Java免费学习笔记（深入）”；
// ✅ 全局通用逻辑（所有页面都执行）
document.addEventListener('DOMContentLoaded', () => {
// 例如：统一初始化 GSAP、设置基础滚动监听、加载动画等
gsap.registerPlugin(ScrollTrigger);
console.log('Core scripts loaded.');
// ? 按页面 ID 分支执行专属逻辑
const currentPage = document.body.id;
if (currentPage === 'home') {
// 仅在首页执行
const hero = document.querySelector('.hero');
if (hero) {
gsap.from(hero, { opacity: 0, y: 30, duration: 1 });
}
const scrollTopBtn = document.querySelector('.js-scroll-top');
if (scrollTopBtn) {
scrollTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
}
if (currentPage === 'projects') {
// 仅在项目页执行
const cards = document.querySelectorAll('.project-card');
cards.forEach(card => {
card.addEventListener('click', () => {
alert(`Viewing ${card.dataset.id}`);
});
});
}
// 可继续添加其他页面分支...
});⚠️ 关键注意事项：
- 务必检查元素是否存在：即使加了 if (currentPage === 'xxx')，也应在操作前用 if (element) 或 ?. 链式调用做防御性判断（如 hero?.querySelector('h1')），避免因模板微调导致意外报错；
- DOMContentLoaded 是安全前提：确保 DOM 已就绪再执行查询，避免因脚本过早执行而获取不到元素；
- ID 命名需规范且唯一：推荐使用语义化小写短横线格式（如 id="about"、id="contact"），避免空格或特殊字符；
- 不推荐依赖 window.location.pathname：虽可行，但对本地开发（file:// 协议）、路由重写（如 404.html 映射）或预渲染场景兼容性差； 方案更直观、可控、调试友好；
- CSS 同理可优化：为 添加 ID 后，也可在全局 CSS 中使用 body#home .hero { ... } 实现页面级样式隔离，无需重复引入样式表。
总结：通过
+ 条件分支 + 防御性 DOM 查询，你既能享受单文件带来的加载优势与维护便利，又能彻底规避跨页脚本干扰。这是一种零依赖、原生支持、易于团队协作的工程化实践，特别适合 Portfolio、Landing Page 等中小型静态站点。
