当前位置：首页 > VUE

不用vue实现spa

2026-01-14 03:57:42VUE

使用原生 JavaScript 实现 SPA

通过 History API 和动态内容加载实现单页应用的核心逻辑。pushState 和 popstate 事件用于管理路由变化，XMLHttpRequest 或 fetch 实现异步内容加载。

// 路由配置
const routes = {
  '/': 'home.html',
  '/about': 'about.html',
  '/contact': 'contact.html'
};

// 动态加载内容
function loadContent(url) {
  fetch(url)
    .then(response => response.text())
    .then(html => {
      document.getElementById('app').innerHTML = html;
    });
}

// 路由变化处理
window.addEventListener('popstate', () => {
  const path = window.location.pathname;
  loadContent(routes[path] || '404.html');
});

// 初始化路由
document.addEventListener('DOMContentLoaded', () => {
  document.body.addEventListener('click', e => {
    if (e.target.matches('[data-link]')) {
      e.preventDefault();
      const href = e.target.getAttribute('href');
      history.pushState(null, null, href);
      loadContent(routes[href]);
    }
  });
  // 加载初始路由
  const initialPath = window.location.pathname;
  loadContent(routes[initialPath] || 'home.html');
});

使用 Web Components 封装组件

通过 Custom Elements 和 Shadow DOM 创建可复用的组件，模拟 Vue 的组件化开发体验。

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; }
        .component { color: blue; }
      </style>
      <div class="component">
        <slot></slot>
      </div>
    `;
  }
}
customElements.define('my-component', MyComponent);

状态管理方案

采用发布-订阅模式实现简单状态管理，类似 Redux 的基础功能。

class Store {
  constructor(state) {
    this.state = state;
    this.subscribers = [];
  }

  subscribe(callback) {
    this.subscribers.push(callback);
  }

  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.subscribers.forEach(cb => cb(this.state));
  }
}

// 使用示例
const store = new Store({ count: 0 });
store.subscribe(state => {
  document.getElementById('counter').textContent = state.count;
});

document.getElementById('increment').addEventListener('click', () => {
  store.setState({ count: store.state.count + 1 });
});

模板渲染引擎

实现简单的模板渲染功能，支持数据绑定和条件渲染。

function render(template, data) {
  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
    return data[key] || '';
  });
}

// 使用示例
const template = '<div>{{title}}</div><p>{{content}}</p>';
const data = { title: 'Hello', content: 'World' };
document.getElementById('app').innerHTML = render(template, data);

性能优化策略

采用惰性加载和缓存机制提升 SPA 性能，路由切换时仅更新变化的部分。

const cache = {};
async function loadContentCached(url) {
  if (cache[url]) return cache[url];
  const response = await fetch(url);
  const html = await response.text();
  cache[url] = html;
  return html;
}

路由守卫实现

通过路由拦截实现权限控制，类似 Vue Router 的导航守卫功能。

const auth = {
  isAuthenticated: false
};

function navigateTo(path) {
  if (path === '/admin' && !auth.isAuthenticated) {
    history.pushState(null, null, '/login');
    return loadContent('login.html');
  }
  history.pushState(null, null, path);
  loadContent(routes[path]);
}

构建工具集成

使用 Rollup 或 Webpack 打包原生 JavaScript SPA，支持代码分割和 tree-shaking。

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [
    require('rollup-plugin-node-resolve')(),
    require('rollup-plugin-commonjs')()
  ]
};

不用vue实现spa