多HTML页面共用main.js时如何区分页面专属脚本？

嘿，这个场景我太熟了——多页面共用一个脚本，结果某个页面没有对应元素就炸锅，还不能加新文件对吧？给你几个靠谱的解决方案，都是不用新增JS文件就能搞定的：

方案1：先检查元素是否存在再执行逻辑 #

这是最直接的应急方案，每次获取到元素后，先判断它是否存在，再执行依赖它的代码。这样在没有该元素的页面里，代码会自动跳过这部分逻辑，不会报错。

举个例子：

// 获取元素
const HTMLelement = document.querySelector('.className');

// 只有元素存在时才执行后续逻辑
if (HTMLelement) {
  // 这里写操作该元素的所有代码，比如绑定事件、修改内容
  HTMLelement.addEventListener('click', () => {
    console.log('元素被点击了');
  });
  
  // 甚至可以把逻辑封装成函数，在这里调用
  initIndexElement();
}

function initIndexElement() {
  // 元素的初始化逻辑
  HTMLelement.textContent = '欢迎访问首页';
}

方案2：根据当前页面标识区分执行逻辑 #

如果不同页面的专属逻辑比较多，直接写一堆if判断元素会显得杂乱，这时候可以通过页面的唯一标识来区分执行不同的代码块。

方式A：通过URL路径判断 #

利用window.location.pathname获取当前页面的路径，判断是否是目标页面后再执行对应逻辑：

const currentPath = window.location.pathname;

// 判断当前是否是index.html页面
if (currentPath.endsWith('index.html')) {
  // 这里写首页专属的所有代码
  const HTMLelement = document.querySelector('.className');
  // 操作元素的逻辑...
} else if (currentPath.endsWith('rooms.html')) {
  // 这里写rooms页面的专属代码（如果有的话）
}

方式B：通过页面body的类名判断 #

给每个页面的<body>标签加一个独特的类名，比如index.html的body加class="page-index"，rooms.html加class="page-rooms"，然后通过类名判断：

<!-- index.html的body标签 -->
<body class="page-index">
<!-- rooms.html的body标签 -->
<body class="page-rooms">

然后在main.js里：

if (document.body.classList.contains('page-index')) {
  // 执行首页专属逻辑
  const HTMLelement = document.querySelector('.className');
  // 操作元素...
}

方案3：封装页面专属函数，在对应页面手动调用 #

这个方案更模块化，把每个页面的专属逻辑封装成独立函数，然后只在对应的页面里调用这个函数。这样main.js里的函数不会自动执行，只有被调用时才会运行，从根源避免了在错误页面执行错误代码的问题。

首先在main.js里定义各个页面的初始化函数：

// 首页专属初始化函数
function initIndexPage() {
  const HTMLelement = document.querySelector('.className');
  // 操作元素的所有逻辑
  HTMLelement.addEventListener('click', handleElementClick);
}

// 房间页专属初始化函数（如果需要的话）
function initRoomsPage() {
  // rooms页面的逻辑...
}

// 通用函数可以放在外面，所有页面都能调用
function handleElementClick() {
  console.log('元素点击事件触发');
}

然后在index.html的<body>末尾添加调用代码：

<!-- index.html的body结束前 -->
<script>
  initIndexPage();
</script>
</body>

而rooms.html里不需要调用initIndexPage()，这样就不会执行依赖首页元素的代码了。

方案选择建议 #

• 如果只是个别元素的问题，方案1最快速，改动最小；
• 如果页面专属逻辑较多，方案2或方案3更合适，其中方案3的模块化程度最高，后续维护和扩展都更方便。

内容的提问来源于stack exchange，提问作者Артем Мирошниchenko