首页 > 文章 > 前端

无框架WebComponents实战指南

时间：2025-10-20 09:27:31 292浏览收藏

本文深入探讨了使用原生 Web Components 构建复杂Web应用的可能性与实践方法。**无框架Web Components构建复杂应用全攻略**指出，通过原生Custom Elements构建可复用组件，结合发布-订阅模式实现轻量级状态管理，并利用history API实现客户端路由，再辅以事件总线完成组件间通信，完全可以构建出结构清晰、可维护的大型应用。文章详细阐述了Custom Elements的定义与使用，轻量级状态管理器的实现，以及如何构建客户端路由和实现组件间通信。摆脱框架束缚，享受更小体积和更高可控性的同时，开发者也需自行完善基础设施。

完全可行，通过原生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 = `

${text}

`;
}
}

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 监听实现路由系统。

示例：监听 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}>`;
    }
  }
}

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

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

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

简单实现：

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

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《无框架WebComponents实战指南》文章吧，也可关注golang学习网公众号了解相关技术文章。