Webcore 前端原生开发框架
简介
Webcore 是基于 原生 Web Components 标准设计的一套前端运行时与开发框架。 它围绕「服务化架构 + 组件系统 + 路由系统 + 事件系统」构建，为浏览器环境提供一套轻量但完整的前端基础设施，让你在不依赖大型三方框架的前提下，依然可以用统一、可维护的方式开发中小型 Web 应用。
框架优势
- 原生优先、长期可用。
- 完全建立在浏览器原生能力之上，无需构建工具，不绑定任何框架生态，官方标准，长期支持。
- 天然支持样式隔离、热重载、模块化、远程加载、懒加载等。
- 完全基于原生能力的封装，不创造新语法，会原生开发即可上手，学习成本低。
- 服务化架构，清晰可扩展。
- 所有能力都抽象为服务：组件、路由、事件等，由服务容器统一管理和注入。
- 组件既是服务，各个组件可以独立开发，独立部署，独立维护。
- 支持微服务，各个服务和组件互相独立，又可通过接口相互通讯。
- 支持插件拓展，按需安装服务或组件，无限拓展。
文档说明
框架使用方法，请点击首页：https://beker.picp.vip/webcore
源码地址 Github: github.com/webcore-fra…
组件结构
export default class MyComponent extends webcore.component.builder {
static tag = 'my-component'; // 必须：组件标签名
static observedAttributes = ['title']; // 可选：要监听的属性
create() {
this.styles('/styles/base.css') // CSS 字符串或 URL
// .styles('/components/my/style.css') // 按顺序添加多个 CSS
// .styles('.root {color: red}')
.template('/components/my/my.html') // HTML 字符串或 URL
.mode('closed') // Shadow DOM 模式：'open' | 'closed'
.inject(['event', 'http', 'router']) // 要注入的服务
.configuration({ // 组件配置（可选）
data: true,
});
}
// 生命周期钩子（按需实现）
onCreated(){} // 初始模板/样式/服务准备完毕，但未挂载
onBeforeMount(){} // 即将挂载
onConnected(){} // 元素插入到 DOM 中
onMounted(){} // 完全挂载完毕
onDisconnected(){} // 元素从 DOM 中移除
// 属性变化
onAttributeChanged(attr, newVal, oldVal){} // 需开启 observedAttributes
// 被移动到新的文档
onAdopted(){}
// 开启路由时（见路由系统）
onBeforeRoute(route){ // 路由之前
return true
}
onRouted(route){} // 路由之后
}
项目案例
音乐播放器：https://beker.picp.vip/music
这是用 webcore 框架开发的一个音乐播放器，同时适配桌面端和移动端，响应式布局。这个播放器说明原生组件也可以写出复杂的web应用。
拓展延伸
Webcore 框架可以与任何其他框架搭配使用，比如它的组件在注册后可以在 React或 Vue 中直接使用，webcore 的事件系统可以与 Vue 搭配使用，简化 Vue 的组件通讯，也可以使用其他框架做组件开发，把 webcore 当作工具使用。
不足之处
-
插槽问题：原生组件因为样式的强隔离，插槽问题一直是绕不过的难题，目前的插槽功能支持非常有限，只能支持插槽内顶层元素的样式控制，深层元素的样式控制不了。（目前的想法是抛弃官方的方法，在创建组件的时候，把插槽的元素移动到组件内部指定位置）。
-
数据响应式： 由于设计的初衷就是原生框架，所以并没有强大的数据响应式系统，没有使用虚拟DOM等主流框架的技术，只实现了简单的数据响应式。框架把对DOM的操作完全交给开发者，由开发者精细控制DOM更新等数据响应式操作。
总结
框架架构基础虽已搭建好，剩下的就是添砖加瓦，但原生组件还有许多不足之处，虽比不上主流框架（React、Vue等）的强大与完美，但起码说明这是一个好的起点，说明原生开发也能行，随着官方标准的推进和原生技术的完善，原生组件也有望在未来大放异彩，或者也能为前端开发多出一种选择。
