如何构建一个无框架、基于原生Web Components的复杂应用？-js教程-PHP中文网

如何构建一个无框架、基于原生Web Components的复杂应用？

夢幻星辰

发布： 2025-10-08 18:54:01

原创

715人浏览过

完全可行，通过原生Custom Elements构建组件，结合发布-订阅模式实现状态管理，利用history API实现路由，并通过事件总线完成通信，可构建结构清晰、可维护的大型应用。

如何构建一个无框架、基于原生web components的复杂应用？

构建一个无框架、基于原生 Web Components 的复杂应用是完全可行的，关键在于组织方式、状态管理、路由和组件通信的设计。虽然没有 React 或 Vue 那样的生态支持，但现代浏览器原生能力已经足够强大。以下是实现这类应用的核心思路和步骤。

1. 使用原生 Custom Elements 构建可复用组件

Web Components 的核心是 Custom Elements，它允许你创建自定义 HTML 标签，并封装样式、结构和行为。

定义一个组件非常直接：

class TodoItem extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const text = this.getAttribute('text') || 'No title';
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; padding: 8px; border-bottom: 1px solid #eee; }
      </style>
      <div>${text}</div>
    `;
  }
}

customElements.define('todo-item', TodoItem);

你可以通过属性传递数据，监听事件，甚至暴露方法。组件之间通过 DOM 事件通信，比如 dispatchEvent 触发自定义事件。

2. 实现轻量级状态管理

在没有 Redux 或 Pinia 的情况下，可以使用一个简单的全局状态容器配合事件机制来实现响应式更新。

例如，创建一个基于发布-订阅模式的状态管理器：

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

  setState(newState) {
    this.state = {...this.state, ...newState};
    this.notify();
  }

  subscribe(callback) {
    this.listeners.push(callback);
    callback(this.state); // 立即触发一次
    return () => {
      this.listeners = this.listeners.filter(fn => fn !== callback);
    };
  }

  notify() {
    this.listeners.forEach(fn => fn(this.state));
  }
}

组件在 connectedCallback 中订阅状态变化，自动更新自身 UI。disconnectedCallback 中取消订阅避免内存泄漏。

3. 实现客户端路由

复杂应用通常需要多页面视图。可以基于原生 history API 和 URL 监听实现路由系统。

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

示例：监听 popstate 并匹配路径

class Router {
  routes = [];

  add(path, component) {
    this.routes.push({ path, component });
    return this;
  }

  start() {
    window.addEventListener('popstate', () => this.navigate(location.pathname));
    this.navigate(location.pathname);
  }

  navigate(path) {
    history.pushState({}, '', path);
    const match = this.routes.find(r => r.path === path);
    if (match) {
      document.querySelector('#app').innerHTML = `
        <${match.component}></${match.component}>`;
    }
  }
}

配合自定义链接元素或 JS 调用 navigate 方法即可实现跳转。

4. 组件间通信与事件总线

父子通信可通过属性和事件完成。跨层级或非父子关系可用全局事件总线。

简单实现：

const EventBus = {
  on(event, handler) {
    document.addEventListener(event, handler);
  },
  off(event, handler) {
    document.removeEventListener(event, handler);
  },
  emit(event, data) {
    document.dispatchEvent(new CustomEvent(event, { detail: data }));
  }
};

任意组件都可以发送或监听消息，比如保存成功后通知顶部提示栏显示 toast。

基本上就这些。通过合理拆分组件、统一状态流、清晰的路由控制和事件机制，完全可以构建出结构清晰、可维护的大型原生 Web Components 应用。不依赖框架意味着更小的体积和更高的可控性，只是需要自己补足一些基础设施。

以上就是如何构建一个无框架、基于原生Web Components的复杂应用？的详细内容，更多请关注php中文网其它相关文章！