如何正确拆分不同页面的JavaScript逻辑？

这问题我之前整合项目脚本的时候也碰到过，明明只想让登录页的逻辑在登录页跑，结果所有页面都弹出提示，太闹心了！下面分享几个我亲测有效的解决思路：

1. 给页面加标识，按标识执行逻辑 #

这是最直观也最容易维护的方法——给每个页面的<body>标签加一个独有的类名或ID，比如登录页写<body class="page-login">，用户信息页写<body class="page-user-info">，然后在合并后的脚本里判断这个标识再执行对应逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 登录页专属逻辑
  if (document.body.classList.contains('page-login')) {
    alert('Hello, this is logic for login.js');
  }

  // 用户信息页专属逻辑
  if (document.body.classList.contains('page-user-info')) {
    // 这里放user-info.js的代码
    console.log('User info page loaded');
  }

  // 产品列表页同理...
});

2. 用ES模块封装，按需调用 #

既然你已经提到了ES6模块，那完全可以把每个页面的逻辑封装成独立的初始化函数，然后在对应页面的HTML里按需导入并执行，而不是让所有逻辑自动运行：

比如先把各页面逻辑封装成模块：

// login.js
export function initLogin() {
  alert('Hello, this is logic for login.js');
}

// user-info.js
export function initUserInfo() {
  console.log('Initializing user info page');
}

打包成scripts.min.js后，在login.html里只调用登录页的初始化函数：

<script type="module">
  import { initLogin } from './scripts.min.js';
  initLogin();
</script>

其他页面同理，只导入自己需要的函数。这样即使打包文件包含所有模块，只有被主动调用的逻辑才会执行，完美避免全局触发的问题。

3. 通过URL路径判断页面 #

如果你的页面URL结构很清晰（比如/login.html、/user-info.html），也可以直接通过window.location.pathname来判断当前页面：

document.addEventListener('DOMContentLoaded', function() {
  const currentPath = window.location.pathname;

  if (currentPath.endsWith('/login.html')) {
    // 登录页逻辑
    alert('Hello, this is logic for login.js');
  } else if (currentPath.endsWith('/user-info.html')) {
    // 用户信息页逻辑
  }
});

不过这个方法要注意URL路径的变化（比如部署时的子目录），不如页面标识的方法灵活。

额外小建议 #

不管用哪种方法，都尽量把每个页面的逻辑封装成独立的函数或命名空间，避免全局变量污染，后续维护起来也更轻松。比如可以把所有页面逻辑放到一个统一的对象里：

const PageHandlers = {
  login: () => {
    alert('Hello, this is logic for login.js');
  },
  userInfo: () => {
    console.log('User info page logic');
  },
  products: () => {
    // 产品列表页逻辑
  }
};

// 然后根据页面标识调用
document.addEventListener('DOMContentLoaded', function() {
  const pageClass = document.body.className;
  if (pageClass.includes('page-login')) PageHandlers.login();
  if (pageClass.includes('page-user-info')) PageHandlers.userInfo();
});

内容的提问来源于stack exchange，提问作者pepeevich