如何用JavaScript高效实现多页面网页的路由功能，避免代码冗余？

在JavaScript中实现多页面网页的路由功能时，可以通过以下几种方法来提高代码的效率和可维护性，避免代码冗余：

1. 使用前端框架（如React, Vue, Angular）

这些现代前端框架通常内置了路由功能，可以非常方便地实现多页面应用的路由管理。

• React: 使用 react-router-dom 库。
• Vue: 使用 vue-router 库。
• Angular: 使用 @angular/router 模块。

这些框架的路由库通常提供了声明式的路由配置，能够有效地管理路由和组件之间的关系。

2. 使用原生JavaScript实现路由

如果你不想使用框架，可以使用原生JavaScript来实现路由功能。以下是一个简单的实现思路：

2.1 使用 window.location 和 window.history

你可以通过监听 window.location 的变化来实现路由功能，并使用 window.history API 来管理浏览器的历史记录。

// 路由配置
const routes = {
  '/': 'Home Page',
  '/about': 'About Page',
  '/contact': 'Contact Page'
};

// 路由函数
function router() {
  const path = window.location.pathname;
  const content = routes[path] || '404 Page Not Found';
  document.getElementById('app').innerHTML = content;
}

// 监听路由变化
window.addEventListener('popstate', router);

// 初始化路由
router();

// 导航函数
function navigate(path) {
  window.history.pushState({}, '', path);
  router();
}

// 示例：点击链接导航
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    navigate(e.target.getAttribute('href'));
  });
});

2.2 使用 hashchange 事件

如果你使用 # 来管理路由，可以监听 hashchange 事件来实现路由功能。

// 路由配置
const routes = {
  '#home': 'Home Page',
  '#about': 'About Page',
  '#contact': 'Contact Page'
};

// 路由函数
function router() {
  const hash = window.location.hash;
  const content = routes[hash] || '404 Page Not Found';
  document.getElementById('app').innerHTML = content;
}

// 监听路由变化
window.addEventListener('hashchange', router);

// 初始化路由
router();

3. 使用模块化开发

为了避免代码冗余，可以将路由逻辑封装到一个独立的模块中，然后在需要的地方引入和使用。

// router.js
export const routes = {
  '/': 'Home Page',
  '/about': 'About Page',
  '/contact': 'Contact Page'
};

export function router() {
  const path = window.location.pathname;
  const content = routes[path] || '404 Page Not Found';
  document.getElementById('app').innerHTML = content;
}

export function navigate(path) {
  window.history.pushState({}, '', path);
  router();
}

// main.js
import { router, navigate } from './router.js';

window.addEventListener('popstate', router);
router();

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    navigate(e.target.getAttribute('href'));
  });
});

4. 使用动态导入（Dynamic Imports）

如果你的页面内容较多，可以使用动态导入来按需加载页面内容，减少初始加载时间。

// router.js
export const routes = {
  '/': () => import('./pages/Home.js'),
  '/about': () => import('./pages/About.js'),
  '/contact': () => import('./pages/Contact.js')
};

export async function router() {
  const path = window.location.pathname;
  const loadPage = routes[path] || (() => import('./pages/404.js'));
  const { default: Page } = await loadPage();
  document.getElementById('app').innerHTML = Page();
}

export function navigate(path) {
  window.history.pushState({}, '', path);
  router();
}

// main.js
import { router, navigate } from './router.js';

window.addEventListener('popstate', router);
router();

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    navigate(e.target.getAttribute('href'));
  });
});

5. 使用Webpack或其他打包工具

如果你使用Webpack等打包工具，可以结合代码分割（Code Splitting）和动态导入来进一步优化路由实现。

总结

• 使用前端框架：React、Vue、Angular等框架提供了强大的路由功能，适合大型项目。
• 原生JavaScript实现：适合小型项目或不想引入框架的场景。
• 模块化开发：将路由逻辑封装成模块，提高代码复用性和可维护性。
• 动态导入：按需加载页面内容，优化性能。

根据项目规模和需求选择合适的方法，可以有效避免代码冗余并提高开发效率。