完全可行，通过原生Custom Elements构建组件，结合发布-订阅模式实现状态管理，利用history API实现路由，并通过事件总线完成通信，可构建结构清晰、可维护的大型应用。
构建一个无框架、基于原生 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 监听实现路由系统。
示例：监听 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 应用。不依赖框架意味着更小的体积和更高的可控性，只是需要自己补足一些基础设施。
