不用vue实现spa
使用原生 JavaScript 实现 SPA
通过监听 URL 变化动态加载内容，结合 history.pushState 或 hashchange 事件实现路由切换。
// 路由配置
const routes = {
'/': 'Home Page Content',
'/about': 'About Page Content',
'/contact': 'Contact Page Content'
};
// 渲染内容到容器
function renderContent(path) {
const app = document.getElementById('app');
app.innerHTML = routes[path] || '404 Not Found';
}
// 监听路由变化
window.addEventListener('popstate', () => {
renderContent(window.location.pathname);
});
// 初始化路由
document.addEventListener('DOMContentLoaded', () => {
// 拦截链接点击事件
document.body.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
e.preventDefault();
const path = e.target.getAttribute('href');
window.history.pushState({}, '', path);
renderContent(path);
}
});
// 首次加载
renderContent(window.location.pathname);
});使用 History API 管理路由
利用 history.pushState 和 popstate 事件实现无刷新页面跳转，URL 显示为干净路径（无 # 符号）。
// 导航函数
function navigate(path) {
window.history.pushState({}, '', path);
renderContent(path);
}
// 后退/前进时触发
window.addEventListener('popstate', () => {
renderContent(window.location.pathname);
});使用 Hash 路由方案
通过监听 window.onhashchange 事件实现兼容性更好的路由方案，URL 以 #/path 形式呈现。
// 路由配置
const routes = {
'#/': 'Home Page',
'#/about': 'About Page',
'#/contact': 'Contact Page'
};
// 渲染函数
function render() {
const hash = window.location.hash || '#/';
document.getElementById('app').innerHTML = routes[hash] || '404';
}
// 初始化
window.addEventListener('hashchange', render);
window.addEventListener('load', render);动态内容加载
结合 AJAX 或 Fetch API 实现按需加载内容，提升性能。
async function loadContent(path) {
try {
const response = await fetch(`/api/content?path=${path}`);
const data = await response.json();
document.getElementById('app').innerHTML = data.content;
} catch (error) {
console.error('Failed to load content:', error);
}
}组件化方案
通过自定义元素或模板字符串实现组件化开发，保持代码模块化。
// 定义组件
class MyComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `<div class="component">Component Content</div>`;
}
}
// 注册组件
customElements.define('my-component', MyComponent);状态管理方案
使用事件总线或观察者模式实现简单状态管理。
// 简易事件总线
const eventBus = {
events: {},
emit(event, data) {
if (this.events[event]) this.events[event].forEach(cb => cb(data));
},
on(event, callback) {
this.events[event] = this.events[event] || [];
this.events[event].push(callback);
}
};
// 使用示例
eventBus.on('data-updated', (data) => {
console.log('Data changed:', data);
});性能优化建议
使用 requestAnimationFrame 进行批量 DOM 操作，避免布局抖动。
function batchUpdate(callback) {
requestAnimationFrame(() => {
const fragment = document.createDocumentFragment();
callback(fragment);
document.getElementById('app').appendChild(fragment);
});
}
